詳解vue中computed 和 watch的異同
一、computed 和 watch 都可以觀察頁面的數(shù)據(jù)變化。當處理頁面的數(shù)據(jù)變化時，我們有時候很容易濫用watch。 而通常更好的辦法是使用computed屬性，而不是命令是的watch回調。
這里我直接引用vue官網(wǎng)的例子來說明：
html:
我們要實現(xiàn) 第三個表單的值 是第一個和第二個的拼接，并且在前倆表單數(shù)值變化時，第三個表單數(shù)值也在變化
<div id="myDiv"> <input type="text" v-model="firstName"> <input type="text" v-model="lastName"> <input type="text" v-model="fullName"> </div>
js: 用watch方法來實現(xiàn)
new Vue({
el: '#myDiv',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
js: 利用computed 來寫
new Vue({
el:"#myDiv",
data:{
firstName:"Den",
lastName:"wang",
},
computed:{
fullName:function(){
return this.firstName + " " +this.lastName;
}
}
})
很容易看出 computed 在實現(xiàn)上邊的效果時，是更簡單的。
二 、 詳解 comouted 計算屬性。
在vue的 模板內(nèi)（{{}}）是可以寫一些簡單的js表達式的 ，很便利。但是如果在頁面中使用大量或是復雜的表達式去處理數(shù)據(jù)，對頁面的維護會有很大的影響。這個時候就需要用到computed 計算屬性來處理復雜的邏輯運算。
1.優(yōu)點：
在數(shù)據(jù)未發(fā)生變化時，優(yōu)先讀取緩存。computed 計算屬性只有在相關的數(shù)據(jù)發(fā)生變化時才會改變要計算的屬性，當相關數(shù)據(jù)沒有變化是，它會讀取緩存。而不必想 motheds方法 和 watch 方法是的每次都去執(zhí)行函數(shù)。
2.setter 和 getter方法：（注意在vue中書寫時用set 和 get）
- setter 方法在設置值是觸發(fā)。
- getter 方法在獲取值時觸發(fā)。
computed:{
fullName:{
//這里用了es6書寫方法
set(){
alert("set");
},
get(){
alert("get");
return this.firstName + " " +this.lastName;
},
}
}
三 、watch 方法
雖然計算屬性在大多數(shù)情況下是非常適合的，但是在有些情況下我們需要自定義一個watcher，在數(shù)據(jù)變化時來執(zhí)行異步操作，這時watch是非常有用的。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Vue?Router路由hash模式與history模式詳細介紹
Vue?Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，讓構建單頁面應用變得易如反掌。路由實際上就是可以理解為指向，就是我在頁面上點擊一個按鈕需要跳轉到對應的頁面，這就是路由跳轉2022-08-08
本文主要介紹了vue 如何打開接口返回的HTML文件，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要給大家介紹了關于vue打開新窗口并實現(xiàn)傳參的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
條件渲染是根據(jù)條件的真假來有條件地渲染元素,在Vue.js 3.x中,常見的條件渲染包括使用v-if指令和v-show指令,本文講解使用v-if指令進行條件渲染,需要的朋友可以參考下2024-03-03
vue中關于this.refs為空出現(xiàn)原因及分析
這篇文章主要介紹了vue中關于this.refs為空出現(xiàn)原因及分析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要給大家介紹了基于vue通用表單解決方案的思考與分析，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-03-03
如何使用Vue3的onMounted鉤子函數(shù)及vue3中onMounted的用法詳解
本文詳細介紹了Vue3中的`onMounted`鉤子函數(shù)的前世今生,包括其在Vue2中的前身`mounted`鉤子,以及Vue3中使用Composition?API的`onMounted`鉤子的用法,文章涵蓋了`onMounted`的多種用法,感興趣的朋友跟隨小編一起看看吧2024-11-11
Vue+ElementUI容器無法鋪滿網(wǎng)頁的問題解決
這篇文章主要介紹了Vue+ElementUI容器無法鋪滿網(wǎng)頁的問題解決,文章通過圖文結合的方式給大家講解的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了VUE使用axios調用后臺API接口的方法，文中講解非常細致，代碼幫助大家更好的理解和學習，感興趣的朋友可以了解下2020-08-08
vue3提供了 mixins和extends，但是嘗試之后發(fā)現(xiàn)這兩種方法只支持純OptionAPI，設置的data會被識別，但是設置的setup里return 的 reactive，完全無效，setup也沒有被執(zhí)行，這篇文章主要介紹了Vue3實現(xiàn)組件級基類的幾種方法,需要的朋友可以參考下2023-04-04