vue页面数据变化不渲染页面_图片有值不渲染vue-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43876728/article/details/118970612

本文探讨了Vue中响应式数据渲染的常见问题，如未定义属性导致的视图不更新、性能开销等，并提供了四种解决方案，包括$set、$forceUpdate、Object.assign和处理数组操作。通过实例演示如何解决数据改变但页面不渲染的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue数据渲染条件：响应式的属性必须先定义

缺点：

增加不存在的属性,不能更新视图
多层数据默认会递归创建性能不好
数组中是对象响应，常量不会渲染
修改数组数组和长度不会重新渲染
如果新增的数据vue 也会监控但是必须是对象

数据改变页面不渲染问题解决方案

this.$set(object,key,value) || Vue.set(vm.object, key, value)
this.$forceUpdate()
Object.assign（）
Array

数据更改，页面不渲染问题案例如下：

<template>
  <div id="updata">
    {{message}}    <!-- 空object不会更新 -->
    <button @click="a()">show</button>
  </div>
</template>
<script>
export default {
  name: "updata",
  data() {
    return {
      message: {},
    };
  },
  methods: {
    a() {
      this.message.data = 1;  //添加一个属性
      console.log(this.message); //打印有值 但是页面不渲染更新
    }
  }
};
</script>

解决方式1 this.$set(object,key,value) || Vue.set(vm.object, key, value)

<template>
  <div id="updata">
    {{message}}
    <button @click="a()">show</button>
  </div>
</template>
<script>
export default {
  name: "updata",
  data() {
    return {
      message: {},
    };
  },
  methods: {
    a() {
     this.$set(this.message, "data", 1);
    }
  }
};
</script>

解决方式2 this.$forceUpdate() 强制更新

<template>
  <div id="updata">
    {{message}}
    <button @click="a()">show</button>
  </div>
</template>
<script>
export default {
  name: "updata",
  data() {
    return {
      message: {},
    };
  },
  methods: {
    a() {
     this.message.data = 1;
        this.$forceUpdate();
    }
  }
};
</script>

解决方式3： Object.assign（）

<template>
  <div id="updata">
    {{message}}
    <button @click="a()">show</button>
  </div>
</template>
<script>
export default {
  name: "updata",
  data() {
    return {
      message: {},
    };
  },
  methods: {
    a() {
      this.message = Object.assign({}, this.message, { data: 1 });
    }
  }
};
</script>

解决方式4：针对数组

push()
pop()
shift()
unshift()
splice()
sort()
reverse()