【vue】当窗口改变时如何强制刷新组件

江海有小舟

已于 2022-02-14 14:06:12 修改

阅读量660

点赞数

文章标签： vue.js javascript 前端

于 2022-02-14 14:04:14 首次发布

本文链接：https://blog.csdn.net/jhyxz/article/details/122922951

版权

本文介绍如何在Vue中利用window.onresize事件监听窗口大小变化，并通过改变组件的key值来实现组件的刷新。核心思路是当窗口宽度变化时，更新key值，强制DOM更新。示例代码展示了如何在组件的created和watch生命周期钩子中实现这一功能。

摘要由CSDN通过智能技术生成

我们假定component为我们需要刷新的组件

<component :key="key"></component>

实现的核心思路是：用window.onresize监听窗口的改变，通过组件key值的改变来强制刷新组件（也可以使用v-if的true和false转换来实现刷新，不过较麻烦，不推荐）
script内容如下：

  export default {
    data() {
      return {
        key: 0,
        clientWidth : 0,//窗口宽度
      }
    },
    created() {
      this.watchWidth();//组件一创建便开始监听width的变化并记录到clientWidth中
  },
  	watch: {
      clientWidth() {
        this.key++;//当窗口宽度变化时，增加key值，从而刷新dom
    },
  },
    methods: {      
      watchWidth() {//监听窗口的宽度，一旦窗口变化，就记录clientwidth
        const that = this;//保证指向Vue而不是window
        window.onresize = function () {
          that.clientWidth = document.documentElement.clientWidth;
      };
    },
    }
  }