TL;DR

給data添加新屬性的時候vm.$set(vm.info,'newKey','newValue')
data上面屬性值是數組的時候，需要用數組的方法操作數組，而不能通過index或者length屬性去操作數組，因為監聽不到屬性操作的動作。

安裝和初使用vue

vue是構建用戶界面的漸進式框架。所謂的漸進式：vue + components + vue-router + vuex + vue-cli可以根據需要選擇相應的功能。
來串命令mkdir vue-apply;cd vue-apply;npm init -y;npm i vue。
來一個html文件如下，瀏覽器瞄下~，瀏覽器控制臺vm.msg=0再看下

 <div id="app">{{msg}}</div>  <script src="node_modules/vue/dist/vue.js"></script>  <script>  let vm = new Vue({    el:'#app',    // template加上之后會替換掉#app這個標簽    // template:'<h1>en</h1>',    data:{msg:'msg'}  })  vm.msg = 'msg'  </script>

說說mvvm mvc

mvc其實是model view Model傳統所有邏輯在controller,難以維護。用戶輸入 => 控制器 => 數據改變，如果數據變了需要獲取dom，操作屬性，再渲染到視圖上。

mvvm其實是model view viewModel數據變化驅動視圖。數據變了，不需要你獲取dom，然后改變dom的內容。這邊數據變了，vm負責監聽，視圖那邊自動發生變化。最明顯的是不需要document.querySelector之類的了。

vm的實質

上面說了vm負責讓數據變了，視圖能自動發生變化。這么神奇魔術背后的原理是Object.defineProperty。其實就是屬性的讀取和設置操作都進行了監聽，當有這樣的操作的時候，進行某種動作。來一個demo玩下。

// 對obj上面的屬性進行讀取和設置監聽let obj = {    name:'huahua',    age:18  }  function observer(obj){    if(typeof obj === 'object'){      for (const key in obj) {        defineReactive(obj,key,obj[key])      }    }  }  // get的return的值才是最終你讀取到的值。所以設的值是為讀取準備的。  // set傳的參數是設置的值，注意這里不要有obj.name = newVal 這樣又觸發set監聽，會死循環的。  function defineReactive(obj,key,value){    Object.defineProperty(obj,key,{      get:function(){        console.log('你在讀取')        // happy的話這邊可以value++，這樣你發現讀取的值始終比設置的大一個，因為return就是讀取到的值        return value      },      set:function(newVal){        console.log('數據更新了')        value = newVal      }    })  }  observer(obj)  obj.age = 2  console.log(obj.age)

在瀏覽器執行的時候，控制臺隨手也可以obj.name="hua1"類似的操作，發現都監聽到了。但是如果更深一步，obj.name={firstname:'hua',lastname:'piaoliang'};obj.name.lastname='o'就不能監聽到屬性修改了。因為并沒有將新的賦值對象監聽其屬性。所以函數需要改進。

需要在defineReactive的第一行加上observer(value)。設置值的時候如果是對象的話，也需要將這個對象數據劫持。同理，set那邊也需要加這行。