vue中nextTick使用引起的一个小问题

问题描述：

两个页面之间进行快速切换会报错元素找不到

问题原因：

该方法的调用是在nextTick中，也就是放在微任务队列中，当切换到该页面后主任务开始执行，(主任务执行完成后，更新dom元素，然后才是下一个tick)，

然后快速切出该页面，组件销毁，此时dom元素处于尴尬位置，（可能是压根没有加载，也可能是加载后销毁）总之会元素消失，然而微任务队列还在等待执行，然后执行。此时代码中存在寻找dom元素的方法。dom已经销毁，这样就会引出错误。

1. 画布

<canvas :id="canvasId"></canvas>

2.画图方法

   draw() {// 因为该函数是放在微任务队列中，可能会存在元素销毁后该方法才执行，所以要判断一下元素是否存在，如果不存在则退出方法const idEle = document.getElementById(this.canvasId)if (!idEle && this.antData.length === 0) {return}let height = this.antData.length >= 20 ? 390 : 270this.antData.reverse()this.chart = new F2.Chart({id: this.canvasId,width: this.screenWidth,height: height,pixelRatio: window.devicePixelRatio,padding: [0, "auto", 20, "auto"],})let range = [0, 0.6]if (this.judgeDataExitNegative(this.antData)) {range = [0.1, 0.6]}this.chart.source(this.antData, {label: {type: "cat",},value: {range: range,},})this.chart.coord({transposed: true,})this.chart.tooltip({custom: true, // 自定义 tooltip 内容框showTooltipMarker: true,tooltipMarkerStyle: {fill: "#F9EEDE",fillOpacity: 0.99,},})this.chart.legend(false)// 添加文本标注let offsetY2021 = 0let offsetY2020 = 0this.antData.forEach(item => {if (item.name === moment().format("YYYY")) {if (item.value < 0) {this.chart.guide().html({position: [item.label, item.value],html: `<div style="line-height:14px;font-weight: bold;display:flex;font-size:12px;"><span style="display:inline-block;line-height:14px;color:${item.disValue > 0 ? "#D04C63" : "#2e7065"};padding:0 2px;font-weight: bold;">${item.disValue > 0 ? "+" : ""}${item.disValue ? item.disValue.toLocaleString() : "0"}</span><span style="color: #000000;"> ${item.value ? item.value.toLocaleString() : "0"}</span> </div>`,offsetY: offsetY2021,offsetX: 0,alignX: "right",alignY: "bottom",})} else {this.chart.guide().html({position: [item.label, item.value],html: `<div style="font-weight: bold;display:flex;font-size:12px;align-items:center"><span style="color: #000000;"> ${item.value ? item.value.toLocaleString() : "0"}</span> <span style="display:inline-block;line-height:14px;color:${item.disValue > 0 ? "#D04C63" : item.disValue === 0 ? "gray" : "#2e7065"};padding:0 2px;margin-left: 4px;">${item.disValue > 0 ? "+" : ""}${item.disValue ? item.disValue.toLocaleString() : "0"}</span></div>`,offsetY: 1,offsetX: 2,alignX: "left",alignY: "bottom",})}} else if (item.name === moment().subtract(1, "year").format("YYYY")) {let alignX = "left"if (item.value < 0) {alignX = "right"}this.chart.guide().html({position: [item.label, item.value],html: `<span style="display:inline-block;font-weight: bold;font-size: 12px;text-align: center;color: #000000;height: 14px;line-height:14px">${item.value ? item.value.toLocaleString() : "0"}</span>`,offsetY: offsetY2020,offsetX: 2,alignX: alignX,alignY: "top",})}})this.chart.axis("label", {line: { top: true },// grid: {//   lineDash: true,//   stroke: "#e8e8e8",//   lineWidth: 1,//   fillOpacity: 0.6,// },})this.chart.axis("value", {line: { top: true },})this.chart.guide().line({start: ["max", 0],end: ["min", 0],style: {stroke: "gray",lineWidth: 1,lineCap: "round",opacity: 0.3,},})if (this.antData.length > 7) {let { size, marginRatio } = this.getSizeAndRatio(this.antData.length)// this.chart.interval().position("label*value").color("red")this.chart.interval().position("label*value").color("name", value => {if (value === "2021") {return "#89503c"} else {return "#CBAA7B"}}).adjust({type: "dodge",marginRatio: marginRatio, // 设置分组间柱子的间距}).size(size)// .style({//   radius: radius,// })} else {this.chart.interval().position("label*value").color("name", value => {if (value === "2021") {return "#9B5F4A"} else {return "#CBAA7B"}}).adjust({type: "dodge",marginRatio: 0.02, // 设置分组间柱子的间距})}this.chart.axis("label", {label: {fill: "#606266",fontFamily: "PingFangSC-Medium, PingFang SC",fontWeight: "500",fontSize: "12",},})this.chart.scale("label", { tickInterval: 0.11 })this.chart.render()this.chart.interaction("interval-select", {startEvent: "tap", // 触发事件，默认为 tap 事件selectAxis: true, // 是否高亮坐标轴文本selectAxisStyle: {fill: "#731E00",fontWeight: "800",},unSelectStyle: { fillOpacity: 0.9 },defaultSelected: {...this.antData.reverse()[0],},cancelable: false,onStart: e => {this.$emit("interactionClick", e)}, // 事件触发后的回调mode: "range", // 选中策略，默认为 'shape', 即击中柱子才会触发交互})},

3. 方法的使用

init() {this.clear()this.$nextTick(() => {this.draw()})}

4. 修改之前的代码片段

5. 修改后的代码片段

6. 问题解决

7. 感想：

在开发过程中使用一个官方方法时要知其所以然，多思考该方法可能存在的问题。就比如该处出现的问题，就应该综合vue的dom元素更新策略，watcher的执行时机，宏观任务和微观任务的区别等等......

vue中nextTick使用引起的一个小问题相关推荐

Vue中$nextTick的理解
Vue中$nextTick的理解 Vue中$nextTick方法将回调延迟到下次DOM更新循环之后执行,也就是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,能够获取更新后的 ...
vue树形结构html,怎么在vue中利用递归组件实现一个树形控件
怎么在vue中利用递归组件实现一个树形控件发布时间:2021-06-11 17:26:48 来源:亿速云阅读:81 作者:Leah 本篇文章为大家展示了怎么在vue中利用递归组件实现一个树形控件, ...
vue中nextTick的实际应用
vue中nextTick的实际应用简单来说就是:页面数据渲染完成之后再调用在使用Vue框架的时候,有时候需要在Vue在页面数据渲染完成之后调用方法,不然获取不到准确的数据,特别是在获取列表的高度的 ...
js 或者vue中for循环去掉最后一个逗号
js 或者vue中for循环去掉最后一个逗号一个感觉很简单的问题,刚开始我没有思路,现在也没有更好的思路问题描述: 后端返回的一个数组,前端这边需要循环把名字展示,要求在展示时,每个名字后用** ...
vue中的data为什么是一个函数？起到什么作用？
前言在学习vue的时候,我们一直在思考的一件事: 组件的data数据为什么必须要以函数返回的形式,为什么不是简单的对象形式呢? 一.data为什么是一个函数面试回答: 如果data是一个函数的话, ...
vue 中遍历数组对象存到一个新数组里
vue 中遍历数组对象存到一个新数组里(亲测可行!!!) 参考文档 : MDN-解构赋值方法一 : For of 迭代和解构 var people = [{name: 'Mike Smith',f ...
关于Vue中$nextTick的作用及实现原理(Vue进阶)
Hello,大家好,最近找工作的路途依然艰难,但是要一直保持对技术的热爱!今天继续跟大家探索一下Vue进阶的内容,这次研究一下Vue的全局API中的$nextTick,这是一个很常用,也是经典的API ...
关于Vue中nextTick异步调用videoaudio的方法失效解决方案
原文地址:https://qq282126990.github.io/2018/02/10/ nextTick JS的运行机制:JS执行是单线程的,它是基于事件循环的对于事件循环的理解大致分为以下几个 ...
Hiberate中Update和Merge的一个小的区别
1.Update和Merge的一个小区别总结 Update方法:如果要更新的对象是持久态而且在DirtyCheck的时候没有发现改变,那么就不发Update语句.如果更新的对象是游离态即使对象没有改变 ...

vue中nextTick使用引起的一个小问题

vue中nextTick使用引起的一个小问题相关推荐

最新文章

热门文章