vue双向绑定原理

Posted 2023-03-19

参考技术A

具体步骤：

第一步： 需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter

这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化

2、自身必须有一个update()方法

3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。

第四步： MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

1、v-model是什么?怎么使用? vue中标签怎么绑定事件?

答：可以实现双向绑定，指令(v-class、v-for、v-if、v-show、v-on)。vue的model层的data属性。绑定事件：

Vue3.0 双向绑定原理

参考技术A

Vue.js 3.0的一些新特性 ，其中一个很重要的改变就是Vue3 将使用 ES6的Proxy 作为其观察者机制，取代之前使用的Object.defineProperty。

总结来说Object.defineProperty方法存在一定的局限性

基本用法：

Proxy 一共 支持13 种的拦截,相对Object.defineProperty更加丰富。

简单Demo

Vue3.0的一个主要点就是数据劫持的实现变更，其他的与Vue2.0大致相同，可参照 Vue双向绑定原理 详细了解一下。

参考：
ECMAScript 6 入门-阮一峰-Proxy章节