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 //无响应
以上是 vue数据更改视图不更新问题----深入响应式原理 的全部内容, 来源链接: utcz.com/z/379054.html