Vue 数据响应式

65 阅读1分钟

data.png

“响应式”,意为当数据改变后,Vue会通知到使用该数据的代码,例如当视图渲染中使用的某个数据改变后,视图也会自动更新。

上图为Vue文档对响应式的示意图,大体工作方式如下:

  1. 每个 Vue Component都有一个与之对应的Watcher实例。
  2. Vue 的 data 有gettersetter属性; 3.当 Vue Component render函数被执行的时候,data会被touchgetter方法被调用,此时Vue 会去记录Vue Component所依赖的所有data,这一过程也叫依赖收集。
  3. data被改动时,setter会被调用,此时,Vue 会通知所有依赖于此data的组件,调用render函数,更新视图。

参考链接