[Vue 3] 为什么需要同时使用Ref和Reactive

微信搜索【大迁世界】, 我会第一时间和你分享前端行业趋势，学习途径等等。本文 GitHub github.com/qq449245884... 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

在使用 Options API 工作时声明响应性数据是直截了当的。data 选项内的所有内容都会自动变为响应性，并在模板中可用。唯一需要注意的是，要将data设为一个函数，以防止在所有组件实例之间共享状态。

让我们讨论一下Vue 3中发生了什么变化，以及为什么我们需要两个不同的助手。

Vue 2中的响应性

data 组件选项内的每个属性都将通过 Object.defineProperty 转换为getter/setter。这些getter/setter对我们来说是看不见的，但在底层，它们使Vue在访问或修改属性时能够执行依赖跟踪。

每个组件都有一个关联的观察者，用于跟踪在组件的渲染周期中使用的属性。如果依赖项更新，观察者会通知组件，然后触发重新渲染。

Vue 3中的响应性

在 Vue 3 中，一切都发生了变化。核心部分从零开始重写，现在由Javascript Proxies提供响应性。Proxies是一种现代且优雅的方式来观察一个对象并在其属性被访问或更新时得到通知。

可以通过以下简单的例子来理解代理是如何工作的：

vbnet 复制代码

const userInfo = {
  firstName: "fotis",
  age: 35,
};

const handler = {
  get(target, property) {
    if (property === "firstName") {
      const name = target[property]
      return name.charAt(0).toUpperCase() + name.slice(1);
    }
    if (property === "age") {
      return '--'
    }
    return target[property]
  },
};

const proxy = new Proxy(userInfo, handler);

console.log(proxy.firstName) // "Fotis"
console.log(proxy.age) // "--"

处理器内部的get方法被称为陷阱，每次访问对象的属性时都会被调用。以类似的方式，可以定义一个设定的陷阱：

javascript 复制代码

const userInfo = {
  firstName: "Fotis",
  age: 35,
};

const handler = {
  set(target, prop, value) {
    if (prop === "age") {
      if (!Number.isInteger(value)) {
        throw new TypeError("The age is not an integer");
      }
      if (value > 200) {
        throw new RangeError("The age seems invalid");
      }
    }
    target[prop] = value;
    return true;
  },
};

const proxy = new Proxy(userInfo, handler);

proxy.age = 12 // OK
proxy.age = 300 // Error: The age seems invalid

这正是 Vue 3 响应性背后的理念。当使用 reactive 助手声明一个变量时，会使用一个 proxy. 来跟踪任何变化。

scss 复制代码

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      track(target, key)
      return target[key]
    },
    set(target, key, value) {
      target[key] = value
      trigger(target, key)
    }
  })
}

当然，响应式助手的实际实现更为复杂，能处理边缘情况，但其核心仍然使用proxy。

以上的片段解释了为什么将响应性变量解构或重新分配给本地变量后，它就不再具有反应性，因为它不再触发源对象上的 get/set proxy 陷阱。

这看起来像是一个完美的解决方案，可以使所有事物都变成响应式。但是有个问题！根据定义，proxy只适用于复杂类型。这些包括对象、数组、映射和集合。要使一个原始类型变得反应灵敏，我们仍然需要使用代理，但首先我们必须将其包装在一个对象中。

csharp 复制代码

function ref(value) {
  const refObject = {
    get value() {
      track(refObject, 'value')
      return value
    },
    set value(newValue) {
      value = newValue
      trigger(refObject, 'value')
    }
  }
  return refObject
}

这解释了为什么必须在 script setup 中使用烦人的 .value 。而且，再次重构或重新分配给本地变量也是行不通的。

总结

那么，为什么需要 Ref 和 Reactive的答案是：Proxy。对于复杂类型，它们可以直接使用，但对于原始类型，需要创建一个代理对象。

希望，理解Vue的内部工作原理可以使你更有效，并且可以消除 ref 和 reactive 之间的任何混淆。

交流

有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub github.com/qq449245884... 已收录，有一线大厂面试完整考点、资料以及我的系列文章。