vue3 reactive值为什么不推荐解构？&&分析响应式结构

在上一篇文章中，我们探讨了vue3中reactive值解构的问题，即解构后的值会丢失响应式。这篇文章我们将继续探讨这个话题，并深入分析响应式结构。

问题思考

解构的值是基本数据类型，会丢失响应式，那如果是引用数据类型，会保持响应式吗？丢失响应式是vue内部帮我们做的吗？

引用数据类型

首先，我们来了解一下什么引用数据类型。引用数据类型是指在内存中存储数据的地址，而不是数据本身。例如，数组和对象就是引用数据类型。

在vue3中，如果我们对一个reactive的引用数据类型进行解构，解构后的值仍然是响应式的。这是因为vue内部帮我们做了处理，将解构后的值也变成了reactive值。

const app = Vue.createApp({
  data() {
    return {
      arr: [1, 2, 3],
    }
  }
})

app.mount('#app')

const { arr } = app.data

arr.push(4) // 响应式数组，调用push方法会触发更新

console.log(arr) // [1, 2, 3, 4]

在这个例子中，我们对一个reactive的数组arr进行了解构，解构后的arr仍然是响应式的。当我们调用arr.push(4)方法时，数组中添加了新的元素4，并且触发了更新。这说明解构后的arr仍然是响应式的。

基本数据类型

但是，如果我们对一个reactive的基本数据类型进行解构，解构后的值就会丢失响应式。这是因为基本数据类型的值是直接存储在内存中的，而不是存储数据的地址。因此，当我们对基本数据类型进行解构时，vue内部无法帮我们将其转换成reactive值。

const app = Vue.createApp({
  data() {
    return {
      num: 1,
    }
  }
})

app.mount('#app')

const { num } = app.data

num++ // 基本数据类型，直接修改不会触发更新

console.log(num) // 2

在这个例子中，我们对一个reactive的基本数据类型num进行了解构，解构后的num丢失了响应式。当我们调用num++方法时，num的值增加了1，但是并没有触发更新。这说明解构后的num已经不是响应式的了。

为什么不推荐解构reactive值

通过上面的分析，我们可以看到，解构reactive的引用数据类型不会丢失响应式，但是解构reactive的基本数据类型会丢失响应式。因此，为了避免丢失响应式，我们不推荐对reactive值进行解构。

如何避免丢失响应式

如果我们どうしても需要对reactive值进行解构，我们可以使用一些其他的方法来避免丢失响应式。一种方法是使用computed属性。computed属性是一个计算属性，它可以依赖其他属性的值进行计算。当依赖的属性发生变化时，computed属性的值也会发生变化。

const app = Vue.createApp({
  data() {
    return {
      arr: [1, 2, 3],
    }
  },
  computed: {
    arrCopy() {
      return [...this.arr] // 使用扩展运算符创建一个新的数组
    }
  }
})

app.mount('#app')

const { arrCopy } = app.computed

arrCopy.push(4) // 计算属性，调用push方法会触发更新

console.log(arrCopy) // [1, 2, 3, 4]

在这个例子中，我们使用computed属性arrCopy来对reactive数组arr进行解构。arrCopy是一个计算属性，它依赖arr属性的值进行计算。当arr属性发生变化时，arrCopy的值也会发生变化。因此，当我们调用arrCopy.push(4)方法时，arrCopy中添加了新的元素4，并且触发了更新。这说明使用computed属性可以避免丢失响应式。

另一种方法是使用watch属性。watch属性可以监听一个属性的值的变化，当属性的值发生变化时，watch属性就会执行一个回调函数。

const app = Vue.createApp({
  data() {
    return {
      arr: [1, 2, 3],
    }
  },
  watch: {
    arr(newValue, oldValue) {
      console.log('arr has changed from', oldValue, 'to', newValue)
    }
  }
})

app.mount('#app')

const { arr } = app.data

arr.push(4) // 响应式数组，调用push方法会触发更新

console.log(arr) // [1, 2, 3, 4]

在这个例子中，我们使用watch属性arr来监听reactive数组arr的值的变化。当arr的值发生变化时，watch属性就会执行回调函数，并输出arr的值的变化。这说明使用watch属性也可以避免丢失响应式。

结论

通过上面的分析，我们可以看到，vue3中reactive值的解构会丢失响应式，这是因为基本数据类型的值是直接存储在内存中的，而不是存储数据的地址。因此，当我们对基本数据类型进行解构时，vue内部无法帮我们将其转换成reactive值。为了避免丢失响应式，我们可以使用computed属性或watch属性来对reactive值进行解构。