如何解决 asyncio 文件描述符最大数量限制问题

redux基础用法

  返回  

vue页面数据变化不渲染页面

2021/7/21 16:56:23 浏览:

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

缺点:

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

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

  1. this.$set(object,key,value) || Vue.set(vm.object, key, value)
  2. this.$forceUpdate()
  3. Object.assign()
  4. 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()

联系我们

如果您对我们的服务有兴趣,请及时和我们联系!

服务热线:18288888888
座机:18288888888
传真:
邮箱:888888@qq.com
地址:郑州市文化路红专路93号