vue数据更改视图不更新问题----深入响应式原理

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

回到顶部