vue中computed 和 watch有什么區(qū)別，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括柏鄉(xiāng)網(wǎng)站建設(shè)、柏鄉(xiāng)網(wǎng)站制作、柏鄉(xiāng)網(wǎng)頁制作以及柏鄉(xiāng)網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，柏鄉(xiāng)網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到柏鄉(xiāng)省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

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

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

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方法來實(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 來寫

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

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

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

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

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

1. setter 方法在設(shè)置值是觸發(fā)。

2. 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í)來執(zhí)行異步操作，這時(shí)watch是非常有用的。

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。

標(biāo)題名稱：vue中computed和watch有什么區(qū)別
網(wǎng)站URL：http://www.chinadenli.net/article36/geiipg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、移動(dòng)網(wǎng)站建設(shè)、App設(shè)計(jì)、企業(yè)網(wǎng)站制作、靜態(tài)網(wǎng)站、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)