vue2.x版本中computed和watch的使用及關(guān)聯(lián)和區(qū)別
前言
前面篇介紹了computed和watch的基本使用vue2.x版詳解computed和watch的使用
兩者的區(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"; }, },
區(qū)別
依賴值: 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ù)
補(bǔ)充
在官方文檔中,除了在組件中使用的watch外,官方文檔中,還有對(duì)于示例中watch的介紹
具體用法可以在官網(wǎng)中:
$watch基礎(chǔ)使用–來(lái)自官方文檔例子
官方文檔提示:
注意:在變更 (不是替換) 對(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()
結(jié)語(yǔ)
花了兩個(gè)篇幅去介紹watch和computed的使用方法,以及這兩個(gè)鉤子函數(shù)的區(qū)別,在實(shí)際的企業(yè)項(xiàng)目開(kāi)發(fā)中,使用的場(chǎng)景和次數(shù)較多,所以盡量寫(xiě)的稍微詳細(xì)一些,同時(shí)也將筆記的代碼放在了開(kāi)源倉(cāng)庫(kù),希望對(duì)大家在開(kāi)發(fā)vue2.x的項(xiàng)目中有所幫助
到此這篇關(guān)于vue2.x版本中computed和watch的使用及關(guān)聯(lián)和區(qū)別的文章就介紹到這了,更多相關(guān)vue2.x computed與watch 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
elementplus?card?懸浮菜單的實(shí)現(xiàn)
本文主要介紹了elementplus?card?懸浮菜單的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07vuex 解決報(bào)錯(cuò)this.$store.commit is not a function的方法
這篇文章主要介紹了vuex 解決報(bào)錯(cuò)this.$store.commit is not a function的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12vue.js 使用axios實(shí)現(xiàn)下載功能的示例
下面小編就為大家分享一篇vue.js 使用axios實(shí)現(xiàn)下載功能的示例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看2018-03-03Vue 全家桶實(shí)現(xiàn)移動(dòng)端酷狗音樂(lè)功能
這篇文章主要介紹了Vue 全家桶實(shí)現(xiàn)移動(dòng)端酷狗音樂(lè)功能,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11vue項(xiàng)目使用lodash節(jié)流防抖函數(shù)問(wèn)題解決方案
在lodash函數(shù)工具庫(kù)中,防抖 _.debounce 和節(jié)流 _.throttle 函數(shù)在一些頻繁觸發(fā)的事件中比較常用,這篇文章主要介紹了vue項(xiàng)目使用lodash節(jié)流防抖函數(shù)問(wèn)題與解決,需要的朋友可以參考下2023-10-10Vue ECharts簡(jiǎn)易實(shí)現(xiàn)雷達(dá)圖
這篇文章主要介紹了基于Vue ECharts簡(jiǎn)易實(shí)現(xiàn)雷達(dá)圖,本文通過(guò)實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-12-12Vue中的驗(yàn)證登錄狀態(tài)的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue中的驗(yàn)證登錄狀態(tài)的實(shí)現(xiàn)方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03