詳解vue中computed 和 watch的異同

更新時(shí)間：2017年06月30日 16:59:38 作者：符允

本篇文章主要介紹了vue中computed 和 watch的異同，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

一、computed 和 watch 都可以觀察頁(yè)面的數(shù)據(jù)變化。當(dāng)處理頁(yè)面的數(shù)據(jù)變化時(shí)，我們有時(shí)候很容易濫用watch。而通常更好的辦法是使用computed屬性，而不是命令是的watch回調(diào)。

這里我直接引用vue官網(wǎng)的例子來(lái)說(shuō)明：

html:

我們要實(shí)現(xiàn) 第三個(gè)表單的值是第一個(gè)和第二個(gè)的拼接，并且在前倆表單數(shù)值變化時(shí)，第三個(gè)表單數(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方法來(lái)實(shí)現(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 來(lái)寫

 new Vue({
    el:"#myDiv",
      data:{
        firstName:"Den",
        lastName:"wang",

      },
      computed:{
        fullName:function(){
          return this.firstName + " " +this.lastName;
        }
      }
  })

很容易看出 computed 在實(shí)現(xiàn)上邊的效果時(shí)，是更簡(jiǎn)單的。

二、詳解 comouted 計(jì)算屬性。

在vue的模板內(nèi)（{{}}）是可以寫一些簡(jiǎn)單的js表達(dá)式的，很便利。但是如果在頁(yè)面中使用大量或是復(fù)雜的表達(dá)式去處理數(shù)據(jù)，對(duì)頁(yè)面的維護(hù)會(huì)有很大的影響。這個(gè)時(shí)候就需要用到computed 計(jì)算屬性來(lái)處理復(fù)雜的邏輯運(yùn)算。

1.優(yōu)點(diǎn)：

在數(shù)據(jù)未發(fā)生變化時(shí)，優(yōu)先讀取緩存。computed 計(jì)算屬性只有在相關(guān)的數(shù)據(jù)發(fā)生變化時(shí)才會(huì)改變要計(jì)算的屬性，當(dāng)相關(guān)數(shù)據(jù)沒有變化是，它會(huì)讀取緩存。而不必想 motheds方法和 watch 方法是的每次都去執(zhí)行函數(shù)。

2.setter 和 getter方法：（注意在vue中書寫時(shí)用set 和 get）

setter 方法在設(shè)置值是觸發(fā)。
getter 方法在獲取值時(shí)觸發(fā)。

computed:{
  fullName:{
  //這里用了es6書寫方法
    set(){
       alert("set");
    },
    get(){
      alert("get");
      return this.firstName + " " +this.lastName;
    },

  }
 }

三、watch 方法

雖然計(jì)算屬性在大多數(shù)情況下是非常適合的，但是在有些情況下我們需要自定義一個(gè)watcher，在數(shù)據(jù)變化時(shí)來(lái)執(zhí)行異步操作，這時(shí)watch是非常有用的。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue?Router路由hash模式與history模式詳細(xì)介紹
Vue?Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，讓構(gòu)建單頁(yè)面應(yīng)用變得易如反掌。路由實(shí)際上就是可以理解為指向，就是我在頁(yè)面上點(diǎn)擊一個(gè)按鈕需要跳轉(zhuǎn)到對(duì)應(yīng)的頁(yè)面，這就是路由跳轉(zhuǎn)
2022-08-08
vue 如何打開接口返回的HTML文件
本文主要介紹了vue 如何打開接口返回的HTML文件，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-01-01
vue打開新窗口并實(shí)現(xiàn)傳參的圖文實(shí)例
這篇文章主要給大家介紹了關(guān)于vue打開新窗口并實(shí)現(xiàn)傳參的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03
Vue3使用v-if指令進(jìn)行條件渲染的實(shí)例代碼
條件渲染是根據(jù)條件的真假來(lái)有條件地渲染元素,在Vue.js 3.x中,常見的條件渲染包括使用v-if指令和v-show指令,本文講解使用v-if指令進(jìn)行條件渲染,需要的朋友可以參考下
2024-03-03
vue中關(guān)于this.refs為空出現(xiàn)原因及分析
這篇文章主要介紹了vue中關(guān)于this.refs為空出現(xiàn)原因及分析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
基于vue通用表單解決方案的思考與分析
這篇文章主要給大家介紹了基于vue通用表單解決方案的思考與分析，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
如何使用Vue3的onMounted鉤子函數(shù)及vue3中onMounted的用法詳解
本文詳細(xì)介紹了Vue3中的`onMounted`鉤子函數(shù)的前世今生,包括其在Vue2中的前身`mounted`鉤子,以及Vue3中使用Composition?API的`onMounted`鉤子的用法,文章涵蓋了`onMounted`的多種用法,感興趣的朋友跟隨小編一起看看吧
2024-11-11
Vue+ElementUI容器無(wú)法鋪滿網(wǎng)頁(yè)的問題解決
這篇文章主要介紹了Vue+ElementUI容器無(wú)法鋪滿網(wǎng)頁(yè)的問題解決,文章通過(guò)圖文結(jié)合的方式給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2024-08-08
VUE使用axios調(diào)用后臺(tái)API接口的方法
這篇文章主要介紹了VUE使用axios調(diào)用后臺(tái)API接口的方法，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下
2020-08-08
Vue3實(shí)現(xiàn)組件級(jí)基類的多種方法
vue3提供了 mixins和extends，但是嘗試之后發(fā)現(xiàn)這兩種方法只支持純OptionAPI，設(shè)置的data會(huì)被識(shí)別，但是設(shè)置的setup里return 的 reactive，完全無(wú)效，setup也沒有被執(zhí)行，這篇文章主要介紹了Vue3實(shí)現(xiàn)組件級(jí)基類的幾種方法,需要的朋友可以參考下
2023-04-04