MVVM的框架进阶与实现

Object.defineProperty()

Obejct.defineProperty() 方法会直接在一个对象上定义一个新属性, 或者修改一个对象的现有属性,
 并且找回这个对象

Object.defineProperty(obj, prop, descriptor)

obj: 需要定义属性的对象
prop: 需要定义的属性
descriptor: 属性的描述符
返回值: 返回的对象

在JS中对象具有两种属性, 分别是数据属性和访问器属性, 所以其描述符也根据熟悉分类,
分为数据描述和访问其描述类

在使用描述符时候, 必须是两种形式之一, 且两者不能同时使用

数据描述符

数据描述符可以是一个具有值的属性,该值可能是可写的, 也可能是不可写的



let temp = obj['name']

Object.defineProperty(obj, 'name', {
    configurable: true,  //表示属性可以设置
    enumerable:true, // 表示这个属性可以遍历

    get () {

        // 每次获取对象这个属性的时候, 就会被这个get 劫持到
      // console.log('你执行了get操作')
      // getter
      return temp  
    }

    set (newValue) {
        // 每次设置这个对象的属性的时候, 就会被set 方法劫持到
        // 设置的值也会劫持到
        //setter

        console.log('set方法执行了')
        console.log(newValue)

        temp = newValue

    }
})

Vue 实现思路 

    实现一个Compiler模板解析器, 能够对模板中的指令和差值表达式进行解析. 并且赋予不同的操作

     实现一个Observer 数据监听器, 能够对数据对象的所有属性进行监听

     实现一个Watcher 观察者, 将Compile 的解析结果, 与Observe所观察的对象 链接起来, 建立关系, 
     在Observer观察到对象数据变化时. 接收通知, 同时更新DOM

     创建一个公共的入口对象, 接收初始化的配置并且协调上面的三个模块, 也就是vue