vue數據更改視圖不更新問題----深刻響應式原理

一、參考：http://www.cnblogs.com/YuKiee/p/9681151.html（推薦這個）  或  http://www.javashuo.com/article/p-vwbnkepz-md.html

　　注意：數據更改視圖不更新問題   是不考慮 mounted 生命週期 以前的 數據變化的。由於 mounted 以前的狀態，還沒有開始 DOM 編譯，因此是根據數據進行同步顯示的。

二、只有在data裏初始化的數據纔是響應的，Vue不能檢測到對象屬性的添加或刪除，沒有在data裏聲明的屬性不是響應的。

　　即在視圖中是不會同步顯示 非初始化的數據改變的。 須要經過 Vue.set接口寫進去才能夠實現響應。

<template>
  <div>
    <section>
      <p>動態添加嵌套屬性1：</p>
      <p>a的值{{form.a}}</p>
      <p>b的值{{form.b}}</p>
      <button @click="changeA">改變A</button>
      <button @click="changeB">改變B</button>
    </section>
  </div>
</template>
<script>
export default {
    data () {
        return {
          form: {
            a: ''// 初始化
          }
        }
    },
    methods: {
      changeA () {
          this.form.a = 1
        },
        changeB () { 
            this.form.b = 'desc' // 無效,這裏的 this.form.b 在 data 中沒有初始化。因此視圖沒法同步變化
        }
    }
}
</script>

這裏注意：雖然 vue 不能檢測到 this.form.b 屬性的添加，而引發視圖的變化，可是實際 內存中是給 this 對象添加了這個對象的，經過控制檯是能夠打印出來的。

三、在data裏初始化的數據，給他 賦的 值是 一個多層對象，也是能夠實現響應的。（這種使用，將 調接口返回的數據 賦值給一個data對象中，能夠節省多個data數據初始化）

<template>
  <div>
    <section>
      <p>動態添加嵌套屬性1：</p>
      <p>a的值{{form.a}}</p>
      <p>b的值{{form.b}}</p>
      <button @click="changeA">改變A</button>
      <button @click="changeB">改變B</button>
    </section>
  </div>
</template>
<script>
export default {
    data () {
        return {
          form: '' // 初始化
        }
    },
    methods: {
      changeA () {
          this.form = { // 先給 form（已初始化）賦值，以後改變 form 裏面的 屬性都是響應的
              a: '1',
              b: '5'
          }
        },
        changeB () { 
            this.form.b = 'desc' // 有效，這裏 的 this.form.b 一樣具備響應功能
        }
    }
}
</script>

四、數組渲染問題 ： 兩種方式改動數組時，Vue檢測不到變更：1.利用索引直接設置一個項；2.修改數組長度。

　 參考：http://www.cnblogs.com/YuKiee/p/9681151.html

 

 

 

總結：三種狀況 設置 data 的數據不能 實現響應。 

　　　 一、對象  沒有 初始化的屬性 設置值。

　　    二、數組  經過  索引  設置值 。

　　　 三、數組  修改 數組長度的方法 改變數組。   如： this.trees.length = 2  //無響應