關於Vue中data、methods、computed、watch、directives 的注意點

1.data
1.1 當將Vue 實例外聲明的屬性賦值給data 中的屬性，二者變量名相同時，data 中的屬性能夠簡寫，如:
var items = [1, 2, 3]; 賦值data 中的items 時能夠這樣寫:

data(){
  return{
    items,  //此處的簡寫爲es6 中的語法
    msg:"外界如何獲取data 中的數據"
  }
}

1.2 Vue 實例外獲取data 屬性時有兩種方法，
方法一: var msg = vm(Vue 實例名).$data.msg;
方法二: var msg = vm.msg;
而Vue 實例內獲取data 內的變量時寫法爲this.msg，而且data 中的變量不能相互引用。

2.methods
2.1 函數沒有緩存，每次調用都會從新執行一次，只支持單項綁定，當輸入框v-model 綁定函數時，不可修改輸入框中的值。
2.2 函數傳入當前對象的兩種狀況，
狀況一: 當只要傳入元素自己時，

<button v-on:click="say($event)">say hi</button>
methods:{
  say:function(event){
     console.log(e.currentTarget);
  }
}

或者

<button v-on:click="say">say hi</button>
methods:{
  say:function(event){
     console.log(e.currentTarget);
  }
}

這取決於函數後面是否帶()括號。
狀況二: 當須要傳入參數或傳入參數和元素自己時

<button v-on:click="say('hi',$event)">say hi</button>
methods:{
  say:function(message,e){
     alert(message);
     console.log(e.currentTarget);
  }
}

3.computed
3.1 computed 有緩存，只有綁定的變量發生變化時纔會調用。
3.2 使用computed 進行雙向綁定時get 函數和set 函數用法：

sum:{
      get:function(){        綁定數據變化時調用
        console.log("計算屬性執行");
        return (this.englishScore-0) + (this.mathScore-0);
      },
      set:function(newValue){    計算屬性變化時調用
        let equalVal = newValue / 2;
        this.englishScore = equalVal;
        this.mathScore = equalVal;
      }
    }

當get 函數中監聽的變量englishScore 或mathScore 變化時get 函數調用。由於緩存的緣由，get 函數第一次調用時console.log("計算屬性執行") 會執行，以後get 函數再執行時console.log("計算屬性執行") 將不會再執行。
當sum 的值發生改變時set 函數執行，set 函數中傳入的參數爲sum 改變後的值，能夠再set 函數中對相關屬性進行操做。

4.watch
4.1 當watch 中監聽對象爲對象數組時，正常只會監聽數組中對象數量的改變。若是再數組中某個對象的屬性發生改變時須要使用deep 深度監聽:

lists:{
      handler: function(newValue, oldValue){    //回調函數
        //數組變化時，將數據保存到本地
        itemStorage.save(newValue);
      }    ,
      deep:true
    }

lists 爲被監聽的對象數組，handler 爲監聽對象改變時執行的操做，此時deep:true 執行深度監聽。
回調函數 handler: function(newValue, oldValue) 中第一個參數爲監聽對象的變化後值，第二個參數爲變化前的值。

5.directive
5.1 全局指令
全局指令能夠在多個Vue 管理的路口下使用，定義指令名時不能加" v- "，而在元素上調用指令時須要加" v- "。

Vue.directive("指令名", {
  bind:function(el, binding){
    el.style.color = binding.value.輸入的對象屬性名;    
  }
  inserted:function(el, binding){
    //將傳入的內容轉爲大寫
    el.innerHTML = binding.value.toUpperCase();  
  }
})

通常對樣式style 的操做在bind 中，bind 函數只初始化一次。通常對互動js 的操做在inserted 中，inserted 也是隻調用一次。注意: 在v-指令名=" "中傳入數據，要使用自定義指令傳入的數據須要從binding.value 中獲取。