深入了解 shallowRef 和 shallowReactive

在Vue 3中，shallowRef和shallowReactive是两个非常有用的方法，它们帮助我们在处理响应式数据时更加灵活和高效。本文将详细介绍shallowRef和shallowReactive的功能、用法和优势。

1. shallowRef

1.1 功能和用法

shallowRef是一个函数，用于创建一个基本类型的响应式引用。与ref不同，shallowRef只会对其传入的值进行浅层次的响应式处理。也就是说，如果传入的是对象，则不会对对象内部的属性进行响应式处理。

import { shallowRef } from 'vue'

const count = shallowRef(0)
console.log(count.value) // 输出：0

count.value++
console.log(count.value) // 输出：1

1.2 优势

使用shallowRef可以避免不必要的响应式更新，提高性能。当我们知道某个数据不需要进行深层次的响应式处理时，就可以选择使用shallowRef。

例如，当我们从服务器获取到一个包含大量数据的对象时，我们可能只需要对该对象的某个属性进行响应式处理，而不需要对整个对象进行响应式处理。这时候，使用shallowRef可以更好地满足我们的需求。

2. shallowReactive

2.1 功能和用法

shallowReactive是一个函数，用于创建一个浅层次的响应式对象。与reactive不同，shallowReactive只会对对象的第一层属性进行响应式处理，不会递归地将对象内部的属性都变成响应式。

import { shallowReactive } from 'vue'

const user = shallowReactive({
  name: 'John',
  age: 25,
  address: {
    city: 'New York',
    country: 'USA'
  }
})

console.log(user.name) // 输出：'John'
console.log(user.age) // 输出：25
user.age++
console.log(user.age) // 输出：26

// 注意，address仍然是非响应式的
console.log(user.address.city) // 输出：'New York'

2.2 优势

使用shallowReactive可以避免在某些场景下产生不必要的响应式数据。当我们确定某个对象的内部属性不需要进行响应式处理时，可以选择使用shallowReactive。

例如，在某些情况下我们可能会从后端接口得到一些包含大量属性的嵌套对象，但我们只需要对其中的一部分属性进行响应式处理，这时使用shallowReactive就非常合适。

3. 总结

通过使用shallowRef和shallowReactive，我们可以更加灵活地处理响应式数据。它们能够提高性能，并且在某些场景下帮助我们避免不必要的响应式更新。

当我们明确知道某个值或对象的内部属性不需要进行深层次的响应式处理时，就可以选择使用shallowRef或shallowReactive来优化我们的代码。

在实际开发中，请根据具体需求和情况谨慎选择是否使用shallowRef和shallowReactive，并合理利用它们提供的优势。