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

1、參考：http://www.cnblogs.com/YuKiee/p/9681151.html（推薦這個）  或  https://blog.csdn.net/weixin_41767649/article/details/82797373

　　注意：數據更改視圖不更新問題   是不考慮 mounted 生命周期 之前的 數據變化的。因為 mounted 之前的狀態，尚未開始 DOM 編譯，所以是根據數據進行同步顯示的。

2、只有在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 對象添加了這個對象的，通過控制台是可以打印出來的。

3、在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>

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

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

 

 

 

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

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

　　    2、數組  通過  索引  設置值 。

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