首页天道酬勤怎么理解vue的数据双向绑定,数据绑定的基本原理

怎么理解vue的数据双向绑定,数据绑定的基本原理

张世龙 05-04 02:21 126次浏览

前言:什么是数据双向绑定?

vue是一个mvvm框架,是数据的双向绑定。 也就是说,数据变化时视图也发生变化,视图变化时数据也同步变化。 这也是vue的精髓。 单独的数据绑定是使用状态管理工具(如redux )的前提。 如果使用vuex,则数据流也是独立的,并且与双向数据绑定冲突。

为什么要实现数据的双向绑定?

在vue中,使用vuex时,数据实际上是单向的。 称为数据双向绑定的是所使用的UI控件,在处理窗体时,vue的双向数据绑定使用起来特别舒服。

即两者并不互斥,在全局性数据流使用单项,方便跟踪;局部性数据流使用双向,简单易操作。

另一方面,vue双向绑定原理vue中的v-model可以实现双向绑定,采用数据劫持与发布者-订阅者模式相结合的方式,通过Object.defineProperty ) )进行各个设置劫持getter,在数据发生更改时向订阅者发出消息,触发相应的回调并呈现视图3358wwwwwwwwww

这样,给此对象的某个值赋值后,setter就会启动并监听数据的变化

-Compile分析模板命令,用数据替换模板中的变量,然后初始化渲染页面视图,将更新函数绑定到与每个命令对应的节点,并添加接收数据的订阅者。 数据发生更改时,收到通知并更新视图的Watcher订阅者是观察器和compile之间的通信桥梁,主要是:

1、自身实例化时向属性订阅器(dep )添加自身

2、自己需要更新)方法

3、在等待属性变更dep.notice ()的通知时,如果可以调用自身的update ) )方法,触发绑定到Compile的回调,则成功退出。 MVM作为数据绑定的入口,集成了Observer、Compile和Watcher三者,通过Observer拦截自己的model数据的变化,通过Compile解析编译模板的指令,最终视图变化-数据模型更改的双向绑定效果。 http://www.Sina.com/http://www.Sina.com /

对象具有两个属性:

1 .数据属性:是我们常用的属性

2 .访问器属性:也称为访问器属性。 访问器属性是一组用于获取和设置值的函数。

控制台打印:

数据的属性是a和b

get和set是关键字,他们后面分别对应一个函数。 此函数是上面的红色部分所述的内存属性。

与get对应的方法称为getter,负责获取值,没有参数。 与set对应的方法是setter,负责设定值,在该函数整体中所有的return无效。具体步骤:

对象是由多个名称-值对组成的无序集合。 对象中的每个属性都对应于任意类型的值。

对象可以以构造函数或文字的形式定义。

除了上述添加属性的方法外,还可以使用Object.defineProperty定义新属性或修改原始属性。

语法: object.defineproperty(obj,prop,descriptor ) )。

参数:

obj:必备,对象;

prop :必需的、要定义或更改的属性的名称;

descriptor:必需,目标属性具有的特性;名词解释:

所传递函数的对象,即第一个参数obj;

使用方法:

Vue双向绑定原理,vue的数据双向绑定