Vue3 内置属性（完整教程）

Vue3 内置属性初探：让组件更高效、更简洁

在学习 Vue 3 的过程中，你可能会发现，除了熟悉的 data、methods 之外，还有许多“隐藏”的属性和特性，它们被称为 Vue 3 内置属性。这些属性并不需要你手动引入或配置，而是 Vue 框架在底层自动为你准备好的“工具箱”。它们像是一套默认的助手，帮助你在编写组件时减少重复代码、提升开发效率。

比如，ref 和 reactive 虽然常被当作响应式 API 使用，但它们本身也属于 Vue 3 内置属性的一部分。而更深层的如 defineProps、defineEmits、setup 函数中的 context 参数，其实也是 Vue 3 内置属性的体现。

今天，我们就来深入聊聊这些常被忽略但极为实用的 Vue 3 内置属性，从基础到进阶，带你一步步掌握它们的用法与精髓。

常见的 Vue3 内置属性概览

Vue 3 内置属性指的是在组件中无需额外声明即可直接使用的特殊变量或函数，它们由 Vue 框架自动注入，主要服务于组合式 API（Composition API）的运行环境。

这些属性不是你自己定义的，也不是通过 import 引入的，而是在 setup() 函数或 <script setup> 语法糖中“自然存在”的。你只需要知道它们的存在，并合理使用即可。

这些属性并非全部都“显式”暴露在全局作用域，但在 <script setup> 中，它们会被 Vue 自动解析并注入，让你可以像使用普通变量一样调用。

ref：处理基本数据类型的响应式

ref 是 Vue 3 中最基础也是最常用的内置属性之一。它用于包装一个值，使其具备响应式能力。无论你传入的是字符串、数字、布尔值，ref 都能将其变成响应式引用。

想象一下，ref 就像一个“魔法盒子”，你把一个值放进去，盒子会自动帮你监控这个值的变化，并在变化时通知视图更新。

import { ref } from 'vue'

// 创建一个响应式字符串
const message = ref('Hello Vue 3')

// 修改值
message.value = 'Welcome to Composition API'

// 在模板中使用时，无需 .value，Vue 会自动解包
// {{ message }}

注释：ref 返回的是一个包含 value 属性的对象。在模板中使用时，Vue 会自动进行解包，所以可以直接写 message，而不需要 message.value。但在 JavaScript 代码中，必须通过 .value 访问原始值。

当你需要响应式地管理一个数字计数器时，ref 就非常合适：

const count = ref(0)

function increment() {
  count.value += 1  // 必须通过 .value 修改
}

// 你可以绑定到按钮点击事件
// <button @click="increment">点击 +1</button>

ref 的优势在于简单直接，特别适合处理单个值。但如果你要管理的是一个对象或数组，建议使用 reactive。

reactive：管理复杂对象的响应式

当你的数据结构变得复杂，比如包含多个属性的对象或嵌套的数组时，reactive 就派上用场了。

reactive 会将一个普通对象转换为响应式对象，所有属性都会自动具备响应式能力。

import { reactive } from 'vue'

// 定义一个用户对象
const user = reactive({
  name: '张三',
  age: 25,
  hobbies: ['读书', '编程', '跑步']
})

// 修改属性会触发视图更新
user.name = '李四'
user.hobbies.push('游泳')

// 模板中直接使用 user.name 或 user.hobbies

注释：reactive 仅对对象有效，不能用于基本类型（如 number、string）。如果你尝试对 ref 包裹的值使用 reactive，会报错。此外，reactive 是“深层响应式”，即嵌套对象的属性变化也能被监听。

注意：reactive 不支持 ref 的 .value 语法，你必须直接操作属性。

// ❌ 错误用法
// user.value.name = '王五'

// ✅ 正确用法
user.name = '王五'

reactive 和 ref 本质上是互补的：ref 适合单值，reactive 适合复杂结构。在实际项目中，你可以根据数据类型灵活选择。

defineProps 与 defineEmits：组件通信的“契约”

在 Vue 3 中，组件通信的规范性大大提升。defineProps 和 defineEmits 就是这一提升的代表。

它们让你在组件中明确声明“我接受什么参数”和“我能发出什么事件”，这不仅提升了可读性，也增强了类型检查能力（配合 TypeScript 更佳）。

defineProps：接收父组件传参

// ChildComponent.vue
<script setup>
// 声明接收的 props
const props = defineProps({
  title: String,
  count: {
    type: Number,
    default: 0
  }
})

// 现在可以在模板中使用 props.title 和 props.count
</script>

<template>
  <div>
    <h2>{{ title }}</h2>
    <p>当前计数：{{ count }}</p>
  </div>
</template>

注释：defineProps 接收一个对象，描述你期望接收的 props，支持类型校验和默认值。在 <script setup> 中，它会自动返回一个对象，你可以直接解构使用。

defineEmits：触发自定义事件

<script setup>
const emit = defineEmits(['update', 'delete'])

function handleClick() {
  emit('update', '新的标题')
  emit('delete', 123)
}
</script>

<template>
  <button @click="handleClick">触发事件</button>
</template>

注释：defineEmits 接收一个事件名称数组，调用 emit 函数时，第一个参数是事件名，后续参数是传递的数据。父组件可以通过 @update、@delete 来监听这些事件。

通过 defineProps 和 defineEmits，你不再需要在 props 和 emits 选项中写一堆字符串，代码更简洁，意图更清晰。

context：获取组件上下文信息

在某些高级场景中，你可能需要获取组件的上下文信息，比如访问 slots、attrs、expose 等。这时，context 就是你的“万能钥匙”。

<script setup>
// 接收 context 参数
const { slots, attrs, expose } = defineContext()

// 使用 slots 获取插槽内容
const slotContent = slots.default?.()

// 使用 attrs 获取未声明的属性
console.log(attrs.id)  // 如果父组件传了 id，这里就能拿到

// 使用 expose 暴露方法给父组件
expose({
  reset() {
    console.log('重置组件')
  }
})
</script>

注释：defineContext 是 setup 函数中可用的内置函数，它返回包含 slots、attrs、expose 等属性的对象。slots 用于访问插槽内容，attrs 用于访问未被 props 接收的属性，expose 用于暴露方法。

虽然在日常开发中不常使用，但在构建可复用的组件库时，context 能发挥重要作用。

watch 与 computed：响应式逻辑的“大脑”

除了 ref 和 reactive，watch 和 computed 也是 Vue 3 内置属性的重要成员，它们负责处理响应式逻辑。

watch：监听数据变化

import { ref, watch } from 'vue'

const count = ref(0)

// 监听 count 的变化
watch(count, (newVal, oldVal) => {
  console.log(`从 ${oldVal} 变为 ${newVal}`)
})

// 也可以监听对象
const user = reactive({ name: '小明', age: 18 })

watch(
  () => user.age,
  (newAge) => {
    console.log(`年龄更新为：${newAge}`)
  }
)

注释：watch 第一个参数是监听源（可以是函数或响应式变量），第二个是回调函数。它在数据变化时触发，适合执行副作用逻辑，如 API 调用、状态同步等。

computed：创建计算属性

import { ref, computed } from 'vue'

const firstName = ref('李')
const lastName = ref('四')

// 创建一个计算属性
const fullName = computed(() => {
  return firstName.value + lastName.value
})

// 在模板中使用 fullName，自动更新
// {{ fullName }}

注释：computed 返回一个只读的响应式引用。它的值会根据依赖项自动重新计算，适合处理复杂的逻辑表达式，避免重复计算。

总结：Vue3 内置属性让你开发更高效

Vue 3 内置属性是组合式 API 的核心组成部分，它们让组件开发更加模块化、可读性更强。从 ref 到 reactive，从 defineProps 到 watch，每一个属性都在为你的开发减负。

掌握这些属性，不仅能让你写出更简洁的代码，还能提升组件的可维护性和复用性。无论你是初学者还是中级开发者，理解并熟练使用这些 Vue 3 内置属性，都是迈向进阶的重要一步。

记住：它们不是“额外的工具”，而是 Vue 3 为你准备的“默认装备”。善用它们，你的开发效率将显著提升。