【deepseek解决不了的问题】vue2响应式数据在视图改变后被无感置空

问题描述

在 Vue2 开发过程中，遇到了一个关于数据监听和视图渲染的问题。在这段代码中，btnList 和 moreActionsList 只有在
config 发生变化时才会更新。当页面窗口大小发生变化时，config 和 btnList 都没有监听到数据变化，但是btnList
被清空了，而 config 的数据还在，视图无法正确展示。以下是相关的 watch 代码：

watch: {
  // 监听 config 数据变化，更新 btnList 和 moreActionsList
  config: {
    handler(newVal) {
      console.log(newVal, 'config watch');
      const newConfig = cloneDeep(newVal);
      const showList = newConfig?.filter(e => !e.hide);
      
      if (!showList || !showList?.length) {
        this.btnList = [];
        this.moreActionsList = [];
        return;
      }

      if (showList?.length <= this.maxButtonNum) {
        this.btnList = showList;
        this.moreActionsList = [];
      } else {
        this.btnList = showList.slice(0, this.maxButtonNum);
        this.moreActionsList = showList.slice(this.maxButtonNum);
      }
    },
    deep: true
  }
}

问题原因

当窗口大小变化时，页面的视图并没有触发更新，导致 config 和相关数据没有被重新计算。此时，btnList 和 moreActionsList 被错误地清空，而没有进行更新，从而导致它们为空数组，无法正确显示。
但是确实是没监听到变化，不太清楚是什么原因

解决方案

将 watch 中的逻辑封装成一个独立的方法，并在 mounted 生命周期钩子中调用该方法。这样可以确保在页面加载或窗口变化时，btnList 和 moreActionsList 能够重新渲染。

• 步骤一：将 watch 逻辑封装成一个独立的方法

我们可以将 handler 方法中的逻辑提取成一个方法，方便在页面加载时和窗口变化时都能够触发该方法进行更新。

methods: {
  updateButtonList(config) {
    //--源watch中逻辑
  }
}

• 步骤二：在 mounted 生命周期钩子中调用该方法

在 mounted 中调用该方法，可以确保组件加载时就会执行一次渲染，从而防止 btnList 和 moreActionsList 被清空。

mounted() {
  this.updateButtonList(this.config);
}

这样，我们就确保了在 config 数据发生变化时，btnList 和 moreActionsList 会得到正确的更新，而且在页面加载时，数据也能够被正确渲染。