Vue3 响应式数据创建：ref、shallowRef 和 triggerRef 区别详解

在 Vue3 中，'ref'、'shallowRef' 和 'triggerRef' 都是用来创建响应式数据的函数。

• 'ref'：创建一个可响应的简单数据。它会将传入的值包装成一个响应式对象，并返回一个指向该对象的引用。当使用 'ref' 创建的响应式对象的值发生改变时，会自动触发重新渲染。

• 'shallowRef'：创建一个可响应的对象。与 'ref' 不同的是，'shallowRef' 不会递归地将对象的所有属性都转换为响应式对象。它只会将对象本身转换为响应式对象。这意味着当对象的属性发生改变时，不会触发重新渲染。

• 'triggerRef'：用于手动触发一个 'ref' 或 'shallowRef' 的重新渲染。它接收一个 'ref' 或 'shallowRef' 作为参数，并立即触发重新渲染。这在某些情况下很有用，例如在异步回调中改变 'ref' 的值后，手动触发重新渲染以更新界面。

总结来说，'ref' 用于创建可响应的简单数据，'shallowRef' 用于创建可响应的对象，'triggerRef' 用于手动触发重新渲染。