原理
1.vue 双向数据绑定是通过数据劫持,结合发布订阅模式的方式来实现的, 也就是说数据和视图同步数据发生变化视图跟着变化视图变化,数据也随之发生改变.
vue中按照mvvm的架构去进行实现的
mvvm:
m:model
v: view
vm: viewmodel
2.vue实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。
问题:vue的双向数据绑定的原理?
vue在创建vm的时候,会将数据配置到实例中,然后通过Object.defineProperty方法,为数据动态的添加getter与setter方法。
当获取数据的时候,会触发对应的getter方法,当设置数据的时候,触发对应的setter方法。
然后当setter方法触发完成的时候,内部会进一步触发watcher,当数据改变了,视图则更新操作完毕。
代码演示
//Object.defineProperty 需要三个参数(object , propName , descriptor)
//1 object 对象 => 给谁加
//2 propName 属性名 => 要加的属性的名字 【类型:String】
//3 descriptor 属性描述 => 加的这个属性有什么样的特性【类型:Object】
var obj = {}
let middel = 100
Object.defineProperty(obj,"msg",{
get(){
//console.log("get方法被执行了哦....")
return middel
},
set(val){
// console.log("set方法被执行了哦....",val)
// obj.msg = val
middel = val
}
})
//console.log(obj.msg) //获取对象的属性的时候,会调用自身的get方法
obj.msg = 1111 //设置对象的属性的时候,会调用自身的set方法
console.log(obj.msg)
注:没有做动态效果图,自己去演示