建设山东公司网站优化设计三要素
问题描述
在 Vue2 开发过程中，遇到了一个关于数据监听和视图渲染的问题。在这段代码中，btnList 和 moreActionsList 只有在
config 发生变化时才会更新。当页面窗口大小发生变化时，config 和 btnList 都没有监听到数据变化，但是btnList
被清空了，而 config 的数据还在，视图无法正确展示。以下是相关的watch代码：
watch: {// 监听 config 数据变化，更新 btnList 和 moreActionsListconfig: {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 会得到正确的更新，而且在页面加载时，数据也能够被正确渲染。