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