“响应式”,意为当数据改变后,Vue会通知到使用该数据的代码,例如当视图渲染中使用的某个数据改变后,视图也会自动更新。
上图为Vue文档对响应式的示意图,大体工作方式如下:
- 每个 Vue Component都有一个与之对应的Watcher实例。
- Vue 的 data 有
getter和setter属性; 3.当 Vue Componentrender函数被执行的时候,data会被touch,getter方法被调用,此时Vue 会去记录Vue Component所依赖的所有data,这一过程也叫依赖收集。 - 当
data被改动时,setter会被调用,此时,Vue 会通知所有依赖于此data的组件,调用render函数,更新视图。