計算屬性 computed

簡單模板的表達(dá)式無法完成的業(yè)務(wù)可以通過計算屬性來完成，任何復(fù)雜邏輯，都應(yīng)當(dāng)使用計算屬性。

HTML部分：

<div id="app">
   {{msg.toUpperCase().split('').reverse().join('')}}
</div>

JS部分

new Vue({
  el:"#app",
  data:{
    msg:"hello vue"
  }
})

顯示效果

EUV OLLEH

在模板中放入太多的邏輯會讓模板過重且難以維護(hù)
所以在這個地方 應(yīng)當(dāng)使用計算屬性

如下
HTML部分：

<div id="app">
    {{reversed}}//調(diào)用
</div>

JS部分

new Vue({
  el:"#app",
  data:{
    msg:"hello vue"
  },
  computed: {
    reversed(){
      return this.msg.toUpperCase().split('').reverse().join('')
    }
  }
})

顯示效果

EUV OLLEH

計算屬性具有依賴性，所依賴的屬性發(fā)生改變時，計算屬性就會發(fā)生改變，所依賴的屬性沒改變時，計算屬性不會發(fā)生改變。首次運行時會也發(fā)生改變。

偵聽器 watch

雖然計算屬性在大多數(shù)情況下更合適，但有時也需要一個自定義的偵聽器。當(dāng)需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時，這個方式是最有用的。相比計算屬性需要多添加一個初始變量。
HTML部分：

  <div id="app">
   <input type="text" v-model='pwd' placeholder="請輸入密碼">
   {{tip}}//調(diào)用
  </div>

JS部分

new Vue({
  el:"#app",
  data:{
    pwd:"",
    tip:""
  },
  watch: {
    pwd(newVal,oldVal){
        if(newVal===""){
          this.tip="密碼不能為空"
        }else if(newVal.length<6||newVal.length>16){
          this.tip="密碼應(yīng)該6-16位"
        }else{
          this.tip="密碼可用"
        }
      } 
  }
})

在首次打開時，watch不會被運行，所以不會顯示密碼不能為空的提示語。在表單內(nèi)輸入數(shù)據(jù)后才會運行watch并更改元數(shù)據(jù)。

計算屬性與偵聽器的區(qū)別

計算屬性 在頁面初次渲染時直接運行 調(diào)用時直接在模板中渲染 對數(shù)據(jù)有依賴性
偵聽屬性 在頁面初次渲染時不運行 在修改數(shù)據(jù)后才執(zhí)行 調(diào)用的時候需要更改元數(shù)據(jù)