vue shallowref

作者：发光男神发布日期:2026-07-26 浏览:109

import { shallowRef, triggerRef } from 'vue';

// 创建一个浅层响应式的引用
const shallowObject = shallowRef({ count: 0 });

// 修改对象的属性不会触发视图更新
shallowObject.value.count = 1;
// 视图不会更新，因为这是浅层响应式

// 如果需要触发视图更新，可以使用 triggerRef
triggerRef(shallowObject);
// 视图会更新，因为 triggerRef 强制触发了更新

// 替换整个对象会触发视图更新
shallowObject.value = { count: 2 };
// 视图会更新，因为这是替换整个对象，而不是修改其内部属性

console.log(shallowObject.value.count); // 输出: 2

解释说明：

shallowRef 创建的是一个浅层响应式的引用，这意味着它只会监听对整个对象的替换，而不会监听对象内部属性的变化。
当你修改 shallowRef 的值时（例如替换整个对象），Vue 会检测到变化并触发视图更新。
如果你只想修改对象的某个属性而不触发视图更新，可以使用 shallowRef。如果你希望在修改属性时也触发更新，可以使用 triggerRef 来手动触发更新。

上一篇：vue3 lodash

下一篇：vue 语法