1.計算屬性

（a）基本用法

關鍵詞：cumputed

說一下：在模板中放入太多的邏輯會讓模板過重且難以維護，為了使得計算清晰明瞭，計算屬性就誕生了

小技巧：1.依賴其他計算屬性（計算屬性函式相互間使用）；2.vue例項間的依賴（資料的想通相變）

<div id="app">
  <p>原始字串: {{ str }}</p>
  <p>反轉字串: {{ renderStr }}</p>
</div>
 
<script>
var vm = new Vue({
  el: '#app',
  data: {
    str: '丫頭'
  },
  computed: {
    renderStr: function () {
      return this.message.split('').reverse().join('')
    }
  }
})
</script>
 

（b）比較methods定義的函式

1.效果相同，都是定義函式的地方；

2.computed依賴例項的快取變則變，methods只要重渲染函式總會重新呼叫；

3.computed效能會好些，自己管自己不用擔心影響到其他；

（c）計算屬性的setter（設定器）

預設為getter，如需setter需要進行配置（其實用的上setter的機會並不多，也不提倡用）

var vm = new Vue({
  el: '#app',
  data: {
    name: '丫頭'
  },
  computed: {
    site: {
      get: function () {
        return this.name
      },
      set: function (newValue) {
        this.name = newValue
      }
    }
  }
})

// 呼叫 setter， vm.name會被對應更新
vm.site = '新欄位';
 

2.監聽屬性

（a）基本用法

關鍵字：watch

說一下：此屬性用來響應資料的變化，適當場景用的還是很頻繁的

<div id = "app">
    <p>計數器: {{ counter }}</p>
    <button @click = "num++">點我</button>
</div>

<script>
var vm = new Vue({
    el: '#app',
    data: {
        num: 1
    }
});
vm.$watch('num', function(nval, oval) {
    alert('計數器值的變化 :' + oval + ' 變為 ' + nval + '!');
});
</script>
 

（b）使用場景

1.基礎監聽：60分以下不及格；60分-85分良好；85分以上優秀

<div id="app">
  分數：<input type="number" v-model="achievement"><br>
  提示：<span> {{infoMsg}} </span>
</div>
 
<script>
new Vue({
    el:"#app",
    data:{
        achievement:"",
        infoMsg:""
    },
    watch:{
        achievement:function(newVal,oldVal){
           if(newVal<60){
               this.infoMsg="不及格"
           }else if(newVal>60 && newVal<85){
               this.infoMsg="良好"
           }else{
               this.infoMsg="優秀"
           }
        }
    }
})
</script>

2.進階監聽：後臺傳值，且值藏在內部（非data的直接子資料）

注意：1.不可用箭頭函式，因其this指向不是vue例項；2.新添屬性deep，意為深度監聽

<div id="app">
  分數：<input type="number" v-model="info.achievement"><br>
  提示：<span> {{infoMsg}} </span>
</div>
 
<script>
new Vue({
    el:"#app",
    data:{
        info:{
            achievement:"",
        }
        infoMsg:""
    },
    watch:{
        info:{
            handler:function(newVal,oldVal){
               if(newVal.achievement<60){
                   this.infoMsg="不及格"
               }else if(newVal.achievement>60 && newVal.achievement<85){
                   this.infoMsg="良好"
               }else{
                   this.infoMsg="優秀"
               }
            },
            deep:true
        }
     }
})
</script>

3.高階監聽：後臺傳值，且內部數值對有好多

<div id="app">
  分數：<input type="number" v-model="info.achievement"><br>
  提示：<span> {{infoMsg}} </span>
</div>
 
<script>
new Vue({
    el:"#app",
    data:{
        info:{
            achievement:"",
            age:"",
            name:"",
            city:""
        }
        infoMsg:""
    },
    computed:{
        getAchievement:function(){
            return this.info.achievement
        }
    },
    watch:{
        getAchievement:{
            handler:function(newVal,oldVal){
               if(newVal<60){
                   this.infoMsg="不及格"
               }else if(newVal>60 && newVal<85){
                   this.infoMsg="良好"
               }else{
                   this.infoMsg="優秀"
               }
            },
            deep:true
        }
    }
})
</script>

前端工作不好做，具有耐心不用說。

加油學習別放棄，勤奮就是可補拙。