Vue的数据响应式原理 (Vue2的原理)

Vue的数据响应式原理 (Vue2的原理)

通过相关的方法，实现当数据改变时可以触发一个函数（实现数据改变的监听效果）

在vue里实现了一个Observe的构造函数，可以利用该函数，把普通对象中的属性添加getter和setter方法，其中核心的属性就是Object.definProperty。一旦数据改变时，则会触发对应的setter函数，setter函数触发就会告知对应的监听器，监听器监听到之后，触发render函数，重新渲染页面

<script>
    function Observer (data) {
      this.data = data
      this.init()
    }

    // 创建一个方法init
    Observer.prototype.init = function () {
      // 获取到data
      let data = this.data

      // 获取data中所有的key并且进行遍历
      Object.keys(data).forEach(key => {
        // data 是对象 key是属性 data[key]是值
        this.defineReactive(data, key, data[key])
      })
    }

    Observer.prototype.defineReactive = function (obj, key, value) {
      if (typeof value === 'object') {
        new Observer(value)
      }
      // 调用Object.definProperty
      Object.defineProperty(obj, key, {
        get () {
          return value
        }, 

        set (newValue) {
          // 如果设置后的值相同，则不需要进行操作
          if (value === newValue) {
            return 
          }

          if (typeof newValue === 'object') {
             
            value = new Observer(newValue).data

          } else {
            value = newValue
          }



        }
      })
    }


    const data = {
      msg: "Hello Vue",
      num: 1,
      obj: {
        a: 1,
        b: 2,
        c: {
          a: 1
        }
      }
    }


    const _data = new Observer(data).data

    
  </script>