- ref 創(chuàng)建的變量必須使用.value （可以使用volar插件自動(dòng)添加.value）
- reactive 重新分配一個(gè)新對象，會(huì)失去響應(yīng)式（可以使用Object.assign去整體替換）
使用原則：
- 1.如果只需要一個(gè)基本類型的數(shù)據(jù)妇智，必須使用ref
- 2.如果需要一個(gè)響應(yīng)式對象，層級不深为狸，ref,reactive都可以
- 3.如果需要一個(gè)響應(yīng)式對象，且層級較深遗契，推薦使用reactive
<template>
<div class="person">
<h2>當(dāng)前求和為：{{ sum }}</h2>
<button @click="changeSum">點(diǎn)我sum+1</button>
<h2>一輛{{ car.brand }}車辐棒，價(jià)值:{{ car.price }}w</h2>
<button @click="changePrice">修改價(jià)格</button>
<button @click="changeCar">修改汽車</button>
</div>
</template>
/* <script lang="ts">
import { ref, reactive } from "vue";
export default {
name: "Person",
};
</script> */
<script lang="ts" setup name="Person24">
let sum =ref(0)
function changeSum(){
sum.value+=1
// 這樣也是不行的
sum =ref(8)
}
let car = reactive({ brand: "奔馳", price: 100 });
// let car = ref({ brand: "奔馳", price: 100 });
function changePrice() {
car.price += 10;
}
function changeCar(){
// 無效 ,頁面不會(huì)更新
// car= {brand:'雅迪',price:0.1}
// car = reactive({ brand: "奔馳", price: 100 });
// 這個(gè)寫法，頁面可以更新
Object.assign(car,{brand:'雅迪',price:0.1})
// ref 創(chuàng)建的變量必須使用.value （可以使用volar插件自動(dòng)添加.value）
// reactive 重新分配一個(gè)新對象姊途，會(huì)失去響應(yīng)式（可以使用Object.assign去整體替換）
// 使用原則：
// 1.如果只需要一個(gè)基本類型的數(shù)據(jù)涉瘾，必須使用ref
// 2.如果需要一個(gè)響應(yīng)式對象知态，層級不深捷兰，ref,reactive都可以
// 3.如果需要一個(gè)響應(yīng)式對象，且層級較深负敏，推薦使用reactive
}
</script>
<style>
.person {
background-color: skyblue;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
.button {
margin: 0 5px;
}
</style>
