動態(tài)添加的屬性不是響應(yīng)式的

（對于被Object.defineProperty修飾過的屬性可以成為響應(yīng)式屬性。）
如果要向響應(yīng)式對象中添加一個響應(yīng)式的屬性，且觸發(fā)視圖更新。
想要？如下：

//Vue無法探測普通的新增屬性
this.myObject.newProperty = 'hi'

//破解方法 vm.$set(target, key, value)
this.$set(this.MyObject, 'newProperty', 'hi)

或

Vue.set(this.MyObject, 'newProperty', 'hi')

變異方法

變異方法（mutation method），會改變被這些方法調(diào)用的原始數(shù)組。
push()
pop()
shift()
unshift()
sort()
reverse()
調(diào)用以上變異方法的時候，會觸發(fā)視圖更新。

對應(yīng)的，也有非變異方法（non-mutating method）
filter()
concat()
slice()
這些方法不改變原始數(shù)組，但是會返回一個新數(shù)組。

如果利用索引設(shè)置一個項，Vue是檢測不到改動的。破解方法參考以上動態(tài)添加屬性。

監(jiān)聽器

vue實例提供了一個watch屬性，用于監(jiān)聽vue實例中屬性的變化。

<script>
  var vm = new Vue({
    el:'...',
    data:{...},
    //watch對應(yīng)了一個屬性
    watch:{
      //msg:鍵，觀察的屬性
      //funtion:值，對應(yīng)的回調(diào)函數(shù)
      msg:function(value, [oldvalue]){
        ...
      }
    }

  })
</script>

如果要監(jiān)視一個對象中內(nèi)部屬性的改變，需要加上deep:true屬性，否則vue無法監(jiān)聽到內(nèi)部值的變化。

watch:{
  user:{
    deep:true,
    hander:funtion(curr, old){
      ...
    }
  }
}

添加immediate屬性表示立馬進行監(jiān)聽。

計算屬性

當(dāng)計算屬性依賴的數(shù)據(jù)發(fā)生改變時，計算屬性會重新計算一次，如果計算屬性依賴的屬性沒有發(fā)生改變，那么計算屬性就不會重新計算。

var vm = new Vue({ 
  el: '#app', 
  data: { n1:'', n2:'' }, 
  //n3依賴與n1和n2的值，當(dāng)n1 和 n2發(fā)生改變的時候，這個函數(shù)就會執(zhí)行。 
  //返回值就是n3的值 
  computed: { 
    n3(){ 
      return +this.n1 + +this.n2; 
    } 
  } 
});

計算屬性是基于它們的依賴項進行緩存的，即上例中n3基于n1和n2進行了緩存，如果n1和n2的值沒有發(fā)生改變，那么多次訪問n3時，計算屬性會返回之前的的計算結(jié)果，而不會再執(zhí)行函數(shù)。
計算屬性不能和data中的屬性同名，因為無論是data屬性還是計算屬性，最終都是掛載到vm上的。

計算屬性默認(rèn)只有g(shù)etter,不過在需要是可以自己設(shè)置一個setter

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}