Vue中你可能認爲是bug的狀況原來是這樣的

前言

咱們知道Vue框架劇本雙向數據綁定功能，在咱們使用方便的同時，還有一些細節問題咱們並不知道，接下來一塊兒探討一些吧

雙向數據綁定

• js變量改變影響頁面
• 頁面改變影響js變量

Vue2是如何作到數據綁定的

Object.defineProperty(obj,key,{
                set:function (newV) {
                    val = newV;
                    // 通知全部用到這個屬性的DOM更新
                    dep.notifyAll();
                },
                get:function () {
                    if (Dep.currentSub) {
                         // 對這個屬性,新訂閱一個元素
                        dep.subscribe(); 
                    }
                    return val;
                }
            });

• 以上須要說的就是: Vue中data函數返回的對象，會通過層層遍歷，最後將全部的對象經過以上方法，把其屬性進行監視。
  • 經過xxx.xxx = 'xxx' 就會觸發set函數
  • 經過xxx.xxx 就會觸發get函數

關於數組與基本數據類型的奇葩現象

咱們聲明好數組，其中放置基本數據類型

let vm = new Vue({
        el:'#app',
        template:`
        <div>
          <p v-for="n in arr" >
            {{n}}
          </p>
        </div>`,
        data(){
          return {
            arr:[1,2,3]
          }
        }
    });

如今咱們改變其中的元素值

• 如圖所見，咱們改變數組中某個元素的值，並未發現頁面改變
  

解答疑問

• 首先咱們知道做爲data的屬性，Vue都會經過for in 來遍歷該對象的全部屬性及子屬性，而後針對每一個屬性進行reactive式的數據劫持。
• 可是當遍歷數組或對象屬性時，若是是非對象數據類型，就以下圖
• 咱們能夠看到在Vue中 對於reactive操做，非對象數據類型是無論的，所以，咱們更改vm.arr[0] = 98沒有效果

想辦法解決

據說有個函數可讓Vue知道你在添加屬性，並完成響應式。Vue.set(obj.key.value);

哇，有效果！！

咱們再來改變他看看是否能雙向數據綁定

哦！ No！看看源碼

看到了嗎？ 基本(原始)數據類型還給個警告！！

往下執行，若是是數組直接結束了，並不作reactive操做哦

總結

以前講解了Vue作數據劫持是基於Object.defineProperty的，可是他只能作set和get，而沒法監視到屬性的增長或者減小，這點卻是能夠用Vue.set(obj.key.value)解決！而數組+基本數據類型不行！ 固然話說回來，真實業務中，直接用數組操做基本數據類型的場景還真很少！