Vue的this.$set和强制组件重新渲染

 Hygge   2021-05-20 14:00   100 人阅读  0 条评论

image.png

mounted() {
    this.$http.get("product/getCategory").then((res) => {
      // 首次请求获取到分类信息
      this.categoryData = res.data;
      let category = this.categoryData.map((val)=>{
        return val.name;
      });
      // 循环获取各分类下的商品信息
      let promisesCollection = [];
      for (let item of this.categoryData) {
        promisesCollection.push(this.$http.get("product/getProductByCategory?category=" + item.id));
      }
      Promise.all(promisesCollection).then(results => {
        for(let item1 in results){
          this.dataList[category[item1]] = results[item1].data;
        }
      });
    });
  },

当组件的执行生命周期mounted方法时候进去获取数据

但貌似这个axios是异步的,在进行网络请求的时候并没有阻塞页面的渲染

因此导致了数据还没加载到data里,页面就已经渲染完毕了。

使用this.$forceUpdate强制重新渲染

如果要再组件内部进行强制刷新,则可以调用this.$forceUpdate()强制重新渲染组件,从而达到更新的目的。

为了验证上面猜想是不是正确的,在页面上添加一个按钮 写点击事件 让页面重新进行渲染并且打印出此时的数据

<button @click="showdata">点击</button>
export default {
  methods: {
    showdata() {
      this.$forceUpdate();
      console.log(this.dataList);
    },
  }
}

当点击按钮的时候,确实页面渲染出了想要的数据,控制台也进行了打印

image.png

使用this.$set进行赋值

在这里发现已经有了想要的数据,但是view层并没有将该数据更新到界面上。

原因是受JavaScript的限制,Vue.js并不能监听对象属性的添加和删除,因为在vue组件初始化的过程中,会调用getter和setter方法。

所以属性必须是存在data中,视图层才会响应该数据的变化。


解决方案有两种: 

  1. 使用thie.$set(obj,key,val)  |   vue.set(obj,key,value) 进行赋值

原来的代码是直接通过arr[key] = value进行赋值的,更改之后变成了

this.$set(this.dataList,category[item1],results[item1].data);

成功解决了问题


2. 通过Object.assign(target,sources)方法

这种方式嘛 不太会,使用了也没生效..不研究啦

出处:

https://blog.csdn.net/hhkongbai/article/details/101022019


本文地址:https://blog.lisok.cn/post/44.html
版权声明:本文为原创文章,版权归 Hygge 所有,欢迎分享本文,转载请保留出处!

 发表评论


表情

还没有留言,还不快点抢沙发?