Vue的数据响应式原理

Vue的数据响应式原理

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

 Vue2的原理
      Vue2中利用Object.definProperty将对象中的每个属性添加对应的getter和setter方法。
      当数据改变时触发对应的监听者（监听者监听到了数据的改变），一旦监听到数据改变，
      则触发对应的render函数，将页面重新渲染

  <script>
    const data = {
      // msg: "Hello Vue"
    }


    let msg = "Hello Vue"
    Object.defineProperty(data, 'msg', {
      set (value) {
        msg = value
        // 值修改后，重新设置#app的内容
        document.querySelector('#app').innerText = value
      },
      get () {
        return msg
      }
    })


    document.querySelector('#app').innerText = data.msg


    // const _data = {
    //   msg: "Hello Vue"
    // }

    
  </script>

	在vue中属性响应是核心的代码就是对应的Observe构造函数，这个构造函数可以实现，将普通对象，
变成有getter和  setter的对象
	在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>