vue响应式原理

vue.js采用的是数据劫持结合发布和-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter,getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

 

 

 

Vue 的响应式原理是核心是通过 ES5 的保护对象的 Object.defindeProperty 中的访问器属性中的 get 和 set 方法，data 中声明的属性都被添加了访问器属性，当读取 data 中的数据时自动调用 get 方法，当修改 data 中的数据时，自动调用 set 方法，检测到数据的变化，会通知观察者 Wacher，观察者 Wacher自动触发重新render 当前组件（子组件不会重新渲染）,生成新的虚拟 DOM 树，Vue 框架会遍历并对比新虚拟 DOM 树和旧虚拟 DOM 树中每个节点的差别，并记录下来，最后，加载操作，将所有记录的不同点，局部修改到真实 DOM 树上。

 

数据劫持

<script>
    let obj = {
        name: 'zs'
    }
    // 数据劫持的核心属性
    Object.defineProperty(obj, 'name', {
        enumerable: true,
        configurable: true,
        get() {
            // 每次获取对象的这个属性的时候，就会被这个get方法给劫持到
            console.log('get执行了')
        },
        // 每次设置这个对象的属性的时候，就会被set方法劫持到
        // 设置的值也会劫持到
        set(newValue) {
            console.log('set方法执行了');
            console.log(newValue)

        }
    })
obj.name = "111"
	
//输出
//set方法执行了
//111	
</script>

　　

 

响应式原理代码实现请看这里→实现Vue响应式原理