ref可以定義基本類型數(shù)據(jù)也可以定義引用類型數(shù)據(jù)荸型，修改時(shí)必須.value;reactive只能定義引用類型數(shù)據(jù)
<div id="app">
<div>
{{carName}}---{{carPrice}}
<button @click="updataCar">修改汽車信息</button>
</div>
<ul>
<li>飛機(jī)名稱：{{plane.name}}</li>
<li>飛機(jī)價(jià)格：{{plane.price}}</li>
<li><button @click="updatePlane">修改飛機(jī)信息</button></li>
</ul>
</div>
<script>
// ref,reactive用于定義響應(yīng)式數(shù)據(jù)
let { ref贺待，reactive } = Vue
Vue.createApp({
// 所有的組合式API的集合
setup() {
//使用ref定義一個(gè)響應(yīng)式對(duì)象
let carName = ref('保時(shí)捷')
let carPrice = ref('100w')
function updateCar(){
carName.value="奔馳"
carPrice.value='120w'
}
// reactive只能定義引用類型數(shù)據(jù)
let plane = reactive({
name: '長(zhǎng)阿城',
price: 30
})
let updatePlane = () => {
plane.name = "海底",
plane.price = 50
}
//setup方法，返回出去的對(duì)象里面的成員蝙叛，可以在模板中使用
return{ carName,carPrice,updateCar, plane,
updatePlane }
},
}).mount('#app')
</script>
vue3中計(jì)算屬性
setup() {
let firstName=ref('張')
let lastName=ref('三')
// 計(jì)算屬性返回姓名
let fullName=computed({
get:()=>{
return firstName.value+'.'+lastName.value
},
set:(val)=>{
let arr=val.split('.')
firstName.value=arr[0]
lastName.value=arr[1]
}
})
return{
firstName,lastName,fullName
}
}
偵聽(tīng)器
vue2
偵聽(tīng)器，如果是一個(gè)函數(shù)形式，只有在偵聽(tīng)到數(shù)據(jù)發(fā)生變化時(shí)飒箭，才會(huì)執(zhí)行
如果要讓偵聽(tīng)器函數(shù)在加載時(shí)，就立刻執(zhí)行一次蜒灰，需要改成對(duì)象的形式
watch:{
money:{
immediate:true
(nval,oval){
console.log(nval,oval);
}
}
vue3
watch默認(rèn)開(kāi)啟深度監(jiān)視弦蹂，并且無(wú)法關(guān)閉，所以不建議直接監(jiān)視整個(gè)對(duì)象强窖，建議監(jiān)聽(tīng)對(duì)象時(shí)凸椿，監(jiān)聽(tīng)對(duì)象的屬性,第一個(gè)參數(shù)是函數(shù)，由該函數(shù)返回指定對(duì)象中的屬性
watch(()=>student.age,(nval,oval)=>{
console.log(nval,oval);
})
如果監(jiān)視的對(duì)象屬性也是一個(gè)對(duì)象翅溺，默認(rèn)不開(kāi)啟深度監(jiān)視脑漫，需要手動(dòng)開(kāi)啟
watch (()=>student.car,(nval,oval)=>{
console.log(nval,oval);
},{deep:true})
watch(()=>student.plane,(nval,oval)=>{
console.log(nval,oval);
},{deep:true})
watchEffect監(jiān)聽(tīng)器，不需要明確的去監(jiān)視誰(shuí)咙崎，誰(shuí)在函數(shù)里面用到了优幸，就監(jiān)視誰(shuí)
watchEffect(()=>{
let m=money.value
let n=student.name
console.log('發(fā)生變化，觸發(fā)watchEffect');
})
