内容均来自深入浅出vue.js 作为笔记使用

1 对象变化检测

  function detectChange(obj,key,val){                                                                 
   Object.defineProperty(obj,key,function(){
     enumerable:true,
     configurable:true,
     get(){
       return val
     },
     set(newVal){
       if(val==newVal){
         return 
       }else{
       val = newVal
     }
   })
  }

2依赖收集

数据发生变化时，怎么通知使用它的地方
假设依赖收集为window.target
依赖收集的逻辑大概如下:

 export default class Dep {
      constructor() {
        this.subs = []
      }
      addSub(sub) {
        this.subs.push(sub)
      }
      removeSub(sub) {
        remove(this.subs, sub)
      }
      depend() {
        if (window.target) {
          this.addSub(window.target)
        }
      }
      notify() {
        const subs = this.subs.slice()
        for (let i = 0, l = subs.length; i < l; i++) {
          subs[i].update()
        }
      }
    }
    //  删除数组中某个值
    function remove(arr, item) {
      if (arr.length) {
        const index = arr.indexOf(item)
        if (index != -1) {
          return arr.splice(index, 1)
        }
      }
    }

之前对象监测改造一下

  function detectChange(obj,key,val){    
     let dep = new Dep()//新增
     Object.defineProperty(obj,key,function(){
       enumerable:true,
       configurable:true,
       get(){
           dep.depend()//新增
           return val
        },
       set(newVal){
         if(val==newVal){
           return 
         }else{
           val = newVal
           dep.notify()//新增
        }
     })
  }

3 依赖 window.target

它类似一个watcher 的角色，当有数据变化时，只需要通知它一个，再由它去通知其他地方 eg:

   vm.$watch('a.b.c',function(newVal,oldVal){
    //当data.a.b.c发生变化时会触发第二个参数中的函数。
   })