Vue源码解析

作者：Seeker小颜

组织：SeekerCode

官网：http://seekercode.cn/

QQ群：917722581

阅读说明手册：

1.关于显示控制台代码
">"右侧代表输入内容
   次行开始输出

>input something
 print something

2.待扩展...

变化侦测篇

数据驱动图：数据变化引起的视图变化

三大前端框架：

• Angular：通过脏值检查流程来实现变化侦测

• React：通过对比虚拟Dom来实现变化侦测

• Vue：

  • Object的变化侦测

    利用 Object.defineProperty() 方法，如下所示：

    let car = {}
    let val = 3000
    Object.defineProperty(car, 'price', {
      enumerable: true,// 开启枚举属性
      configurable: true,// 该属性的描述符才能够被改变，同时该属性也能从对应的对象上被删除。
      get(){
        console.log('price属性被读取了')
        return val
      },
      set(newVal){
        console.log('price属性被修改了')
        val = newVal
      }
    })
    
    // 在控制台操作得到以下结果
    >car.price
     price属性被读取了
     3000
    >car.price = 5000
     price属性被修改了
     5000
    

    Vuejs 源码：

    // 源码位置：src/core/observer/index.js
    /**
     * 使一个对象转化成可观测对象
     * @param { Object } obj 对象
     * @param { String } key 对象的key
     * @param { Any } val 对象的某个key的值
     */
    function defineReactive (obj,key,val) {
      // 如果只传了obj和key，那么val = obj[key]
      if (arguments.length === 2) {
        val = obj[key]
      }
      if(typeof val === 'object'){
          new Observer(val)
      }
      Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get(){
          console.log(`${key}属性被读取了`);
          return val;
        },
        set(newVal){
          if(val === newVal){
              return
          }
          console.log(`${key}属性被修改了`);
          val = newVal;
        }
      })
    }
    

  • Arrary的变化侦测