网站开发分页代码,东莞网络推广培训班,汕头推广平台,制作动画的网站项目场景#xff1a;
我在项目里面封装了一个echarts组件#xff0c;组件接收一个来自外部的option,然后我用了一个watch函数去监听这个option的变化#xff0c;option变化之后#xff0c;销毁#xff0c;然后再新建一个charts表
碎碎念
问题如标题所示#xff0c;这篇…项目场景
我在项目里面封装了一个echarts组件组件接收一个来自外部的option,然后我用了一个watch函数去监听这个option的变化option变化之后销毁然后再新建一个charts表
碎碎念
问题如标题所示这篇文章屯了蛮久了其实我也不太记得大概是啥问题了但感觉解决方法挺有意思的暂时就先记录一下吧。记得当时排查问题这个还有个啥其他的问题但是被我解决了
基本上这种类似的问题都可以通过注释或者报错定位慢慢排查错误来源当然浏览器debug也可以不过我对自己的代码比较熟悉而且层级嵌套也不深所以一般用不到debug 解决方案 这里提供两种方案供大家解决 方法1watch 的第一个参数改为 props.option type Prop {option: EChartsOption | null;
};const props definePropsProp();const echarts inject(myInjectionEcharts);
let mycharts;watch(() props.option,() {if (props.option) {window.removeEventListener(resize, mycharts.__resize);echarts.dispose(mycharts);initCharts(props.option);}},
); 方法2将这个props用toRefs包裹之后再把option结构出来watch 去监听这个option
type Prop {option: EChartsOption | null;
};const props definePropsProp();
const { option } toRefs(props);const echarts inject(myInjectionEcharts);
let mycharts;watch(option,() {if (props.option) {window.removeEventListener(resize, mycharts.__resize);echarts.dispose(mycharts);initCharts(props.option);}},
);
理解与排查思路
首先我们要明确watch的使用本来想给大家翻找一下vue3中文文档的笑死今天他好像崩了
watch 的定义如下监视一个或多个反应性数据源并在源发生更改时调用回调函数。
他的第一个参数只能是下面这些 翻译来说 1. 返回一个值的getter方法2.ref 3. reactive 4. 由上面这几种组成的数组
总的来说就是他只监听响应式的数据。
而我之前的错误写法如下
type Prop {option: EChartsOption | null;
};const props definePropsProp();const echarts inject(myInjectionEcharts);
let mycharts;watch(props.option,() {if (props.option) {window.removeEventListener(resize, mycharts.__resize);echarts.dispose(mycharts);initCharts(props.option);}},
);
这个Prop是响应式的好像是类似reactive包裹的一个对象有点不记得了明天我验证一下
而我这个props.option 这个响应式里面的对象是不带响应式的所有可以用到如官网所示的一种方法把他变成一个getter的写法 而第二种则是借助到 toRefs()
toRefs() 批量处理对象中的所有属性,第一层变成响应式 toRef() 需要传参且只能将一个属性变成响应式 如官网所示这种将响应式对象的内部熟悉变为响应式再解构出来的方法倒也是蛮常规的。
就是上面的方法2 。
求关注啦求点赞啦每次写这种解决bug的文章都没啥人愿意给我点个小赞哭死呜呜呜
