vue开发（九）vue数据双向绑定原理

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/baizaozao/article/details/87805789

原理

• 数据劫持 + 订阅者发布者

数据劫持

• Object.defineProperty: 控制一个对象属性的一些特有操作，比如读写权、是否可以枚举

过程

1. 首先，需要利用Object.defineProperty，将要观察的对象，转化成getter/setter，以便拦截对象赋值与取值操作，称之为Observer；
2. 需要将DOM解析，提取其中的指令与占位符，并赋与不同的操作，称之为Compiler；
3. 需要将Compile的解析结果，与Observer所观察的对象连接起来，建立关系，在Observer观察到对象数据变化时，接收通知，同时更新DOM，称之为Watcher；
4. 最后，需要一个公共入口对象，接收配置，协调上述三者，称为Vue;

实现关键

graph LR
view-->data
data-->view

view更新data

• 通过事件监听即可

data更新view

graph LR
数据发生改变-->触发更新view

• Observer：设置一个监听器，监听所有属性，如果有改变，通知watcher订阅者
• watcher：设置订阅者，接收到属性的变化，然后执行函数，改变视图
• Dep：消息订阅器，专门收集订阅者，统一管理watcher和observer
• Compile：指令解析器，对view中的元素进行扫描和解析，将指令初始化为一个订阅者watcher，替换模板数据或者绑定相应函数