Vue3.0踩坑笔记

监听路由变化

踩坑：由于route.path是异步获取当前path,导致页面刷新并不能保持menus正确的active。 解决方案：使用watch监听当前path，可拿到最新的path

代码语言：javascript复制

1    const selectedKeys = ref([]);
2
3    // 监听路由变化,更新menus当前选中
4    watch(
5      () => route.path,
6      (newVal) => {
7        selectedKeys.value = [newVal];
8      }
9    );

v-for的解构

代码语言：javascript复制

1 <a-doption v-for="{ type, status, handle, title } in data"
2        ><a-button
3          :type="type || "primary""
4          :status="status"
5          @click="handle(record)"
6          >{{ title }}</a-button
7        >
8      </a-doption>

ref如果绑定给modal里的元素，是异步绑定的

问题：由于modal默认关闭。里面的元素也就没有渲染，导致ref还是null的绑定状态，即使打开modal也不能立刻绑定上ref

解决方式：通过包裹定时器获取ref，转为异步，在modal展开时，就会先去绑定ref，后执行定时器里的逻辑

代码语言：javascript复制

1const handleWrite = (record) => {
2      data["modalVisible"] = true;
3      if (record)
4        setTimeout(() => {
5          formRef.value.setValue(record);
6          data.articleId = record.id;
7        });
8    };

echarts到生产环境bug

生产环境echarts第一次渲染没问题，一旦切到其他路由再切回来就不渲染了，本地就没有这个问题。。

通过检查dom发现虽然组件第二次重新渲染时，第一次组件渲染生成的echarts实列依然存在（未销毁）导致第二次组件渲染但是echarts无法成功渲染展示

解决方案：在组件挂载时先提前销毁所有echarts实例。

代码语言：javascript复制

1onMounted(() => {
2  echarts.init(document.querySelector("#allEcharts")).dispose();
3  echarts.init(document.querySelector("#categoryEcharts")).dispose();
4})

未完待续

渲染

0 人点赞