vue3中如何给响应式对象
reactive定义响应式对象：
首先我们定义一个reactive响应式对象
<template>
<div class="Car">
<h2>汽车名称: {{ car.brand }}</h2>
<p>价格：{{ car.price }}</p>
<button @click="changeName">修改汽车名称</button>
<button @click="changePrice">修改汽车价格</button>
<button @click="changeCar">修改汽车</button>
</div>
</template>
<style scoped>
.Car {
background-color: antiquewhite;
padding: 10px;
box-shadow: 0 0 10px #ccc;
border-radius: 10px;
}
</style>通常我们更改对象中的某个属性时，使用的时
<script lang="ts" setup name="Car">
//导入响应式
import { reactive } from "vue";
//数据
let car = reactive({ brand: "奔驰", price: 10000 });
const changeName = () => {
car.brand = "宝马";
console.log("brand", car.brand);
};
const changePrice = () => {
let count = (Math.random() * 1000).toPrecision(3);
car.price = 200000 + Number(count);
console.log("price", car.price);
};
</script>现在我们整体替换响应式对象
<script lang="ts" setup name="Car">
//导入响应式
import { reactive } from "vue";
//数据
let car = reactive({ brand: "奔驰", price: 10000 });
const changeCar = () => {
// car = reactive({ brand: "帕拉梅拉", price: 10000000 }); //不行的
// car.brand = "帕拉梅拉"
// car.price = 10000000
Object.assign(car,{brand: "帕拉梅拉", price: 10000000})
};
</script>我们可以使用Object.assign()
Object.assign()方法用于将一个或多个源对象的所有可枚举属性值复制到目标对象中。在这个例子中，我们将一个新的对象{brand: "帕拉梅拉", price: 10000000}的属性值复制到car对象中，覆盖原有的属性值。
Ref定义响应式对象：
当我们使用ref定义响应式对象时
<script lang="ts" setup name="CarPlus">
import { ref } from "vue";
//不是响应式的
// let car = {brand: "奔驰", price: 100000}
//数据
let car = ref({ brand: "奔驰", price: 10000 });
let games = ref([
{ id: 1, name: "LOL" },
{ id: 2, name: "DNF" },
{ id: 3, name: "CSGO" },
]);
//测试嵌套对象
let test= ref(
{
b:{
c:"这是一个嵌套测试"
}
}
)
const changeName = () => {
car.value.brand = "宝马";
console.log("brand", car.value.brand);
};
const changePrice = () => {
let count = (Math.random() * 1000).toPrecision(3);
car.value.price = 200000 + Number(count);
console.log("price", car.value.price);
};
function changeFirst(){
games.value[0].name = 'Black Myth WuKong'
}
</script>编写定义方法：
<script lang="ts" setup name="CarPlus">
import { ref } from "vue";
//不是响应式的
// let car = {brand: "奔驰", price: 100000}
//数据
let car = ref({ brand: "奔驰", price: 10000 });
function changeFirst(){
games.value[0].name = 'Black Myth WuKong'
}
</script>小结：
- 当使用ref定义响应式对象时，给对象赋值，直接使用，[Object当前对象].vaule = newObject
- 当使用reactive定义响应式对象时，给对象赋值，Object.assign(Object当前对象，newObject)
- 若需要基本类型的响应式对象时，必须使用ref
- 若需要一个响应式的对象，层级不深，ref、reactive都可以
- 若需要一个响应式的对象，且层级较深，推荐使用reactive
原文地址：https://blog.csdn.net/qq_58341172/article/details/142875658
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！