vue数据更新但视图（DOM）不刷新解决办法

本文介绍: 对此有什么疑问或者其它前端面临的问题都可以来欢迎评论在下知道的定会帮你回答希望能够帮到你 (#^.^#)第二种：vue.$set(要操作的对象或数组, 对象 key/索引, 修改后的值)第三种： vue.$for ceUp date()第一种：强制更新 dom； vue 数据更新但视图不刷新解决办法

第一种：强制更新 dom

&lt;div v-if="isTrue"&gt;{{num}}&lt;/div&gt;
data(){
    return {
        isTrue: true,
        num: 0
    }
}
aa () {
    this.isTrue = false // 强制刷新视图
    this.num++
    this.isTrue = true // 强制刷新视图
}

第二种：vue.$set(要操作的对象或数组, 对象 key/索引, 修改后的值)


// vue.$set 修改对象或数组的数据主要是添加响应式getter和setter让其拥有数据响应的特性
// this.$set( target, propertyName/index, value ) 
// vue 中this及vue


// 例子1： 比如修改name值没有生效

this.form.name = "111"  // 等同于 ==&gt;
const name = "111"
this.$set(this.form, 'name', '111')
// 或
this.$set(this.form, 'name', name)


// 例子2：修改数组
let arr =[{name: "name1", sex: "男"},{name: "name2", sex: "男"}]

this.$set(arr, 1, {name: "name2", sex: "女"})

第三种： vue.$forceUp date()


// 赋值之后强制更新视图

如
aa () {
    this.form = {
                    a: 'a',
                    b: 'b'
                }
    // 但是dom没有发生变化 数据赋值之后加上
    this.$forceUpdate()
}