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>
原文地址:https://blog.csdn.net/weixin_45549016/article/details/143066939
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!