本文共 5148 字，大约阅读时间需要 17 分钟。

要实现这个功能，首先要求开发人员对 Vue 生命周期有清晰的了解和认识

关于实现刷新 echarts 图表，需要完成两项任务：获取更新的数据；清除缓存数据

一、获取更新数据

这里简单谈一下我的思路

实现 echarts 图表数据更新，我所想到的有两种方法：

• 自动刷新：设置定时器，或者监听数据变化；
• 手动刷新：在手动触发事件中完成，如 click 事件

手动更新思路：（具体内容见下面的代码）

1、在 methods 中写 click 事件，在事件中完成以下几件事：* 初始化 echarts* 请求和处理数据* 显示 echarts2、在 mounted 中触发该事件

关于自动刷新，可以去官网查看，毕竟自己读一读官方文档，知道原理，才能更好解决问题

二、清缓存问题

百度并尝试了两种方法，都不行

• chart.clear()
• chart.setOption(option,true)

chart.setOption(option, notMerge, lazyUpdate);

option：图表的配置项和数据，具体见配置项手册。

notMerge：可选，是否不跟之前设置的option进行合并，默认为false，即合并。

lazyUpdate：可选，在设置完option后是否不立即更新图表，默认为false，即立即更新。

silent：可选，阻止调用 setOption 时抛出事件，默认为false，即抛出事件。

然而，实际上，并不是方法不行，而是写的地方不对，不过有思路还是可以的。

最后，关于这个问题的解决如下：

现在想想，问题原因倒是明白的很：原因并不在于 echarts 缓存，而在于存储数据的数组和对象中存在缓存（因为在向它们写入数据的时候，使用的是 push 方法），因此，处理好中间数组和对象的数据，就可以解决缓存的问题了

1、首先，先看一下思路

接下来，开始写代码

2、在 main.js 中引入和全局注册 echarts

import echarts from 'echarts'Vue.prototype.$echarts = echarts

3、在组件中

点击刷新按钮时，先清除 data 中用于存储接收数据的数组。下面这几个是我用于存储和处理后台返回数据的数组和对象

下面是我写的清缓存语句：

mounted() {
   	// echarts 渲染：首次渲染	this.echartsDisplay()},methods: {
   	// 获取数据，并渲染 echarts 图表：首次渲染使用	echartsDisplay() {
   		// 1）初始化--动态绑定DOM的id		this.myChart = this.$echarts.init(document.getElementById(this.echartsId))		// 2）处理数据		// 数据处理较为复杂，且无关乎本问题的逻辑，因此省略		// 3）显示 echarts		this.myChart.setOption(this.resultDataTotal)	},	// 月份按钮 点击事件：echarts清缓存、显示查询对话框	selectBtn() {
   		// 清缓存--成功		this.resultDataTotal.xAxis.data.splice(0, this.resultDataTotal.xAxis.data.length)		this.resultDataTotal.series.data.splice(0, this.resultDataTotal.series.data.length)		this.rowData.splice(0, this.rowData.length)		this.createDateArray.splice(0, this.createDateArray.length)		// echarts清缓存--clear()只是删除了画布，数据依旧存在		// this.myChart.clear()		// 显示对话框		this.selectDialogVisible = true	},	// 更新方法：根据所选月份更新数据，并重新渲染 echarts 图表	updateEcharts() {
    // selMonth 为对话框中选择的月份		if(this.selMonth === '') {
   			this.$alert('请选择日期', '提示信息', {
   				confirmButtonText: '确定',				callback: action => {
   					this.$message({
   						type: 'info',						message: `action: ${
    action }`					});				}			});		} else {
   			// 数据处理较为复杂，且无关乎本问题的逻辑，因此省略			// 重新 setOption			this.myChart.setOption(this.resultDataTotal)			// 关闭对话框			this.selectDialogVisible = false		}	},	// 对话框的close事件：清缓存，并恢复显示原来的 echarts 数据	selectDialogClosed() {
   		this.selMonth = ''		this.echartsDisplay()	}}

结束，效果正确，不再有缓存影响了

三、值得一看

去官方文档看了看，文档中提到的是根据Options数据内容变化实时更新Echarts，并没有触发点击事件时才刷新的方法；去百度搜了一下，也没有此类的文章，多是和官方文档一样，设置定时器动态刷新 Echarts

关于触发某事件时更新 Echarts 数据，个人感觉难点在于 Echarts 图表数据的渲染要求 DOM 渲染完成，因此渲染 Echarts 图表数据的方法要在 mounted 中实现触发。但是，要实现点击按钮触发重新渲染 Echarts 图表，点击事件的方法是写在 methods 中，无法在 mounted 中触发，从而导致无法重新渲染。

生命周期

原文链接：

在 new Vue() 的过程中，首先执行了 init（init 是 vue 组件里面默认去执行的），在init的过程当中首先调用了beforeCreate，然后在injections 和 reactivity 的时候，它会再去调用 created。所以在 init 的时候，事件已经调用了，我们在 beforeCreate 的时候千万不要去修改 data 里面赋值的数据，最早也要放在 created 里面去做。

当created完成之后，它会去判断instance里面是否含有“el”option，如果没有的话，它会调用vm.$mount(el)这个方法，然后执行下一步；如果有的话，直接执行下一步。紧接着会判断是否含有“template”这个选项，如果有的话，它会把template解析成一个render function，这是一个template编译的过程，结果是解析成了render函数：render (h) {return h('div', {}, this.text)}。

render函数里面的传参h就是Vue里面的createElement方法，return返回一个createElement方法，其中要传3个参数，第一个参数就是创建的div标签；第二个参数传了一个对象，对象里面可以是我们组件上面的props，或者是事件之类的东西；第三个参数就是div标签里面的内容，这里我们指向了data里面的text。

使用render函数的结果和我们之前使用template解析出来的结果是一样的。render函数是发生在beforeMount和mounted之间的，这也从侧面说明在beforeMount的时候，$el还只是我们在HTML里面写的节点，然后到mounted的时候，它就把渲染出来的内容挂载到了DOM节点上。这中间的过程其实是执行了render function的内容。

在使用.vue文件开发的过程当中，我们在里面写了template模板，在经过了vue-loader的处理之后，就变成了render function，最终放到了vue-loader解析过的文件里面。由于在解析template变成render function的过程，是一个非常耗时的过程，vue-loader帮我们处理了这些内容之后，当我们在页面上执行vue代码的时候，效率会变得更高。

beforeMount在有了render function的时候才会执行，当执行完render function之后，就会调用mounted这个钩子，在mounted挂载完毕之后，这个实例就算是走完流程了。

后续的钩子函数执行的过程都是需要外部的触发才会执行。比如说有数据的变化，会调用beforeUpdate，然后经过Virtual DOM，最后updated更新完毕。当组件被销毁的时候，它会调用beforeDestory，以及destoryed。

钩子函数，其实和回调是一个概念，当系统执行到某处时，检查是否有hook，有则回调。简言之，每个组件都有属性，方法和事件。所有的生命周期都归于事件，在某个时刻自动执行。

生命周期钩子：

beforeCreate: 实例初始化之后，this指向创建的实例，不能访问到data、computed、watch、methods上的方法和数据。常用于初始化非响应式变量。

Created: 实例创建完成，可访问data、computed、watch、methods上的方法和数据，未挂载到DOM，不能访问到$ el属性，$ ref属性内容为空数组。常用于简单的ajax请求，页面的初始化。

beforeMount: 在挂载开始之前被调用，beforeMount之前，会找到对应的tempiate，并编译成render函数。

Mounted: 实例挂载到DOM上，此时可以通过DOM API获取到DOM节点，$ref属性可以访问。常用于获取VNode信息和操作，ajax请求。

beforeUpdate: 响应式数据更新时调用，发生在虚拟DOM打补丁之前。适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器。

Updated: 虚拟DOM重新渲染和打补丁之后调用，组件DOM已经更新，可执行依赖于DOM的操作，避免在这个钩子函数中操作数据，可能陷入死循环。

beforeDestroy: 实例销毁之前调用，这一步实例仍然完全可用，this仍然能获取到实例。常用于销毁定时器、解绑全局事件、销毁插件对象等操作。

Destroyed: 实例销毁后调用，调用后，Vue实例指示的所有东西都会解绑定，所有的时间监听器会被移除，所有的子实例也会被销毁。

1.created阶段的ajax请求与mounted请求的区别：前者页面视图未出现，如果请求信息过多，页面会长时间处于白屏状态。

2.mounted 不会承诺所有的子组件也都一起被挂载。

图片来自：

扩展

1、

答：只有事先设置好的data变量如下arrData改变并且要在页面重新渲染{

{ arrData }}完成之后,才会进updated方法，只改变arrData但不渲染页面是不会进的.

2、

watch: 1.仅仅是数据发生改变的时候会侦听到 2.只是会检测到你写在watch里的那些属性,没写的就不会触发 updated: 1.执行到它的时候时候是数据发生变化且界面更新完毕 2.不能监听到路由数据(例如网址中的参数) 3.所有的数据发生变化都会调用(消耗性能) 4.每次触发的代码都是同一个

小结

因此，可以知道，只要改变了data中的数据（通过点击可以实现）

• 1、会进入 watch
• 2、会调用 beforeUpdate，然后经过 Virtual DOM，最后 updated 更新完毕

因此，可以尝试以下来看看是否可以实现：通过点击事件修改 data，然后自动进入 watch——测试有效，但是要注意清缓存

尝试2：每次点击按钮，打开新的vue页面，在该页面中重复原来vue页面的代码——未测试

重新渲染 dom 可参考：

转载地址：https://blog.csdn.net/qq_41956139/article/details/104996700 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！