前言:什么是数据双向绑定?
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;
使用方法: