Vue3 源码剖析：Refs & Computed 深度解析

前端

2023-11-26 06:11:05

Refs & Computed 在 Vue3 中的意义

在 Vue3 中，Refs 和 Computed 都是用于管理和更新组件状态的关键概念。Refs（全称 Reactive References）用于创建可变的响应式引用，Computed 则用于计算并返回派生的响应式值。

Refs 的原理与实现

Refs 实际上是一种响应式对象，它包含一个内部值和一个 setter/getter 函数。当内部值发生变化时，Refs 会触发视图更新。Vue3 中 Refs 的实现主要基于 Proxy，它允许在对象访问和修改时拦截和修改行为。

Computed 的原理与实现

Computed 是一个函数，用于计算并返回派生的响应式值。当 Computed 所依赖的数据发生变化时，Computed 会重新计算并更新其返回的值。Vue3 中 Computed 的实现主要基于 getter 函数和依赖收集。

实例详解：Refs 与 Computed 的应用

为了加深对 Refs 和 Computed 的理解，让我们举一个实际的例子。假设我们有一个计数器组件，当用户点击按钮时，计数器会增加。

<template>
  <button @click="increment">+</button>
  <p>{{ count }}</p>
</template>

<script>
export default {
  setup() {
    // 使用 Refs 创建可变引用
    const count = ref(0);

    // 使用 Computed 计算派生值
    const doubleCount = computed(() => count.value * 2);

    // 监听 Computed 值的变化
    watch(doubleCount, (newValue) => {
      console.log(`Double count is now: ${newValue}`);
    });

    // 方法：增加计数
    const increment = () => {
      count.value++;
    };

    return {
      count,
      doubleCount,
      increment
    };
  }
};
</script>