current position:Home>Usage scenario and principle of Vue nexttick

Usage scenario and principle of Vue nexttick

2022-04-29 04:29:18weixin_ forty-two million two hundred and fifty-four thousand a

Use scenarios

1、created Inside operation dom

Example

<template>
  <section>
    <div ref="hello">
      <h1>Hello World ~</h1>
    </div>
    <el-button type="danger" @click="get"> Click on </el-button>
  </section>
</template>
<script>
  export default {
    methods: {
      get() {
      }
    },
    mounted() {
      console.log(333);
      console.log(this.$refs['hello']);
      this.$nextTick(() => {
        console.log(444);
        console.log(this.$refs['hello']);
      });
    },
    created() {
      console.log(111);
      console.log(this.$refs['hello']);
      this.$nextTick(() => {
        console.log(222);
        console.log(this.$refs['hello']);
      });
    }
  }
</script>

Console output
 Insert picture description here
You can see from the output , Execute first created Output 111, Then passed ref obtain dom Output undefined, And then execute mounted Output 333 as well as dom, And then there was created Inside nexttick perform , And finally mounted Inside nexttick perform

copyright notice
author[weixin_ forty-two million two hundred and fifty-four thousand a],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/117/202204270551121758.html

Random recommended