目錄
1、computed
2、computed完整寫法
?3、watch
4、watch監(jiān)聽對象具體屬性
5、watch 監(jiān)聽reactive數(shù)據(jù)
1、computed
基于現(xiàn)有的數(shù)據(jù)計(jì)算出新的數(shù)據(jù)
<script setup >
import {ref,computed} from 'vue'
const num=ref(1)
const doubleNum=computed(()=>{
return num.value*2
})
const goods=ref([
{
id:1001,
price:5000,
name:'小米手機(jī)'
},
{
id:1002,
price:4000,
name:'華為手機(jī)'
},
{
id:1003,
price:6000,
name:'三星手機(jī)'
}
])
//篩選出價(jià)格大于等于5000的商品
const filterGoods=computed(()=>{
return goods.value.filter(item=>item.price>=5000)
})
</script>
<template>
<div>hello,world</div>
<p>{{ num }}- {{ doubleNum }}</p>
<p>{{ filterGoods }}</p>
</template>
<style scoped>
</style>
2、computed完整寫法
<script setup >
import {ref,computed} from 'vue'
const firstName=ref('')
const lastName=ref('')
//簡寫 只提供get
// const fulName=computed(()=>{
// return firstName.value+lastName.value
// })
//完整寫法
const fulName=computed({
//get:function(){} 與 get() {} 等價(jià)
//get:()=>{} 箭頭函數(shù)不可簡寫
get(){
return firstName.value+lastName.value
},
set(newV){
firstName.value=newV.substring(0,1)
lastName.value=newV.substring(1)
}
})
</script>
<template>
<div>hello,world</div>
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
<input type="text" v-model="fulName">
</template>
<style scoped>
</style>?3、watch
1 . 偵聽一個(gè)數(shù)據(jù)
第一個(gè)參數(shù)：監(jiān)聽的數(shù)據(jù) 第二個(gè)回調(diào)函數(shù)
2.偵聽多個(gè)數(shù)據(jù)
第一個(gè)參數(shù)監(jiān)聽的數(shù)據(jù)構(gòu)成的數(shù)組 ? 第二個(gè)參數(shù)回調(diào)函數(shù)
3.立刻調(diào)用 (第三個(gè)參數(shù)位一個(gè)對象，里面可放immediate:true)
4.深度監(jiān)聽 (第三個(gè)參數(shù)位一個(gè)對象，里面可放 deep:true)
<script setup >
import {ref,watch} from 'vue'
const num=ref(1)
// const age=ref(10)
const obj=ref({
id:1,
name:'電視',
price:3000
})
// 1 偵聽一個(gè)數(shù)據(jù)
//第一個(gè)參數(shù)：監(jiān)聽的數(shù)據(jù) 第二個(gè)回調(diào)函數(shù)
watch(num,(newV,oldV)=>{
console.log(newV,oldV)
})
//2 偵聽多個(gè)數(shù)據(jù)
//第一個(gè)參數(shù)監(jiān)聽的數(shù)據(jù)構(gòu)成的數(shù)組
//第二個(gè)參數(shù)回調(diào)函數(shù)
// watch([num,age],([newNum, newAge],[oldNum, oldAge])=>{
// console.log(newNum, newAge);
// })
// watch([num,age],([newNum,newAge],[oldNum,oldAge])=>{
// console.log(newNum,newAge)
// })
//3 立刻調(diào)用 immediate
// watch(num,(newV,oldV)=>{
// console.log('立刻調(diào)用')
// console.log(newV,oldV)
// },{
// immediate:true
// })
//4 深度監(jiān)聽
watch(obj,(newV,oldV)=>{
console.log(newV,oldV)
},{
deep:true
})
const changeObj=()=>{
obj.value.price -=200
}
</script>
<template>
<div>hello,world</div>
<p>{{ num }}</p>
<p>{{ obj }}</p>
<button @click="changeObj">修改obj</button>
</template>
<style scoped>
</style>
4、watch監(jiān)聽對象具體屬性
<script setup >
import {ref,watch} from 'vue'
const obj=ref({
id:1,
name:'電視',
price:3000
})
//深度監(jiān)聽
// 第一個(gè)參數(shù) 可以是函數(shù)，函數(shù)的返回值就是被偵聽的數(shù)據(jù)
//分開監(jiān)聽數(shù)據(jù)的變化
//只有價(jià)格改變才監(jiān)聽
// watch(()=>obj.value.price,(newV,oldV)=>{
// console.log(newV,oldV)
// },{
// deep:true
// })
// watch(()=>obj.value.name,(newV,oldV)=>{
// console.log(newV,oldV)
// },{
// deep:true
// })
//監(jiān)聽數(shù)據(jù)變化寫在一起
watch([()=>obj.value.price,()=>obj.value.name,()=>obj.value.id],(newV,oldV)=>{
console.log(newV[0],oldV)
},{
deep:true
})
const changeObj=()=>{
// obj.value.price -=200
obj.value.name='手機(jī)'
// obj.value.id=200
}
</script>
<template>
<div>hello,world</div>
<button @click="changeObj">修改obj</button>
</template>
<style scoped>
</style>
5、watch 監(jiān)聽reactive數(shù)據(jù)
watch監(jiān)控reactive數(shù)據(jù)，假如需要深層次監(jiān)控屬性需要手動(dòng)開啟deep:true或省略
watch監(jiān)控ref數(shù)據(jù)，深層次監(jiān)控屬性 ，必須手動(dòng)開啟deep:true，不能省略，省略相當(dāng)于默認(rèn) false文章來源：http://www.zghlxwxcb.cn/news/detail-821001.html
<script setup >
import {reactive,watch} from 'vue'
const user=reactive({
name:'admin',
age:18,
job:{
jobName:'web前端工程師',
salary:6000
}
})
//偵聽的是reactive數(shù)據(jù)，默認(rèn)對第一層屬性開啟deep:true,此時(shí)無論有沒有傳入deep選項(xiàng)
//偵聽的是ref引用數(shù)據(jù)，默認(rèn)deep：false，監(jiān)控的對象屬性發(fā)生改變不會(huì)被監(jiān)控到
watch(user,(newV,oldV)=>{
console.log(newV)
},{
deep:true //關(guān)閉深度監(jiān)控?zé)o效
})
const changeAge=()=>{
user.age++
//假如需要偵聽深層次數(shù)據(jù)，需要手動(dòng)開啟deep:true
user.job.salary += 2000
}
</script>
<template>
<div>hello,world</div>
<p>{{ user }}</p>
<button @click="changeAge">修改age</button>
</template>
<style scoped>
</style>
?文章來源地址http://www.zghlxwxcb.cn/news/detail-821001.html
到了這里，關(guān)于Vue3的computed和watch的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
