普通属性 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 框架的核心优势。只有在明确不需要响应式的情况下，才使用普通属性。