看到這個(gè)標(biāo)題就知道這篇文章接下來(lái)要講的內(nèi)容，我們?cè)谑褂胿ue的時(shí)候methods、watch、computed這三個(gè)特性一定經(jīng)常使用，因?yàn)樗鼈兪欠浅５挠杏?，但是沒(méi)有徹底的理解它們的區(qū)別和各自的使用場(chǎng)景，也很難用好它們，希望接下來(lái)的介紹為你答疑解惑。

computed

我們先來(lái)看計(jì)算屬性:computed，光看名字也知道是用來(lái)干什么的，計(jì)算屬性當(dāng)然是用來(lái)計(jì)算的，但是是怎么計(jì)算的呢？計(jì)算屬性有兩個(gè)顯著的特點(diǎn)：

• 計(jì)算屬性計(jì)算時(shí)所依賴的屬性一定是響應(yīng)式依賴，否則計(jì)算屬性不會(huì)執(zhí)行
• 計(jì)算屬性是基于依賴進(jìn)行緩存的，就是說(shuō)在依賴沒(méi)有更新的情況，調(diào)用計(jì)算屬性并不會(huì)重新計(jì)算，可以減少開(kāi)銷

我們來(lái)看一個(gè)相關(guān)的例子：

<div id="app">
 <div>{{ arr.join('') }}</div>
 <div>{{ arr1 }}</div>
 <div>{{ getDate }}</div>
 <div>{{ getDate1 }}</div>
</div>

var app = new Vue({
 el: '#app',
 data: {
  date: '',
  arr: ['a', 'b', 'c']
 },
 computed: {
  getDate () {
   return Date.now()
  },
  getDate1 () {
   return this.date
  },
  arr1 () {
   return this.arr.join('')
  }
 },
 created () {
  setInterval(() => {
   this.date = Date.now()
  }, 1000)
 }
})

看上面的例子，我們?cè)趯?xiě)vue的時(shí)候，經(jīng)常會(huì)碰到要對(duì)data的值進(jìn)行操作的情況，為了方便，總是會(huì)有人直接在模版中對(duì)data的值進(jìn)行計(jì)算操作，就像我上面例子中寫(xiě)的在模版中將數(shù)組轉(zhuǎn)化為字符串，這樣寫(xiě)有問(wèn)題嗎？語(yǔ)法沒(méi)有問(wèn)題，但是在模版中使用太多的計(jì)算，維護(hù)會(huì)是個(gè)問(wèn)題，換個(gè)人來(lái)看代碼的時(shí)候會(huì)很痛苦，這種寫(xiě)法就好像在html中插入js的邏輯運(yùn)算，可維護(hù)性極差。另外一個(gè)展示的就是computed的響應(yīng)式依賴的問(wèn)題，當(dāng)我們調(diào)用getDate的時(shí)候返回的Date.now()返回的是一個(gè)非響應(yīng)式的依賴因此getDate返回的值不會(huì)變。

應(yīng)用場(chǎng)景

看了computed的特點(diǎn)之后，那么它的應(yīng)用場(chǎng)景是什么呢？個(gè)人看法，但不限于以下場(chǎng)景：

• 復(fù)雜的渲染數(shù)據(jù)計(jì)算，用computed計(jì)算屬性可以減少一定計(jì)算開(kāi)銷，增加可維護(hù)性
• 從Vuex Store中收集相關(guān)信息，對(duì)Vuex中的數(shù)據(jù)做計(jì)算的時(shí)候的要特別注意computed的緩存屬性，在對(duì)Vuex中的對(duì)象值進(jìn)行屬性修改的時(shí)候，并不會(huì)觸發(fā)computed的中值的變化，這時(shí)需要Object.assign({},obj)對(duì)依賴對(duì)象進(jìn)行跟新返回一個(gè)新對(duì)象觸發(fā)依賴跟新
• 表單校驗(yàn)，這個(gè)應(yīng)用場(chǎng)景應(yīng)該是比較常見(jiàn)的，利用正則表達(dá)式對(duì)每個(gè)表單項(xiàng)的實(shí)時(shí)監(jiān)控，判斷表單是否可以提交

methods

methods大家應(yīng)該都會(huì)用，是vue中的方法屬性，所有的方法調(diào)用都會(huì)寫(xiě)到這里面，大家用的最多也是在累似@click這樣事件調(diào)用中使用，但是很多人都忽視methods的另一個(gè)用法，就是在模版中使用methods，下面來(lái)看一個(gè)例子：

<div id="app">
 <div v-for="(item, idx) in arr">
  {{ matching(item) }}
 </div>
</div>

var app = new Vue({
 el: '#app',
 data: {
  arr: ['a', 'b', 'c'],
  obj: {a: 'hello', b: 'world'}
 },
 methods: {
  matching (key) {
   if (this.obj[key]) {
    return this.obj[key]
   } else {
    return 'not found'
   }
  }
 }
})

上面的例子就是methods在模版中常常使用的一個(gè)場(chǎng)景，當(dāng)模版中的某個(gè)循環(huán)的值需要進(jìn)行一定邏輯運(yùn)算時(shí)，這時(shí)候你就可以使用methods方法，將對(duì)應(yīng)的值傳入，然后計(jì)算出結(jié)果返回到模版顯示，這個(gè)時(shí)候用computed是沒(méi)法實(shí)現(xiàn)的，computed中你無(wú)法傳參，methods和computed除了這個(gè)不一樣之外，還有就是在methods中的計(jì)算是不會(huì)做緩存的，也就是你調(diào)用多少次就會(huì)計(jì)算多少次，相對(duì)computed的開(kāi)銷要大一些。

watch

偵聽(tīng)屬性是專門(mén)用來(lái)觀察和響應(yīng)vue實(shí)例上的數(shù)據(jù)變動(dòng)，能使用watch屬性的場(chǎng)景基本上都可以使用computed屬性，而且computed屬性開(kāi)銷小，性能高，因此能使用computed就盡量使用computed屬性，那么watch屬性是不是就沒(méi)用武之地了呢？當(dāng)執(zhí)行異步操作的時(shí)候你可能就必須用watch而不是computed了，下面看一個(gè)例子：

<div id="app">
 <div>{{ obj1.a }}</div>
</div>

var app = new Vue({
 el: '#app',
 data: {
  obj: {a: 'hello'},
  obj1: {a: 'hello'},
  test: 'aaa'
 },
 computed: {
  getObj () {
   setTimeout(() => {
    this.obj.a = this.test + 'word'
    return this.obj
   }, 1000)
  }
 },
 watch: {
  test () {
   setTimeout(() => {
    this.obj1.a = this.test + 'word'
   }, 1000)
  }
 },
 mounted () {
  this.test = 'hello'
 }
})

上述例子中，當(dāng)在模版中調(diào)用getObj.a時(shí)，如果沒(méi)有setTimeout這異步操作，直接返回一個(gè)值是可以直接在模版中顯示的，但是由于加異步操作就會(huì)導(dǎo)致沒(méi)有返回值同時(shí)調(diào)用對(duì)象的屬性，就會(huì)報(bào)錯(cuò)，而調(diào)用obj1.a卻不一樣，模版會(huì)先顯示hello，然后在觸發(fā)了watch屬性時(shí)，setTimeout觸發(fā)，一秒鐘之后模版會(huì)顯示helloword，這就watch中可以使用異步函數(shù)，而computed不行的原因

總結(jié)

希望看了這篇文章能對(duì)你區(qū)分methods、computed、watch的用法能有所幫助。

這篇文章如果有錯(cuò)誤或不嚴(yán)謹(jǐn)?shù)牡胤?，歡迎批評(píng)指正，如果喜歡，歡迎點(diǎn)贊收藏

最新評(píng)論