Vue3中的計算屬性及偵聽器如何使用
這篇文章主要介紹“Vue3中的計算屬性及偵聽器如何使用”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Vue3中的計算屬性及偵聽器如何使用”文章能幫助大家解決問題。
成都創(chuàng)新互聯(lián)公司長期為上1000+客戶提供的網(wǎng)站建設服務，團隊從業(yè)經(jīng)驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為霍州企業(yè)提供專業(yè)的網(wǎng)站設計制作、做網(wǎng)站，霍州網(wǎng)站改版等技術服務。擁有十載豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
計算屬性
我們知道，在模板中可以直接通過插值語法顯示一些data中的數(shù)據(jù)，但是在某些情況，我們可能需要對數(shù)據(jù)進行一些轉化后再顯示，或者需要將多個數(shù)據(jù)結合起來進行顯示
在模板中使用表達式，可以非常方便的實現(xiàn)，但是設計它們的初衷是用于簡單的運算，在模板中放入太多的邏輯會讓模板過重和難以維護，并且如果多個地方都使用到，那么會有大量重復的代碼
所以我們希望將業(yè)務邏輯和UI界面進行分離，其中一種方式就是將邏輯抽取到一個method中，但這種做法有以下弊端
事實上，對于任何包含響應式數(shù)據(jù)的復雜邏輯，你都應該使用計算屬性
{{ fullname }}
偵聽器
在data返回的對象中定義了數(shù)據(jù)，這個數(shù)據(jù)通過插值語法等方式綁定到template中，當數(shù)據(jù)變化時，template會自動進行更新來顯示最新的數(shù)據(jù)
但是在某些情況下，我們希望在代碼邏輯中監(jiān)聽某個數(shù)據(jù)的變化，這個時候就需要用偵聽器watch來完成了
Vue.createApp({
data() {
return {
info: {
name: 'Klaus'
}
}
},
watch: {
// 可以使用watch監(jiān)聽響應式數(shù)據(jù)的改變
// 對應有兩個參數(shù)
// 參數(shù)一 --- 新值
// 參數(shù)二 --- 舊值
info(newV, oldV) {
// 如果監(jiān)聽的值是對象，獲取到的新值和舊值是對應對象的代理對象
console.log(newV, oldV)
// 代理對象 轉 原生對象
// 1. 使用淺拷貝獲取一個新的對象，獲取的新的對象為原生對象
console.log({...newV})
// 2. 使用Vue.toRaw方法獲取原生對象
console.log(Vue.toRaw(newV))
}
},
methods: {
change() {
this.info = {
name: 'Steven'
}
}
}
}).mount('#app')配置選項
| 屬性 | 說明 | | deep | 是否開啟深度監(jiān)聽
值為boolean
未開啟的時候，如果監(jiān)聽的是對象，那么只有對象的引用發(fā)生改變的時候，才會觸發(fā)watch回調
開始后，如果監(jiān)聽的是對象，那么只要對象中的任意一個屬性發(fā)生了改變，就會觸發(fā)watch回調 |
| immediate | 是否立即開始監(jiān)聽
默認情況下，初次渲染是不會觸發(fā)watch監(jiān)聽，只有當值發(fā)生改變后，才會觸發(fā)watch監(jiān)聽
將immediate設置為true后，初次渲染也會觸發(fā)watch監(jiān)聽，此時oldValue的值為undefined |
Vue.createApp({
data() {
return {
info: {
name: 'Klaus'
}
}
},
watch: {
info: {
// 開啟了深度監(jiān)聽后，當info的屬性發(fā)生改變的時候，就會觸發(fā)對應的watch回調
// 注意: 和直接修改info引用不同的是，如果直接修改的是對象的屬性
// 那么此時newV和oldV是同一個對象的引用, 此時也就獲取不到對應的舊值
handler(newV, oldV) {
console.log(newV, oldV)
console.log(newV === oldV) // => true
},
deep: true,
immediate: true
}
},
methods: {
change() {
this.info.name = 'Steven'
}
}
}).mount('#app')其它寫法
直接監(jiān)聽對象屬性
watch: {
'info.name'(newV, oldV){
console.log(newV, oldV)
}
}字符串寫法
Vue.createApp({
data() {
return {
info: {
name: 'Klaus'
}
}
},
watch: {
// watch的值如果是一個字符串的時候
// 會自動以該字符串作為函數(shù)名去methods中查找對應的方法
'info.name': 'watchHandler'
},
methods: {
change() {
this.info.name = 'Steven'
},
watchHandler(newV, oldV){
console.log(newV, oldV)
}
}
}).mount('#app')數(shù)組寫法
Vue.createApp({
data() {
return {
info: {
name: 'Klaus'
}
}
},
watch: {
'info.name': [
'watchHandler',
function handle() {
console.log('handler2')
},
{
handler() {
console.log('handler3')
}
}
]
},
methods: {
change() {
this.info.name = 'Steven'
},
watchHandler(){
console.log('handler1')
}
}
}).mount('#app')$watch
Vue.createApp({
data() {
return {
info: {
name: 'Klaus'
}
}
},
created() {
/*
$watch 參數(shù)列表
參數(shù)一 --- 偵聽源
參數(shù)二 --- 偵聽回調
參數(shù)三 --- 配置對象
*/
this.$watch('info.name', (newV, oldV) => console.log(newV, oldV), {
immediate: true
})
},
methods: {
change() {
this.info.name = 'Steven'
}
}
}).mount('#app')關于“Vue3中的計算屬性及偵聽器如何使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識，可以關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。
本文題目：Vue3中的計算屬性及偵聽器如何使用
本文路徑：
http://weahome.cn/article/jsjhch.html
重慶分公司
重慶分公司
