Vue 核心之数据劫持，web前端开发现状

通过上面对Object.defineProperty的介绍，我们不难发现，当我们访问或设置对象的属性的时候，都会触发相对应的函数，然后在这个函数里返回或设置属性的值。既然如此，我们当然可以在触发函数的时候动一些手脚做点我们自己想做的事情，这也就是“劫持”操作。

在Vue中其实就是通过Object.defineProperty来劫持对象属性的setter和getter操作，并“种下”一个监听器，当数据发生变化的时候发出通知。先简单的举个例子：

var data = {

name:‘lhl’

}

Object.keys(data).forEach(function(key){

Object.defineProperty(data,key,{

enumerable:true, // 是否能在for…in循环中遍历出来或在Object.keys中列举出来。

configurable:true, // false，不可修改、删除目标属性或修改属性性以下特性

get:function(){

console.log(‘get’);

},

set:function(){

console.log(‘监听到数据发生了变化’);

}

})

})；

data.name //控制台会打印出 “get”

data.name = ‘hxx’ //控制台会打印出 “监听到数据发生了变化”

上面的这个例子可以看出，我们完全可以控制对象属性的设置和读取。

在Vue中，作者在很多地方都非常巧妙的运用了Object.defineProperty这个方法。

vue原理：

1.监听对象属性的变化

这个应该是Vue敲开数据绑定的前大门，它通过observe(观察)每个对象的属性，添加到订阅器dep中，当数据发生变化的时候发出一个notice（预告）。 相关源代码如下：（作者采用的是ES6+flow写的，代码在src/core/observer/index.js模块里面）。

export function defineReactive (

obj: Object,

key: string,

val: any,

customSetter?: Function

) {

const dep =