普通属性 vs ref 包装属性

最新推荐文章于 2025-12-22 19:02:04 发布

原创最新推荐文章于 2025-12-22 19:02:04 发布 · 302 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

看个例子：

<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>