您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“Vue中的計算屬性和屬性偵聽怎么實現(xiàn)”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“Vue中的計算屬性和屬性偵聽怎么實現(xiàn)”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識吧。
定義
計算屬性:要用的屬性不存在,要通過已有屬性計算得來,計算屬性要有一個全新的配置項computed
對Vue來說,data里面的數(shù)據(jù)就是屬性,只要Vue中的數(shù)據(jù)改變,就會重新解析模板,遇到插值語法里的方法會重新調(diào)用
原理
底層借助了Objcet.defineproperty方法提供的getter和setter。
get函數(shù)什么時候執(zhí)行?
初次讀取時會執(zhí)行一次。
當(dāng)依賴的數(shù)據(jù)發(fā)生改變時會被再次調(diào)用。
優(yōu)勢
與methods實現(xiàn)相比,內(nèi)部有緩存機(jī)制(復(fù)用),效率更高,調(diào)試方便。
備注
計算屬性最終會出現(xiàn)在vm(Vue實例)上,直接讀取使用即可。
如果計算屬性要被修改,那必須寫set函數(shù)去響應(yīng)修改,且set中要引起計算時依賴的數(shù)據(jù)發(fā)生改變。
computed: { "計算屬性名" () { return "值" } }
需求: 求2個數(shù)的和顯示到頁面上
<template> <div> <p>{{ num }}</p> </div> </template> <script> export default { data(){ return { a: 10, b: 20 } }, // 計算屬性: // 場景: 一個變量的值, 需要用另外變量計算而得來 /* 語法: computed: { 計算屬性名 () { return 值 } } */ // 注意: 計算屬性和data屬性都是變量-不能重名 // 注意2: 函數(shù)內(nèi)變量變化, 會自動重新計算結(jié)果返回 computed: { num(){ return this.a + this.b } } } </script> <style> </style>
計算屬性寫成配置對象的格式:對象中用get和set函數(shù)
get的作用: 當(dāng)有人讀取fullName時,get就會被調(diào)用,且返回值就作為計算屬性的值 (get一定要寫return)
get什么時候調(diào)用? 1.初次讀取fullName時。 2.所依賴的數(shù)據(jù)發(fā)生變化時。
get(){ console.log('get被調(diào)用了') // console.log(this) // 此處的this是vm(Vue實例) return this.firstName + '-' + this.lastName },
set:當(dāng)計算屬性的值被修改時被調(diào)用 形參接收的是傳入的新值
... computed:{ fullName:{ //get有什么作用?當(dāng)有人讀取fullName時,get就會被調(diào)用,且返回值就作為fullName的值 //get什么時候調(diào)用?1.初次讀取fullName時。2.所依賴的數(shù)據(jù)發(fā)生變化時。 get(){ console.log('get被調(diào)用了') // console.log(this) //此處的this是vm return this.firstName + '-' + this.lastName }, //set什么時候調(diào)用? 當(dāng)fullName被修改時。 set(value){ console.log('set',value) const arr = value.split('-') this.firstName = arr[0] this.lastName = arr[1] } } } })
<!-- 綁定事件的時候:@xxx="yyy" yyy可以寫一些簡單的語句 --> <button @click="isHot = !isHot">切換天氣</button>
當(dāng)被監(jiān)視的屬性變化時, handler回調(diào)函數(shù)自動調(diào)用, 進(jìn)行相關(guān)操作
監(jiān)視的屬性必須存在,才能進(jìn)行監(jiān)視?。?/p>
... // 寫法1. 傳入watch配置 偵聽ishot屬性 watch:{ isHot:{ immediate:true, //初始化時讓handler調(diào)用一下 //handler什么時候調(diào)用?當(dāng)isHot發(fā)生改變時。 handler(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue) } } } }) // 寫法2. 通過vm.$watch監(jiān)視 vm.$watch('isHot',{ immediate:true, //初始化時讓handler調(diào)用一下,默認(rèn)是false //handler什么時候調(diào)用?當(dāng)isHot發(fā)生改變時。 handler(newValue,oldValue){ // 有兩個參數(shù),一個是新值,一個是舊值 console.log('isHot被修改了',newValue,oldValue) } })
深度監(jiān)視:
1)Vue中的watch默認(rèn)不監(jiān)測對象內(nèi)部值的改變(一層)。
2)配置deep:true可以監(jiān)測對象內(nèi)部值改變(多層)。
備注:
1)Vue自身可以監(jiān)測對象內(nèi)部值的改變,但Vue提供的watch默認(rèn)不可以!
2)使用watch時根據(jù)數(shù)據(jù)的具體結(jié)構(gòu),決定是否采用深度監(jiān)視。
data:{ isHot:true, numbers:{ a:1, b:1 } }, watch:{ // 監(jiān)視多級結(jié)構(gòu)中某個屬性的變化(原始寫法是要加引號的,簡寫可以不加,但這種情況要加,否則報錯) /* 'numbers.a':{ handler(){ console.log('a被改變了') } } */ //監(jiān)視多級結(jié)構(gòu)中所有屬性的變化 numbers:{ deep:true, // 如果不開啟這個,那監(jiān)測的就是numbers的地址是否有變化 handler(){ console.log('numbers改變了') } } }
監(jiān)視屬性-簡寫
當(dāng)監(jiān)視屬性中只有handler()而不需要開啟其他配置項時才能簡寫
watch:{ isHot(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue,this) } } /* vm.$watch('isHot',function (newValue,oldValue) { console.log('isHot被修改了',newValue,oldValue,this) }) */
computed和watch之間的區(qū)別
computed能完成的功能,watch都可以完成。
watch能完成的功能,computed不一定能完成,例如:watch可以進(jìn)行異步操作。
兩個重要的小原則
所有被Vue管理的函數(shù),最好寫成普通函數(shù),這樣this的指向才是vm 或 組件實例對象。
所有不被Vue所管理的函數(shù)(定時器的回調(diào)函數(shù)、ajax的回調(diào)函數(shù)等、Promise的回調(diào)函數(shù)),最好寫成箭頭函數(shù),這樣this的指向才是vm 或 組件實例對象。
watch:{ firstName(val){ setTimeout(()=>{ console.log(this) //vue實例對象,若用普通函數(shù)則返回Window this.fullName = val + '-' + this.lastName },1000); }, lastName(val){ this.fullName = this.firstName + '-' + val } }
讀到這里,這篇“Vue中的計算屬性和屬性偵聽怎么實現(xiàn)”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實踐使用過才能領(lǐng)會,如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。