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]
          }
        }
    });

現在我們改變其中的元素值

file