对 Vue 数据响应式的理解

242 阅读1分钟

什么是数据响应式

数据响应式是指,在改变数据的时候,视图也会跟着更新

当修改 Vue 实例中的数据式,视图就会重新渲染,出现新的内容。这就是 Vue 的数据响应式。

Vue 是利用 Object.defineProperty 的方法里面的 gettersetter 方法的观察者模式来实现数据响应式的

官方解释

  • 总结:
  1. 任何一个 Vue Component 都有一个与之对应的 Watcher 实例。
  2. Vue 的 data 上的属性会被添加 gettersetter 属性。
  3. Vue Component render 函数被执行的时候, data 上会被 触碰( touch ), 即被 getter 方法会被调用, 此时 Vue 会去记录此 Vue component 所依赖的所有 data。(这一过程被称为依赖收集)
  4. data 被改动时(主要是用户操作), 即被 setter 方法会被调用, 此时 Vue 会去通知所有依赖于此 data 的组件去调用他们的 render 函数进行更新。

本文参考摘录了:

  1. 最简化 VUE的响应式原理---daisy
  2. 说说你对 Vue 数据响应式的理解---lanycsq
  3. Vue 响应式原理白话版