vue中的数据更新或事件触发但视图没更新问题

问题来源

在开发中遇到需要将echarts趋势图的tooltip固定的需求，

实现方案是在点击item的时候将tooltip的alwaysShowContent设置为true，并将triggerOn设置为none，使得不触发tooltip，

在点击图表外部区域后将alwaysShowContent设为false，并将triggerOn设置为'mousemove|click'，在调用echarts提供的dispatchAction的hidetip。

出现的问题

关闭tooltip失败，要点击两次外部区域，tooltip才关闭

问题解决

为dispatchAction事件加上$nextTick，使其在当前dom循环结束后调用。

    handleClickOutside() {
      const tooltip = {
        ...this.trendOptions.tooltip,
        alwaysShowContent: false,
        triggerOn: 'mousemove|click',
      };
      this.trendOptions = {
        ...this.trendOptions,
        tooltip,
      };
      this.$nextTick(() => {
        this.$refs.trendChart.dispatchAction({
          type: 'hideTip',
        });
      });
    },
    handleMarkPointClick(params) {
      if (params.componentType === 'markPoint') {
        const tooltip = {
          ...this.trendOptions.tooltip,
          alwaysShowContent: true,
          triggerOn: 'none',
        };
        this.trendOptions = {
          ...this.trendOptions,
          tooltip,
        };
      }
    },

扩展

　　在Vue开发中若遇到数据更新了，但试图没更新的问题，则大概率是由于JavaScript的事件循环机制导致的。