您好,登錄后才能下訂單哦!
這篇文章主要介紹了vue2.x版本中computed和watch怎么使用的相關(guān)知識(shí),內(nèi)容詳細(xì)易懂,操作簡(jiǎn)單快捷,具有一定借鑒價(jià)值,相信大家閱讀完這篇vue2.x版本中computed和watch怎么使用文章都會(huì)有所收獲,下面我們一起來(lái)看看吧。
兩者的區(qū)別,繼續(xù)通過(guò)代碼實(shí)現(xiàn)的方式具體去了解
html
<li>最開(kāi)始的value值:{{ name }}</li> <li>computed計(jì)算后的值:{{ computedName }}</li> <li> watch修改后的值:{{ watchName }} <input type="text" v-model="watchName" /> </li> <li><button @click="handleNumber">修改名字</button></li>
JS
data() { return { name: "zhangsan", watchName: "張三", }; }, watch: { watchName(newVal, oldVal) { console.log("舊的值---->", newVal); console.log("新的值---->", oldVal); console.log("watch下所有的狀態(tài)都會(huì)監(jiān)聽(tīng)this.name---->", this.name); console.log( "watch下所有的狀態(tài)都會(huì)監(jiān)聽(tīng)this.computedName---->", this.computedName ); this.watchName = newVal; }, }, computed: { computedName: function (currentThis) { console.log( "和計(jì)算屬性無(wú)關(guān)的狀態(tài)發(fā)生更改時(shí),不會(huì)執(zhí)行,只要依賴的狀態(tài)發(fā)生更改,緩存才會(huì)更新", currentThis ); return `依賴于name,:${this.name}`; }, }, methods: { handleNumber() { this.name = "lisi"; }, },
依賴值: computed依賴于所使用的狀態(tài),類似在data中聲明的name,
而watch中監(jiān)聽(tīng)的值不依賴于某個(gè)值,只要組件狀態(tài)發(fā)生更改,監(jiān)聽(tīng)的值就實(shí)時(shí)獲取最新值,
computed的實(shí)現(xiàn)使用的是getter和setter獲取值,屬于同步操作。
使用方法:
computed最后需要進(jìn)行return處理返回值,并且可以使用更深層次的getter和setter,具體參考 vue2.x版詳解computed和watch的使用
watch除了callback回調(diào)函數(shù)外,還有兩個(gè)屬性值為布爾值的屬性,用于首次綁定immediate,以及對(duì)對(duì)象的深度監(jiān)聽(tīng)deep
兩者相同點(diǎn)就是可以通過(guò)方法參數(shù)獲取新值,結(jié)合其他狀態(tài)處理相關(guān)的業(yè)務(wù)
在官方文檔中,除了在組件中使用的watch外,官方文檔中,還有對(duì)于示例中watch的介紹
官方文檔提示:
注意:在變更 (不是替換) 對(duì)象或數(shù)組時(shí),舊值將與新值相同,因?yàn)樗鼈兊囊弥赶蛲粋€(gè)對(duì)象/數(shù)組。Vue 不會(huì)保留變更之前值的副本。
vm.$watch('a.b.c', function (newVal, oldVal) { // 做點(diǎn)什么 }) // 函數(shù) vm.$watch( function () { // 表達(dá)式 `this.a + this.b` 每次得出一個(gè)不同的結(jié)果時(shí) // 處理函數(shù)都會(huì)被調(diào)用。 // 這就像監(jiān)聽(tīng)一個(gè)未被定義的計(jì)算屬性 return this.a + this.b }, function (newVal, oldVal) { // 做點(diǎn)什么 } )
需要注意的是,如果使用vm.$watch,那么使用unwatch有助于我們?nèi)∠麑?duì)某個(gè)狀態(tài)的監(jiān)聽(tīng),減少不必要的監(jiān)聽(tīng)和交互開(kāi)銷
var unwatch = vm.$watch('a', cb) // 之后取消觀察 unwatch()
關(guān)于“vue2.x版本中computed和watch怎么使用”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對(duì)“vue2.x版本中computed和watch怎么使用”知識(shí)都有一定的了解,大家如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。