个人小站-记录编程知识

在Vue中，通常有一种使用场景，就是在某个组件加载的时候，通过在js中改变某一个属性的值，然后利用这个属性的值对页面中的模板做一些操作，例如：控制某个标签展示或者不展示，或者控制模板页面中的某个按钮是否可以点击等。但是有时候，变量值修改了，但是模板却未刷新，这是因为数据和模板没有同时更新，可能模板已经渲染完毕数据才发生变化，本篇文章将介绍如何解决这个问题。

温馨提示：本博客已经发布小程序，可在微信小程序中搜索”百变码农”，手机上也能看！

1、示例代码

例如如下代码，需要根据show的值来控制div是否展示。

<template>
    <div>
        <div v-if="isShow">aaabbbccc</div>
        <div v-else>dddeeefff</div>
    </div>
</template>
<script>
export default {
  data () {
     return {
      isShow: false
    };
  },
  monted () {
    this.$nextTick(() => {
      if (this.$route.query.type && this.$route.query.type === 1) {
        // 判断路由中query对象中的type字段是否为1，为1则展示aaabbbccc
        this.isShow = true;
      }
      console.log(this.isShow);
      // 加载本组件中的其他数据
      this.loadPageData();
    });
  }
}
</script>

现象：在控制台打印出来的this.isShow已经变为false了，但是template模板中仍然显示的是dddeeefff，数据改变之后，模板没有重新渲染。

正常如果只加载该组件，一般不会出现这种现象，该现象在带有一些步骤的多个组件中，点下一步，然后回退到上一步，再点下一步的时候，可能页面就不会重新渲染了。

2、解决办法

利用Vue中的this.$forceUpdate()方法强制当前组件重新进行dom节点的渲染，修改之后的代码如下：

// 模板代码略...同上
<script>
export default {
  data () {
    return {
      isShow: false
    };
  },
  monted () {
    this.$nextTick(() => {
      if (this.$route.query.type && this.$route.query.type === 1) {
        // 判断路由中query对象中的type字段是否为1，为1则展示aaabbbccc
        this.isShow = true;
      }
      console.log(this.isShow);
      // 强制重新渲染当前组件中的dom节点.
      this.$forceUpdate();
      // 加载本组件中的其他数据
      this.loadPageData();
    });
  }
}
</script>

加上如上橘色标注的代码this.$forceUpdate()即可解决改问题。

温馨提示：如果小程序端代码显示混乱，是因为移动端兼容性导致，可移步至PC端站点查看！

文章属于原创，如果转发请标注文章来源：个人小站【www.jinnianshizhunian.vip】

另外提供一些优秀的Java架构师及IT开发视频，书籍资料。无需注册，无需登录即可下载，免费下载地址：https://www.592xuexi.com