簡單了解Vue computed屬性及watch區(qū)別
自己的理解：
1. computed用來監(jiān)控自己定義的變量，該變量不在data里面聲明，直接在computed里面定義，然后就可以在頁面上進(jìn)行雙向數(shù)據(jù)綁定展示出結(jié)果或者用作其他處理；
2. computed比較適合對多個(gè)變量或者對象進(jìn)行處理后返回一個(gè)結(jié)果值，也就是數(shù)多個(gè)變量中的某一個(gè)值發(fā)生了變化則我們監(jiān)控的這個(gè)值也就會發(fā)生變化，舉例：購物車?yán)锩娴纳唐?列表和總金額之間的關(guān)系，只要商品列表里面的商品數(shù)量發(fā)生變化，或減少或增多或刪除商品，總金額都應(yīng)該發(fā)生變化。這里的這個(gè)總金額使用computed屬性來進(jìn)行計(jì)算是最好 的選擇
與watch之間的區(qū)別：
剛開始總是傻傻分不清到底在什么時(shí)候使用watch，什么時(shí)候使用computed。這里大致說一下自己的理解：
watch主要用于監(jiān)控vue實(shí)例的變化，它監(jiān)控的變量當(dāng)然必須在data里面聲明才可以，它可以監(jiān)控一個(gè)變量，也可以是一個(gè)對象，但是我們不能類似這樣監(jiān)控，比如：
watch:{
goodsList.price(newVal,oldVal){
//監(jiān)控商品列表中是商品價(jià)格
}
}
這樣會報(bào)錯(cuò)。只能監(jiān)控整個(gè)對象或單個(gè)變量，如下所示：
data(){
return {
example0:"",
example1:"",
example2:{
inner0:1,
innner1:2
}
}
},
watch:{
example0(newVal,oldVal){//監(jiān)控單個(gè)變量
……
}，example2(newVal,oldVal){//監(jiān)控對象
……
}，
}
watch一般用于監(jiān)控路由、input輸入框的值特殊處理等等，它比較適合的場景是一個(gè)數(shù)據(jù)影響多個(gè)數(shù)據(jù)
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)移動(dòng)端table表格簡單方法
這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)移動(dòng)端table表格簡單方法的相關(guān)資料,使用Vue.js開發(fā)移動(dòng)應(yīng)用程序時(shí),經(jīng)常需要使用各種UI組件,其中el-table是一個(gè)常用的表格組件,可以方便地展示數(shù)據(jù),需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue實(shí)現(xiàn)登錄注冊模板的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
element-ui中的select下拉列表設(shè)置默認(rèn)值方法
今天小編就為大家分享一篇element-ui中的select下拉列表設(shè)置默認(rèn)值方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
異步組件是 Vue.js 中提高應(yīng)用程序性能和加載速度的重要功能之一,在使用異步組件時(shí),需要注意組件的加載時(shí)間、錯(cuò)誤處理和命名規(guī)范等問題,本文將介紹 Vue.js 中異步組件的概念、優(yōu)勢以及如何使用異步組件,感興趣的朋友一起看看吧2023-10-10
ECharts是一個(gè)強(qiáng)大的畫圖插件,在vue項(xiàng)目中,我們常?？梢砸肊charts來完成完成一些圖表的操作,下面這篇文章主要給大家介紹了關(guān)于在Vue3中如何更優(yōu)雅的使用echart圖表的相關(guān)資料,需要的朋友可以參考下2022-05-05
vue2.x 父組件監(jiān)聽子組件事件并傳回信息的方法
本篇文章主要介紹了vue2.x 父組件監(jiān)聽子組件事件并傳回信息的方法，具有一定的參考價(jià)值，有興趣的可以了解一下2017-07-07
這篇文章主要介紹了如何查看vue-cli版本的兩個(gè)命令問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
Vue通過getAction的finally來最大程度避免影響主數(shù)據(jù)呈現(xiàn)問題
這篇文章主要介紹了Vue通過getAction的finally來最大程度避免影響主數(shù)據(jù)呈現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-04-04
Vue實(shí)現(xiàn)當(dāng)前頁面刷新的4種方法舉例
我們在開發(fā)vue的頁面的時(shí)候,有時(shí)候會遇到需要刷新當(dāng)前頁面功能,但是vue框架自帶的router是不支持刷新當(dāng)前頁面功能,下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)當(dāng)前頁面刷新的4種方法,需要的朋友可以參考下2023-04-04
這篇文章主要為大家介紹了Vue中$refs和$nextTick的使用方法，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)Vue有一定幫助，需要的可以參考一下2022-03-03