Vue组件的数据驱动响应布局系统

Vue数据响应式机制解析

• 跟踪变动
  • 递归获取对象的所有属性信息
  • 对数组进行响应式处理
  • 汇总依赖关系

尚硅谷Vue数据响应式原理。
此处内容仅为结合视频与vue.js深入浅出所整理的笔记，若想系统学习，建议参考尚硅谷提供的vue源码讲解课程，反复聆听后便能逐渐理解其中要点。

变化追踪分析

在JavaScript语言中，存在两种途径可用于监测数据变化，分别是Object.defineProperty以及ES6引入的proxy机制，本文将重点阐述Object.defineProperty的实现方式。
该技术手段能够直接在目标对象上新增属性，并最终返回该对象本身。

为提升代码的可复用性与可维护性，此处选择采用函数封装的形式进行实现，而非直接调用原始方法。其主要原因是，在执行属性读取与值修改操作时，需要借助一个临时变量来存储变更后的数据值，具体实现方式可参考如下代码示例。

    var temp;
    Object.defineProperty(obj,'a',{
    	get() {
    		console.log('你试图访问obj的a属性');
    		return temp;