vue3数据的响应式原理----学习

• 数据的响应式原理
  基本步骤
  • Proxy拦截值
  • 跟踪更改它的函数：我们在 Proxy 中的 getter 中执行此操作，称为 effect
  • 触发函数以便它可以更新最终值：我们在 Proxy 中的 setter 中进行该操作，名为 trigger
    深入原理
  • 把一个普通的 JavaScript 对象作为 data 选项传给应用或组件实例
  • vue会使用带有getter和setter的处理程序遍历其所有property并将其转换为Proxy(ie : Object.defineProperty。但是Proxy 版本更精简，同时提升了性能。)

  // 这是一个普通对象
      const target: {
          width: 200,
          background: 'white'
      }
  // 转换为proxy
      const handler = {
          get(target, prop, receiver {
              // 某些操作，拦截
              ...
              return Reflect.get(...arguments)
          }
      }
      const proxiedObj = new Proxy(target, handler)
  // 转换后的对象
      proxiedObj: {
          width: 200,
          background: 'white'
      }
  

  • 在proxy内，使用track()函数，改变值

       const handler = {
          get(target, prop, receiver) {
              // 某些操作，拦截
              track(target, prop)
              return Reflect.get(...arguments)
          }
      }
  

  • 当某些内容发生改变时，我们再设置新的值

  const handler = {
      get(target, prop, receiver) {
          track(target, prop)
          return Reflect.get(...arguments)
      },
      set(target, key, value, receiver) {
          // 触发更新
          trigger(target, key)
          return Reflect.set(...arguments)
      }
  }
  

  • 当访问嵌套对象时：

  const handler = {
      get(target, prop, receiver) {
          track(target, prop)
          const value = Reflect.get(...arguments)
          if (isObject(value)) {
              return reactive(value)
          } else {
              return value
          }
      }
      // ...
  }
  

  • 最后：每个组件都有一个相应的侦听器实例，该实例将在组件渲染期间把触碰的左右property记录为依赖项，之后当触发依赖项的setter时，就会通知侦听器，从而使得组件重新渲染
  • 问题：被代理对象和原始对象不相等（===）

  const obj = {}
  const wrapped = new Proxy(obj, handlers)
  
  console.log(obj === wrapped) // false
  

• Proxy： 是一个包含另一个对象或函数并允许你对其进行拦截的对象。直白的来说，他是一个对象，而且能够拦截及改变其他对象的值。

  // 用法
  new Proxy(target, handler)