vue3中使用reactive定义的变量响应式丢失问题解决方案

import { reactive } from 'vue';  
const state = reactive({  
  count: 0  
});  

const { count } = state; // count 不是响应式的  
// 后续修改 count 不会触发视图更新  
count = 1;

import { reactive, toRefs } from 'vue';  
  
const state = reactive({  
  count: 0  
});  
const { count } = toRefs(state); // count 是响应式的 ref  
// 修改 ref 的值会触发视图更新  
count.value = 1;

import { reactive } from 'vue';  
  
const state = reactive({  
  // 初始属性  
});  
  
// 后续添加新属性  
state.newProperty = 'value'; // 视图可能不会更新

import { reactive } from 'vue';  
  
const state = reactive({  
  data: null  
});  
// 定义一个响应式变量
const data = reactive ({
        name:"",
        age:""
});

async function fetchData() {  
  const response = await fetch(/* ... */);  
  const res = await response.json();  
  state.data = res.data; // 视图可能不会立即更新  
  // 直接赋值
  data = res.data;// 响应式丢失,视图不更新
  }

import { reactive } from 'vue';  
// 定义一个响应式变量
const data = reactive ({
    dataObj:{
        name:"",
        age:""
    }
});
// 或者
// 定义一个响应式变量
const data1 = ref ({
    name:"",
    age:""
});

async function fetchData() {  
  const response = await fetch(/* ... */);  
  const res = await response.json();  
  // 嵌套一层 dataObj
  data.dataObj= res.data; // 保留响应式，视图更新
  // 更新响应式变量的值
  data1.value = res.data; // 保留响应式，视图更新
  }