普通属性 vs ref 包装属性

看个例子：

<template><div><h3>普通属性</h3><p>计数: {{ normalCount }}</p><button @click="incrementNormal">+1</button><h3>ref 属性</h3><p>计数: {{ refCount }}</p><button @click="incrementRef">+1</button><h3>响应式差异</h3><p v-if="showNormal">普通属性更新: {{ normalUpdate }}</p><p v-if="showRef">ref 属性更新: {{ refUpdate }}</p><button @click="testReactivity">测试响应式</button></div>
</template><script setup>
import { ref, onMounted, watchEffect } from 'vue';// 普通属性
let normalCount = 0;
let normalUpdate = '未更新';// ref 属性
const refCount = ref(0);
const refUpdate = ref('未更新');// 显示更新结果的标志
const showNormal = ref(false);
const showRef = ref(false);// 普通属性更新函数
const incrementNormal = () => {normalCount++;console.log('普通属性计数:', normalCount);
};// ref 属性更新函数
const incrementRef = () => {refCount.value++;console.log('ref 属性计数:', refCount.value);
};// 测试响应式差异
const testReactivity = () => {// 直接修改普通属性normalCount = 10;normalUpdate = '已更新';showNormal.value = true;// 修改 ref 属性refCount.value = 10;refUpdate.value = '已更新';showRef.value = true;
};// 监听 refCount 变化
watchEffect(() => {console.log('refCount 变化为:', refCount.value);
});// 模拟组件挂载后的操作
onMounted(() => {console.log('组件已挂载');
});
</script>

1. 响应式机制

• 普通属性：没有响应式能力
• ref 属性：具有响应式能力，值变化时会触发依赖更新

2. 访问方式

• 普通属性：直接访问，如 this.count
• ref 属性：在 JavaScript 中需要通过 .value 访问，如 count.value；在模板中可以直接访问

3. 使用场景

• 普通属性：适用于不需要响应式的简单数据
• ref 属性：适用于需要响应式的状态、计算属性返回值、组件间通信等

生活化比喻

想象你在管理一个仓库：

普通属性

• 相当于：仓库里的静态库存记录
  • 只记录当前状态，不会自动更新
  • 如果你修改了实际库存，记录不会同步变化
  • 需要手动更新记录

ref 属性

• 相当于：仓库的电子库存系统
  • 实时跟踪库存变化
  • 当实际库存变化时，系统会自动更新显示
  • 可以设置触发器，当库存低于阈值时自动提醒

在 Vue 3 的组合式 API 中，大多数情况下应该优先使用 ref 属性，因为它们提供了响应式能力，这是 Vue 框架的核心优势。只有在明确不需要响应式的情况下，才使用普通属性。