关于Vue2的双向数据绑定以及 响应式原理 的理解
vue的数据双向绑定,将mvvm 作为数据绑定的入口,整合 Observer, Complie 和watcher 三者,通过Observer 来监听自己的model 的 数据变化,vue 在初始化数据时,会对数据进行递归遍历,把每个属性都转换成get 和set 通过 Object.defineProperty () 方法实现数据劫持。当数据变化时,会触发setter,setter会通知所有订阅者,
1. 双向数据绑定 :
vue的数据双向绑定,将mvvm 作为数据绑定的入口,整合 Observer, Complie 和watcher 三者,通过Observer 来监听自己的model 的 数据变化,
通过Compile 来解析编译模板指令(vue 中是用来解析{{}})最终利用 watcher 搭起 Observer 和Compile 之间的通信桥梁,
达到数据变化-》 视图更新-》;视图变化(input)->数据model 变更双向绑定
<input id='app' />
<span id='spanVal'> </span>
var obj = {}
var initVal = 'aaa';
Object.defineProperty(obj,initVal,{
get(){
console.log('获取obj的最新值')
return initVal
},
set(val){
initVal = val;
console.log('设置最新的值')
document.getElementById('initVal').text(initVal)
}
})
document.addEventListener('keyup',function(e){
obj.initVal = e.target.value; // 监听获取文本框输入的值
})
2. 响应式原理 :
vue 在初始化数据时,会对数据进行递归遍历,把每个属性都转换成get 和set 通过 Object.defineProperty () 方法实现数据劫持
他可以接收三个参数 第一个参数 要操作的对象,第二个参数 要定义或修改的对象属性名 第三个 描述对象,
当数据变化时,会触发setter,setter会通知所有订阅者,订阅者就会更新页面视图,从而实现了数据双向绑定
更多推荐
所有评论(0)