Data update or event trigger in Vue, but the view is not updated

Problem source

In the development process, it is necessary to fix the tooltip of echarts trend chart,

The implementation scheme is to set the always showcontent of the tooltip to true and the trigger on to none when clicking item, so that the tooltip will not be triggered,

After clicking the external area of the chart, set alwaysshow content to false and trigger on to ‘mousemove|click’, and then call the hidetip of the dispatchaction provided by echarts.

Problems arising

Failed to close the tooltip. Click the external area twice before closing the tooltip

Problem solving

Add $nextTick to the dispatchAction event to make it call after the end of the current DOM loop.

    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,
        };
      }
    },

extend

In Vue development, if the data is updated but the attempt is not updated, the high probability is caused by the event loop mechanism of JavaScript.