手动实现一下vue的基本原理

刚刚看了一些源码有感，所以来挑战一下自己, 我们都知道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 // 视图更新啦

好啦，完美解决~