当前位置：首页 > article >正文

vue3中如何给响应式对象

article 2025/3/7 16:10:02

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>