vue的双向数据绑定核心简析

定义：指view(视图层)修改数据时在的model(数据层)的对应数据也会随之修改，反之亦然。

简析：

v-bind 就是model修改时view也会修改  (通过监听model变化进行对应操作进而修改view)，

而v-on 就是view修改时model也会修改（通过事件触发来使修改view时进行对应操作进而修改model）

所以从某种条件下来说v-model可以说是其两者的相加

详解：

因为触发事件是用户操作的，所以只要定义好事件函数就可以使在修改view时修改model。

所以双向数据绑定真正的难点是怎么监听model的变化，从而修改view。

vue2和vue3实现双向数据绑定的方式不同，vue2通过Object.defineProperty而vue3是Proxy

这两种方式可以使数据变得“可观测”。

vue2的方式

let obj = { liu:"exm" } // 目标对象
let subs = {} // 依赖收集对象
第一个参数为目标对象 ，第二个为目标对象中属性的key ，第三个为各类操作的对象 
Object.defineProperty(obj,"liu",{
　　get(){ // key的属性被读取时执行此函数
　　　　console.log("读取了liu属性")
　　　　// 不能直接返回其本身不然会进行死循环，所以这里用依赖对象属性来代替
　　　　return subs.liu // 返回数据，不然会默认返回undefined
　　},
　　set(newVal){ // key的属性值被修改时执行此函数
　　　　console.log("设置了liu属性",)
　　　　// 忽略对应的更新view视图的代码
　　　　// 这里因为get是返回依赖对象属性，所以这里赋值也是给依赖对象属性
　　　　return subs.liu = newVal
　　}
})

这样的话数据就可以变成可观测的了，在数据变化时，通过set函数进行view的更新。
但是这个监听只是对单个属性，无法监听整个对象，所以要遍历对象的每一个属性。
在vue3用proxy解决了这个问题

vue3的方式

我有一篇专门写proxy介绍的文章，有兴趣的可以朋友移步一看。

let obj = { liu:"exm"} 
第一个参数为被代理的对象 第二个参数是声明了各类代理操作的对象 
let objProxy = new Proxy(obj,{
　　get(target,key){  // 当objProxy被读取执行此函数
　　　　return target[key]　// 返回数据，不然默认返回undefined
　　},
　　set(traget,key,value){  // 当objProxy被修改时执行此函数
　　　　console.log("修改代理对象的数据")
       // 忽略更新view视图的对应代码
　　　　return traget[key] = value // 最后数据赋值给属性
　　}
})
new Proxy返回的是一个代理对象，所以是通过操作代理对象来实现双向数据绑定的
如vue3的写法 let liu = reactive( { liu:1 } ) 返回给liu的是对象本身的代理对象

这里只是对其核心的数据观测进行简单解析，后面会有文章来详细说明双向数据绑定的具体实现

 

作者：博客园-DDjans，转载时请注明来源。

(请勿将文章用在任何商业用途，违者将承担相应法律责任)