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

 

 

 

 

转载于:https://www.cnblogs.com/wfblog/p/10544303.html