Vue3【十】07使用ref創建基本類型的響應式數據以及ref和reactive區別

ref 也可以創建對象類型的響應式數據，不過要使用.value
ref 處理對象數據的時候，底層數據還是reactive格式的
reactive 重新分配一個新對象，會失去響應式可以使用Object.assign()來做整體替換，不會丟失響應式
若要使用一個基本類型的響應式數據，必須使用ref
若要使用一個響應式對象成績不深，ref和reactive都可以
若要使用一個響應式對象，層級比較深，推薦reactive

案例截圖

目錄結構

案例代碼

Person.vue

<template><div class="person"><h1>我是 兜率宮 組件</h1><h2>名字:{{ palace.name }}</h2><h2>數量:{{ palace.no }} </h2><button @click="changeName">修改名字</button><button @click="changeNo">修改數量</button><button @click="showAdd">查看信息</button><button @click="changePalace">修改宮殿</button></div><div class="baxian"><h2>八仙都有哪些？</h2><ul><li v-for="item in baxian" :key="item.id">{{ item.name }}</li></ul><button @click="changeFirstName"> 更改第一個名字 </button></div>
</template><script lang="ts" setup>
import { ref } from 'vue'// 數據// ref 也可以創建對象類型的響應式數據，不過要使用.value
// ref 處理對象數據的時候，底層數據還是reactive格式的
let palace = ref({name: '兜率宮',add: '兜率宮。兜率宮位于江西省鷹潭市的龍虎山，是道教的重要圣地之一。它被認為是太上老君的道場，位于離恨天之上，是道教神話中兜率天宮的一部分。兜率宮原址位于龍虎山天門山，有著悠久的歷史和文化背景。',no: 1
})let baxian = ref([{ id: 'b01', name: '鐵拐李' },{ id: 'b02', name: '漢鐘離' },{ id: 'b03', name: '張果老' },{ id: 'b04', name: '呂洞賓' },{ id: 'b05', name: '何仙姑' },{ id: 'b06', name: '藍采和' },{ id: 'b07', name: '韓湘子' },{ id: 'b08', name: '曹國舅' },
])console.log(palace)
console.log(baxian)// reactive 重新分配一個新對象，會失去響應式可以使用Object.assign()來做整體替換，不會丟失響應式
function changePalace() {Object.assign(palace.value, {name: '天師殿',add: '天師殿，是道教的重要圣地之一。',no: 20})
}// 方法
function changeFirstName() {baxian.value[0].name = '孫悟空'
}
function showAdd() {alert(palace.value.add)
}
function changeName() {palace.value.name = palace.value.name == "兜率宮" ? '永樂宮' : '兜率宮'console.log(palace)
}
function changeNo() {palace.value.no += 1console.log(palace.value.no)
}
// 若要使用一個基本類型的響應式數據，必須使用ref
// 若要使用一個響應式對象成績不深，ref和reactive都可以
// 若要使用一個響應式對象，層級比較深，推薦reactive
</script><style scoped>
.person {background-color: #ff9e4f;box-shadow: 0 0 10px;border-radius: 30px;padding: 30px;
}button {margin: 0 10px;padding: 0 5px;box-shadow: 0 0 5px;;
}
</style>