vue3的reactive重新赋值无效的问题

Vue3 官方的文档说明：

reactive() 返回一个对象的响应式代理

所以 reactive 方法应该作用于一个对象Object，如果要使用数组，则需要包装一下：

let list = reactive({
    
    
	data: [{
    
    id: 01, name: 'XXX'}]
})

或者使用 ref：

let list = ref([{
    
    id: 1, name: 'Andy'}])

已下引用原作者的代码：

import {
    
     reactive, ref } from 'vue'
export default {
    
    
  setup() {
    
    
    // 需要一个带默认值的数组list;
  	let list = reactive([{
    
    id: 1, name: 'Andy'}])
    
    // 每次触发事件重置list，把新值放入,此种方式不会触发视图更新
    const checkBtn = () => {
    
    
      // 此时重置操作 地址指向变成一个新的地址，不会触发视图更新
      list = [{
    
    id: 1, name: 'Andy'}]
      list.push({
    
    id: 2, name: 'Lucy'})
    }
    
    // --------------------------------------------------
    // 正确的重置处理方法如下：使用reactive将数组包裹到一个对象中
    let list = reactive({
    
    
      data: [{
    
    id: 1, name: 'Andy'}]
    });
    const checkBtn = () => {
    
    
      list.data = [{
    
    id: 1, name: 'Andy'}]
      list.data.push({
    
    id: 2, name: 'Lucy'})
    }
    // 或者使用ref
    let list = ref([{
    
    id: 1, name: 'Andy'}]);
    const checkBtn = () => {
    
    
      list.value = [{
    
    id: 1, name: 'Andy'}]
      list.value.push({
    
    id: 2, name: 'Lucy'})
    }
    return {
    
    
      list,
      checkBtn
    }
  },
}

————————————————
版权声明：本文为CSDN博主「普通网友」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Ajekseg/article/details/123375893