双向数据绑定的原理

双向数据绑定的原理

Vue2.x 采用数据劫持结合发布订阅模式（PubSub 模式）的方式，通过 Object.defineProperty 来劫持各个属性的 setter、getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，

在属性被访问和修改时通知变化。

Vue 的数据双向绑定整合了 Observer，Compile 和 Watcher 三者，通过 Observer 来监听自己的 model 的数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁，达到

数据变化->视图更新，视图交互变化（例如 input 操作）->数据 model 变更的双向绑定效果。

Vue3.x 放弃了 Object.defineProperty，使用 ES6 原生的 Proxy，来解决以前使用 Object.defineProperty 所存在的一些问题。

computed 和 watch 的区别

一、这两者解决的问题

当我们的数据发生改变的时候，所有和该数据有关的数据都自动更新，执行我们定义的方法。不同于 methods 是需要相关的方法和交互来实现调用执行的。

二、computed 和 watch 以及 methods 的区别

1、性质上 methods：定义函数，手动调用

computed：计算属性，return 返回结果，自动调用 watch：观察，监听，发生改变就调用

2、使用场景 methods：一般不处理数据的逻辑，用于获取数据，和改变状态等情况

computed：多用于一个数据受多个数据影响的情况，具有缓存的特性，避免每次重新计算 watch：多用于一个数据影响多个数据的情况，且类似异步等情况的时候建议使用

3、执行时间 computed 和 methods 的初始化是在 beforeCreated 和 created 之间完成的。（以及Props, data都是）

4、缓存 computed：有缓存，重新渲染时，要是值没有改变，会直接返回之前的

watch：无缓存，重新渲染时，要是值没有改变，也会执行

5、是否异步 computed：不支持异步，但异步监听的时候，无法监听数据变化

watch：支持异步监听

三、computed 和 methods 的区别

无论是定义为一个计算属性还是一个函数方法，对于结果来说都是一样的，不同点在于，计算属性是根据依赖值变化才发生改变，而函数方法需要调用执行。