刚刚看了一些源码有感，所以来挑战一下自己, 我们都知道vue2.x原理就是Object.defineProperty(),这个方法的官方描述就是方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象，这个方法接受三个参数，一个是你传入的对象，一个是key，一个是对象的描述。关键就在于对象的描述
对象的描述也是一个对象，你可以把它当成对当前这个对象的包装操作一样，它也包含了几个重要属性，这里就讲四个用到的，
configurable
当且仅当该属性的 configurable 键值为 true 时，该属性的描述符才能够被改变，同时该属性也能从对应的对象上被删除。
默认为 false
enumerable
当且仅当该属性的 enumerable 键值为 true 时，该属性才会出现在对象的枚举属性中。
默认为 false
get
属性的 getter 函数，如果没有 getter，则为 undefined。当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入 this 对象（由于继承关系，这里的this并不一定是定义该属性的对象）。该函数的返回值会被用作属性的值。
默认为undefined
set
属性的 setter 函数，如果没有 setter，则为 undefined。当属性值被修改时，会调用此函数。该方法接受一个参数（也就是被赋予的新值），会传入赋值时的 this 对象。
默认为 undefined
了解了上面四个属性 我们就可以来挑战写一下vue的基本原理了
function ob(val) {
console.log('视图更新了')；
}
function definePropertys(obj, key, value) {
Object.defineProperty(obj, key, {
configurable: true,
enumerable: true,
get: function() {
console.log('我被调用了')
return value
},
set: function(nVal) {
if(nVal === value) return
ob(nVal)
}
})
}
function observa(obj) {
Object.keys(obj).forEach(row => {
definePropertys(obj, row, obj[row])
})
}
class Vue {
constructor(options) {
this.data = options.data
observa(this.data)
}
}
let ob = new Vue({
data: {
test: 1
}
})
ob.data.test = 3 // 视图更新啦
好啦，完美解决~
网友评论