soilgd/前端/vue3/测试/src/components/ref对比reactive.vue

<!-- eslint-disable vue/multi-word-component-names -->

<script lang="ts" setup name="TheWelcome">
import { reactive, ref } from 'vue';

// 使用`reactive`创建响应式对象
const car = reactive({
  brand: "奔驰", 
  price: 100
});

// 使用`ref`创建响应式数字
const sum = ref(0);

function changePrice() {
  car.price += 10;
}

function changeCar() {
  // 错误用法
  //Object.assign(car, {brand: "马萨拉蒂", price: 10});
  Object.assign(car,{brand: "马萨拉蒂", price: 10})
}

function changeBrand() {
  car.brand = '宝马';
}

function changeSum() {
  sum.value += 1;
}
</script>

<template>
  <!-- 主要容器，应用了`.HelloWorld`类以应用样式 -->
  <div class="HelloWorld">
    <h2>汽车信息：一辆{{ car.brand }}车, 价值{{ car.price }}万</h2>
    <button @click="changePrice">增加价格</button>
    <button @click="changeBrand">修改车型</button>
    <button @click="changeCar">修改一辆车</button>
    <hr>
    <h2>当前求和：{{ sum }}</h2>
    <button @click="changeSum">点击加一</button>
  </div>
</template>

<style scoped>
/*
  .HelloWorld 类选择器，仅应用于当前组件内部的元素，
  因为使用了`scoped`属性，确保样式不会影响到其他组件
*/
.HelloWorld {
  background-color: skyblue; /* 设置背景颜色 */
  box-shadow: 0 0 10px; /* 添加阴影效果 */
  border-radius: 10px; /* 设置圆角半径 */
  padding: 20px; /* 设置内边距 */
}

/* 设置按钮之间的间距 */
button {
  margin: 0 5px;
}

li {
  font-size: 20px;
}
</style>