Vue3 使用 ref、reactive响应式丢失

---

一、ref reactive实例

1.引用ref reactive属性

单独引用ref reactive 修改其中某一个属性，状态变量不会丢失，正常使用

<script setup lang="ts">
import { ref, reactive, toRefs, toRef } from "vue";

const count = ref(0);
const obj = reactive({
  a: 1,
  b: 2,
});

const add = () => {
  // 单独引用ref reactive属性 可以直接修改 响应式状态
  count.value++;
  obj.a++;
  console.log(a.value, obj); // {a:2 , b:2}
};
</script>

2.ref reactive替换整条数据

ref可以替换整个对象，依然保持响应式
reactive 替换整个对象 会失去响应式 需要使用toRef / toRefs 将响应式对象转为普通响应式

<script setup lang="ts">
import { ref, reactive, toRefs, toRef } from "vue";

const obj = reactive({
  a: 1,
  b: 2,
});

const obj1 = ref({
  a: 1,
  b: 2,
});


const add = () => {
  // ref可以正常替换整个对象
  obj1 .value = {
    a: 3,
    b: 4,
  };
 
  // reactive 不能直接替换对象，需要使用Object.assign
  Object.assign(obj, {
   a: 2,
   b: 3,
  });   // {a: 2, b: 3} 
  
  //或者
  Object.assign(obj, { ...obj, a: 2, b: 3 });  // {a: 2, b: 3} 
};
</script>

3.ref reactive解构赋值

ref可以正常结构赋值，依然保持响应式
reactive 使用toRefs toRef 使响应式对象变成普通响应式对象(简单来说 将reactive转为ref后面需要带value)，而不破坏响应式

<script setup lang="ts">
import { ref, reactive, toRefs, toRef } from "vue";

const obj = reactive({
  a: 1,
  b: 2,
});

const obj1 = ref({
  a: 1,
  b: 2,
  c: {
	d:3,
	e:4
   }
});


const add = () => {

// ref可以正常解构赋值
  const { a, b } = obj1.value;
  // 1 2
 
// 需要使用toRefs改变整个对象
  const { a, b } = toRefs(obj1);
// 1 2

 //使用toRef改变对象某个属性
  const a = toRef(obj, "a");
  // 1
	
// 让 person 的属性变为独立的响应式 重复赋值
const { d, e } = toRefs(obj1.c);
obj1.c = { d: 6, e:7 };
};
</script>