3.18 this.$nextTick()方法学习

1.created的时候dom还没有加载完成

2.mounted的时候dom 加载完毕

<template>
  <section>
    <div ref="hello">
      <h1>Hello World ~</h1>
    </div>
    <button type="danger" @click="get">点击</button>
  </section>
</template>
<script>
export default {
  methods: {
    get() {
      console.log('111');
    },
  },
  mounted() {
    console.log('mounted');// 3
    console.log(this.$refs.hello); // 4
    this.$nextTick(() => {
      console.log(444);// 7
      console.log(this.$refs.hello);// 8
    });
  },
  created() {
    console.log('created');// 1
    console.log(this.$refs.hello); // 2 dom还没加载完 undefined
    this.$nextTick(() => {
      console.log(222);// 5
      console.log(this.$refs.hello);//6
    });
  },
};
</script>

代码后面的数字是执行顺序