玩转Vue3之shallowRef和shallowReactive-Toy模板网

这篇具有很好参考价值的文章主要介绍了玩转Vue3之shallowRef和shallowReactive。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

Vue3 作为一款现代的 JavaScript 框架，引入了许多新的特性和改进，其中包括 shallowRef 和 shallowReactive。这两个功能在Vue 3中提供了更加灵活和高效的状态管理选项，尤其适用于大型和复杂的应用程序。

Vue 3 的响应式系统

Vue3 引入了新的响应式系统，与 Vue2相比，它具有更好的性能和更多的功能。这个新系统基于 Proxy，为开发者提供了更直观、灵活的API，其中包括ref、reactive、shallowRef和shallowReactive等。之前的文章写过有关响应式系统的解释，在本博客中，我们将深入探讨这两个API，并提供一些具体的例子，以便更好地理解它们的用法和优势。

1.shallowRef：浅层响应式引用

shallowRef 是一个创建响应式对象的函数，与 ref 不同之处在于，shallowRef 只会在对象的第一层进行响应式处理。这意味着当对象的深层属性发生变化时，不会触发视图更新，从而提高了性能。
让我们看一个例子：

import { shallowRef, watchEffect } from 'vue';

const user = shallowRef({
  name: 'John',
  address: {
    city: 'New York',
    zip: '10001'
  }
});

watchEffect(() => {
  console.log('User changed:', user.value);
});

// 修改深层属性，不会触发视图更新
user.value.address.city = 'San Francisco';

在上面的例子中，watchEffect 只会在 name 属性发生变化时触发，而不会在 address 的变化时触发。这有助于避免不必要的性能开销,这对于一些场景非常有用，例如在处理大型数据集合时，可以提高性能并减少不必要的更新。

2.shallowReactive：浅层响应式对象

与 shallowRef 类似，shallowReactive 用于创建一个浅层响应式的对象。这意味着只有对象的第一层属性会被响应化,这对于避免在深层次对象中进行递归响应式转换非常有用。

import { shallowReactive, watchEffect } from 'vue';

const user = shallowReactive({
  name: 'John',
  address: {
    city: 'New York',
    zip: '10001'
  }
});

watchEffect(() => {
  console.log('User changed:', user);
});

// 修改深层属性，不会触发视图更新
user.address.city = 'San Francisco';

在上述例子中，watchEffect 只在 name 属性变化时触发，而 address 属性的变化不会引起更新。