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  //无响应