vue3 新特性$ref,$computed，$的本质，源码解析

一、背景与问题

在 Vue3 的开发中，开发者经常遇到响应式数据处理的场景，例如需要将 DOM 元素包装成响应式对象，或者需要创建依赖于其他响应式数据的计算属性。传统 Vue2 中通过 this.$refs 和 this.$computed 实现的功能，在 Vue3 中被重新设计为 ref 和 computed。然而，这些新特性的底层实现原理、使用边界以及性能影响，都是开发者需要深入理解的。

在实际开发中，常见的错误包括：

• 忘记将 ref 包裹的值作为响应式对象
• 在计算属性中错误地使用非响应式变量
• 在频繁更新的场景中使用 computed 导致性能问题

本文将深入解析 Vue3 的 ref、computed 以及 $ 的本质，结合源码分析其工作原理，并通过完整案例展示其应用场景。

二、基本原理

1. 响应式系统的底层机制

Vue3 的响应式系统基于 Proxy 实现，通过 Reflect API 拦截对象的属性访问和修改。ref 和 computed 是 Vue3 响应式系统的核心构建块。

• ref 是一个响应式包装器，它将普通值转换为响应式对象。
• computed 是基于依赖的响应式计算属性，内部通过 Effect 系统追踪依赖关系。

2. $ 的本质

在 Vue3 中，$ 并非原生的 API，而是对组件实例的扩展。例如，this.$refs 和 this.$computed 在 Vue3 中被重构为 ref 和 computed。实际开发中，开发者应直接使用 ref 和 computed，而不是依赖 $ 前缀的 API。

三、环境准备

确保开发环境满足以下条件：

npm install -g vue
npm install -g @vue/cli

创建 Vue3 项目：

vue create vue3-ref-computed-demo
cd vue3-ref-computed-demo
npm install

在 src/ 目录下创建 utils.js 文件用于源码解析。

四、核心实现

1. ref 的使用

示例 1：基本使用

// src/App.vue
<template>
  <div>
    <p>输入内容: {{ inputValue }}</p>
    <input v-model="inputValue" />
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const inputValue = ref('')

    return {
      inputValue
    }
  }
}
</script>

关键代码解析：

• ref('') 创建一个响应式对象，内部通过 Proxy 包装值。
• v-model 直接绑定 inputValue，触发响应式更新。

错误示例：未包裹非响应式值

// 错误代码
const inputValue = 'Hello' // 非响应式

问题： inputValue 不会触发视图更新。

改进： 使用 ref 包裹值。

2. computed 的使用

示例 2：计算属性依赖数组

// src/App.vue
<template>
  <div>
    <p>计算结果: {{ computedValue }}</p>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  setup() {
    const inputValue = ref('')

    const computedValue = computed(() => {
      return inputValue.value.toUpperCase()
    })

    return {
      computedValue
    }
  }
}
</script>

关键代码解析：

• computed 内部通过 Effect 系统追踪依赖，当 inputValue 变化时，computedValue 会自动更新。

错误示例：在计算属性中使用非响应式变量

const staticValue = 'Hello'
const computedValue = computed(() => {
  return staticValue + inputValue.value // 静态值 + 响应式值
})

问题： staticValue 不会触发重新计算。

改进： 将 staticValue 转换为响应式值。

3. $ 的底层实现（源码解析）

在 Vue3 的源码中，ref 和 computed 的实现基于 Proxy 和 Effect 系统。以 ref 为例：

// node_modules/vue/dist/vue.runtime.esm.js
function ref(value) {
  const _ref = {
    value
  }
  return _ref
}

关键点：

• ref 返回一个对象，内部通过 Proxy 包装值。
• Proxy 拦截 get 和 set 操作，触发依赖收集和更新。

五、完整案例

1. 表单验证案例

需求：实现一个表单验证组件，使用 ref 和 computed 处理输入验证。

// src/ValidationForm.vue
<template>
  <div>
    <label for="username">用户名:</label>
    <input id="username" v-model="username" />
    <p v-if="isInvalid">用户名必须为 6-20 位</p>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  setup() {
    const username = ref('')
    const isInvalid = computed(() => {
      return username.value.length < 6 || username.value.length > 20
    })

    return {
      username,
      isInvalid
    }
  }
}
</script>

关键点：

• isInvalid 计算属性根据 username 的值自动更新。
• 若 username 长度不合法，显示错误提示。

六、源码解析

1. ref 的源码实现

// node_modules/vue/dist/vue.runtime.esm.js
function ref(value) {
  const _ref = {
    value
  }
  return _ref
}

扩展实现：

function ref(value) {
  const _ref = {
    value,
    __v_isRef: true
  }
  return _ref
}

关键点：

• __v_isRef 标记为响应式对象。
• Proxy 拦截访问 value 属性。

2. computed 的源码实现

function computed(fn) {
  const _computed = {
    __v_isComputed: true
  }
  return _computed
}

扩展实现：

function computed(fn) {
  const _computed = {
    __v_isComputed: true,
    _fn: fn,
    _value: undefined
  }

  return _computed
}

关键点：

• computed 通过 Effect 系统追踪依赖。
• 当依赖变化时，重新计算 _value。

七、进阶使用

1. 响应式对象的嵌套

const user = ref({
  name: 'Alice',
  age: 30
})

user.value.name = 'Bob' // 触发更新

关键点：

• Proxy 会递归处理嵌套对象。

2. 计算属性的缓存机制

const a = ref(1)
const b = ref(2)
const computedValue = computed(() => a.value + b.value)

console.log(computedValue.value) // 3
a.value = 2
console.log(computedValue.value) // 4

关键点：

• computed 会缓存结果，避免重复计算。

八、性能与工程实践

1. 性能优化

• 避免在 computed 中执行耗时操作：例如频繁调用 fetch 或复杂计算。
• 使用 watch 替代 computed：当需要执行副作用时，使用 watch。

watch(() => username.value, (newVal) => {
  console.log('用户名更新:', newVal)
})

2. 安全风险

• 避免直接操作 ref 的 value 属性：可能导致数据不一致。
• 输入验证：使用 ref 包裹的值时，需进行安全性校验。

九、常见问题与踩坑

1. 常见错误

2. 性能陷阱

• 频繁更新 computed：在高频更新场景中使用 computed 可能导致性能问题。
• 避免在 computed 中使用 setTimeout：会导致计算属性失效。

十、最佳实践

1. 推荐场景

• 使用 ref 包裹 DOM 元素或需要响应式的值。
• 使用 computed 处理复杂的计算逻辑，避免重复计算。
• 在表单验证、数据转换等场景中使用 ref 和 computed。

2. 不推荐场景

• 在频繁更新的场景中使用 computed。
• 在不需要响应式的行为中使用 ref，导致不必要的内存消耗。

十一、总结

Vue3 的 ref 和 computed 是响应式系统的核心，其底层基于 Proxy 和 Effect 系统实现。理解它们的原理和使用边界，是开发高性能 Vue3 应用的关键。通过合理使用 ref 和 computed，可以避免常见错误，提升代码可维护性。在实际开发中，需要根据具体场景选择合适的响应式方案，平衡性能与可读性。