vue数据双向绑定原理

52 阅读1分钟

原理

compile阶段解析html模板,第一次解析的时候会更新视图(数据的值直接更新到视图中) ,并初始化了watcher对象,初始化的时候做了啥,把watcher强制加入Dep里面,Dep你可以理解是一个装watcher的集合,每个watcher里面有个update方法可以更新视图,当ViewModel数据改变的时候会触发set方法,比较新的值和旧值是否相等,如果不相等,通知Dep,然后Dep会遍历每个watcher对象并执行watcher的update方法更新视图,反之,当视图发生改变(input输入),可以通过监听事件来获取视图的值,然后比较比较新的值和旧值是否相等,如果不相等,把新值赋值给ViewModel,然后ViewModel数据改变的时候又会触发set方法,重复上面的步骤更新视图

image.png

vue2与vue3的差别就是采用了新的proxy对象,能够自动识别对象和数组