浅谈Vue的深入响应原理

Vue的深入响应原理

Vue的深入响应式，又称双向数据绑定、数据驱动。

• 底层实现：es5特性，利用Object.defineProperty()中的getter和setter。

  • 语法：Object.defineProperty(对象，对象的属性，对象的属性配置)

• Vue是通过数据劫持和事件的订阅发布模式来实现的，数据劫持指得是vue通过observer观察者对象对data选项中的属性做getter、setter设置，然后通过事件的订阅发布来监听data数据的变化，只要数据一经更改，就重新出发视图的更新。

• 图示：
  

  • 只有当对象的属性值设置为getter和setter之后才能改变其值，经过getter和setter设置之后，watcher便会监听到数据的情况，重新渲染。
  • 上图可以简单地理解为（不太准确，但有助于理解）：

• 总结如下【三步走】：

  • 第一步：data【数据】设置getter、setter—>【设置】
  • 第二步：watcher监听data【数据】—>【修改】
  • 第三步：重新渲染data

• 存储器：

  • get：正向，视图（V）驱动数据（VM）
  • set：反向，数据（VM）驱动视图（V）