This is my first article on getting started

preface

I wonder if there are any students like me, who have not experienced the problems of the project, and it is difficult to remember them deeply and apply them when they meet problems. So today I’m going to give you an example of how to use nextTick in the Echarts diagram scenario, and briefly describe the problems of not using nextTick, so that you can be impressed with the application scenario.

Requirements: Analyze the age and gender of the working staff, and TAB show the corresponding chart when switching age and genderCopy the code

Function pages are as follows:

Problems encountered

  • Symptom 1: When I write dead data in data, I can show the chart, but the call interface cannot show it
  • Phenomenon 2: Using nextTick can show
  • Phenomenon 3: When switching age and gender TAB, I use V-show, how can I not show

knowledge

  • The life cycle of Vue? Where does page rendering take place?
  • V-show v-if get the width and height of the DOM element?
  • How does nextTick work?
  • The rendering mechanism of Echarts?

Code parsing

The key code is as follows:

  mounted(){
      // Get the interface data
      this.data = await apiData.getPersonManagerData()
      const { personAnalyse } = this.data
      //const { personAnalyse1 } = this.data
      await nextTick()
      console.log('Now DOM is updated')
      this.drawPersonAnalyse(personAnalyse)
      //this.drawPersonAnalyse(personAnalyse1)
  },
  methods: {changeType(index) {
          this.currentIndex = index
          if (this.currentIndex === '2') {
            this.$nextTick(() = > {
              this.chart = echarts.init(this.$refs.personAnalyse)
            })
          } else {
            this.$nextTick(() = > {
              this.chart = echarts.init(this.$refs.personAnalyse1)
            })
          }
      },
  }
}
Copy the code

Detailed knowledge

How does Vue update the DOM?

First of all, let’s look at the life cycle of VUE. I believe that students who have taken part in the interview will recite the steps, but there is a key point, Mounted is the most commonly used when writing code, mounted is triggered after the completion of page rendering.

Vue executes asynchronously when updating the DOM. As soon as data changes are listened for, Vue opens a queue and buffers all data changes that occur in the same event loop. (Source: website)

Mounted is mounted. The default data is not changed. Therefore, the DOM of the chart is available.

So this is a good explanation of phenomenon one:

When I write fake data in the data, the chart is able to come out, but when I get the data from the interface and change the data without using nextTick, the chart disappears.

2, nextTick?

Usage: Perform a delayed callback after the next DOM update loop ends. Use this method immediately after modifying the data to get the updated DOM. (Source: website)

This explains phenomenon two:

When I get the data from the interface, I listen for changes and the DOM starts to update, so I have to wait until the DOM is updated, run the nextTick, and then I get the DOM object and add the graph data, and then the graph comes out.

Post the usage of the official website

await nextTick()
console.log('Now DOM is updated')
Copy the code
createApp({
  // ...
  methods: {
    // ...
    example() {
      // modify data
      this.message = 'changed'
      // DOM is not updated yet
      this.$nextTick(function() {
        // DOM is now updated
        // `this` is bound to the current instance
        this.doSomethingElse()
      })
    }
  }
})
Copy the code

3, v-show v-if obtain the width and height of the DOM element?

V-show is equivalent to display:none

Display :none Cannot be obtained when the height of an element is a percentage

This explains phenomenon 3: When I use v-show, nextTick is also used, why does the chart not come out? Because there’s no DOM element and there’s no width or height. The chart doesn’t come out and it doesn’t go wrong

4. Echarts rendering mechanism

You have to have the DOM element first and then setOption.

Connect to Symptom 3 and Symptom 4: Modify the v-IF mode and use nextTick. The same is true in symptom 2.

conclusion

That’s all the questions and thoughts that arise from an Echarts chart. There are many ways to solve them, and I’m just illustrating one of them. Once you know the exact cause, the problem can be solved