vue 使用 使用triggerRef手动触发更新

<template>
  <div class="demo-container">
    <h3>triggerRef 示例</h3>
    <div class="data-display">
      <p>当前数据: {{ userInfo }}</p>
      <p>用户名: {{ userInfo.name }}</p>
      <p>年龄: {{ userInfo.age }}</p>
    </div>
    
    <div class="button-group">
      <button @click="modifyInnerProps">修改内部属性（不触发更新）</button>
      <button @click="modifyAndTrigger">修改内部属性 + 手动触发更新</button>
      <button @click="replaceWholeObject">替换整个对象（自动触发）</button>
    </div>
  </div>
</template>

<script setup>
import { shallowRef, triggerRef } from 'vue'

// 创建浅层响应式对象
const userInfo = shallowRef({
  name: '张三',
  age: 25,
  address: '北京'
})

// 仅修改内部属性 - 不会触发视图更新
const modifyInnerProps = () => {
  userInfo.value.age++
  userInfo.value.address = '上海'
  console.log('已修改内部属性，但视图未更新')
}

// 修改内部属性后，用triggerRef手动触发更新
const modifyAndTrigger = () => {
  userInfo.value.age++
  userInfo.value.name = '李四'
  triggerRef(userInfo) // 强制触发响应式更新
  console.log('已修改内部属性并手动触发，视图将更新')
}

// 替换整个.value - 会自动触发更新（无需triggerRef）
const replaceWholeObject = () => {
  userInfo.value = {
    ...userInfo.value,
    name: '王五',
    age: 30
  }
  console.log('已替换整个对象，视图自动更新')
}
</script>

<style scoped>
.demo-container {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.data-display {
  margin: 20px 0;
  padding: 15px;
  background-color: #f9fafb;
  border-radius: 4px;
}

.button-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #3b82f6;
  color: white;
  cursor: pointer;
  transition: background-color 0.2s;
}

button:hover {
  background-color: #2563eb;
}
</style>