文章目录
- 一、ref reactive实例
- 1.引用ref reactive属性
- 2.ref reactive替换整条数据
- 3.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.assignObject.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>