在 Vue 3 中，除了 `markRaw` 和 `reactive` 结合，还有其他方式手动更新虚拟 DOM 吗？

在 Vue 3 中，除了 markRaw 和 reactive 结合的方式，还有以下几种常见的手动更新虚拟 DOM 的方式：

1. 使用 triggerRef（针对 ref 创建的数据）

ref 是 Vue 3 中创建响应式数据的一种方式，当手动修改 ref 的 .value 属性后，默认情况下不会立即触发更新。可以使用 triggerRef 函数来手动触发更新。

<template>
  <div>
    <p>{
  { count }}</p>
    <button @click="incrementManually">手动增加计数</button>
  </div>
</template>

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

const count = ref(0);

const incrementManually = () => {
    // 手动修改 ref 的值
    count.value++;
    // 手动触发更新
    triggerRef(count);
};
</script>

        

          
        
        
        

          

          AI 代码解读
        
      
      

2. 使用 nextTick

nextTick 用于在下次 DOM 更新循环结束之后执行延迟回调。虽然它本身不是直接手动更新虚拟 DOM，但可以结合数据修改来确保在数据更新后，DOM 已经更新完毕时执行某些操作，也可以变相实现手动控制更新流程的效果。

<template>
  <div>
    <p>{
  { message }}</p>
    <button @click="updateMessage">更新消息</button>
  </div>
</template>

<script setup>
import { ref, nextTick } from 'vue';

const message = ref('初始消息');

const updateMessage = async () => {
    // 修改数据
    message.value = '新消息';
    // 等待 DOM 更新完成
    await nextTick();
    // 此时 DOM 已经更新，可以进行后续操作
    console.log('DOM 已更新');
};
</script>

        

          
        
        
        

          

          AI 代码解读
        
      
      

3. 强制组件重新渲染

可以通过改变组件的 key 属性来强制组件重新渲染，从而达到手动更新虚拟 DOM 的目的。当 key 值发生变化时，Vue 会认为这是一个全新的组件实例，会重新创建并渲染该组件。

<template>
  <div>
    <MyComponent :key="componentKey" />
    <button @click="forceRerender">强制重新渲染</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import MyComponent from './MyComponent.vue';

const componentKey = ref(1);

const forceRerender = () => {
    // 改变 key 值，强制组件重新渲染
    componentKey.value++;
};
</script>

        

          
        
        
        

          

          AI 代码解读
        
      
      

4. 使用 shallowRef 和 triggerRef

shallowRef 创建的是一个浅层响应式引用，只有 .value 属性本身是响应式的，而 .value 指向的对象内部的属性变化不会触发更新。可以结合 triggerRef 手动触发更新。

<template>
  <div>
    <p>{
  { person.name }}</p>
    <button @click="updateName">更新姓名</button>
  </div>
</template>

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

const person = shallowRef({ name: '张三' });

const updateName = () => {
    // 手动修改对象属性
    person.value.name = '李四';
    // 手动触发更新
    triggerRef(person);
};
</script>

        

          
        
        
        

          

          AI 代码解读
        
      
      

这些方法在不同的场景下有各自的用途，开发者可以根据具体需求选择合适的方式来手动更新虚拟 DOM。