vue数据驱动原理（object.definePeoperty）和视图驱动原理（v-model）的实现

最新推荐文章于 2024-05-14 23:10:28 发布

艺术就是派大星220

最新推荐文章于 2024-05-14 23:10:28 发布

阅读量422

点赞数 2

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/Rossbort/article/details/120317753

版权

vue双向数据绑定的实现原理

Vue 主要通过以下 4 个步骤来实现数据双向绑定的：

实现一个监听器 Observer：对数据对象进行遍历，包括子属性对象的属性，利用 Object.defineProperty() 对属性都加上 setter 和 getter。这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。
实现一个解析器 Compile：解析 Vue 模板指令，将模板中的变量都替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，调用更新函数进行数据更新。
实现一个订阅者 Watcher：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，主要的任务是订阅 Observer 中的属性值变化的消息，当收到属性值变化的消息时，触发解析器 Compile 中对应的更新函数。
实现一个订阅器 Dep：订阅器采用发布-订阅设计模式，用来收集订阅者 Watcher，对监听器 Observer 和订阅者 Watcher

关注