Vue 中的数据流

双向绑定

model(数据) 和 view(视图) 之间的绑定， 任一方的更新都会触发另一方的更新。

单向数据流

model的更新会触发视图更新， 视图的更新堆model没什么影响。

Vue 的应用

• Vue是单向数据流，不是双向绑定。
• Vue的双向绑定不过是语法糖。
• Object.defineProperty 是Vue底层用来做数据响应式更新的，不是双向绑定。

数据驱动

• Vue 是数据驱动的视图框架，DOM跟数据是相互映射的，只有数据改变的时候视图才会做出相应的更新。

• 数据可以来自与自身的 data 属性、父元素的 prop、或者状态管理 Vuex。

• 数据改变触发视图更新有一些条件：

  1. 数据必须写进 data{},这样的话会有响应式。
  2. 仅把对象名称写进 data{} 是没有效果的，要写上属性。
  3. data{} 中的数据要写进视图中，否则不会响应式。

  基于这些特征我们要学会操作数据，不能直接操作 DOM。

  Vue响应式更新原理

  • 实例化的时候会对 data{} 下的数据进行处理，添加 getter 与 setter 的代理，以后读取写入数据都要经过代理层。使用到 Object.defineProperty.

• 组件在渲染的时候将 data{} 中用到的数据放进 Watcher。