vue数据响应底层分析

vue双向数据绑定的原理主要通过数据劫持Object.defineProperty和发布订阅模式实现的，通过Object.defineProperty监听数据发生变化然后通知订阅者（watcher），订阅者触发响应的回调。

// 这是vue2.0的底层原理  es5的方法
      // Object.defineProperty这个方法可以对对象中的某一个数据进行监视
      // 如果想对整个对象都进行监听，对这个对象进行递归循环监视
      Object.defineProperty(data,'val',{
        get() {
          console.log('读val了')
        },
        set() {
          console.log('设置val了')
        }
      })
      // es5 object.defineProperty结合递归循环劫持整个对象
      observe(data)
      function defineReactive(data,key,val) {
        observe(val)
        Object.defineProperty(data,key,{
          get() {
            console.log('读data了')
            return val
          },
          set() {
            console.log('写data了')
          }
        })
      }
      function observe(data) {
        if(typeof data !== 'object') return
        for(key in data){
          defineReactive(data,key,data[key])
        }
      }

      // es6 出了一个新的方法 Proxy，因为有了这个东西，vue3.0底层采用的就是Proxy
      const newData = new Proxy(data,{
        get(){
          console.log('读数据了')
        },
        set(){
          console.log('写数据了')
        }
      })

总结而言：

vue数据响应式2.0主要通过Object.defineProperty数据劫持和发布订阅模式实现的，当然了，这是2.0，3.0马上也要发布了，因为es6有Proxy代理对象，所以vue3.0的数据劫持也全面采用Proxy方法。