this.$nextTick()

this.$nextTick()

将回调延迟到下次 DOM 更新循环之后执行

在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作并无作用，而在created()里使用this.$nextTick()可以等待dom生成后获取dom对象

<template>

  <section>

    <div ref="hello">

      <h1>Hello World ~</h1>

    </div>

    <el-button type="danger" @click="get">点击</el-button>

  </section>

</template>

<script>

  export default {

    methods: {

      get() {}

    },

    created() {

      console.log(111);

      console.log(this.$refs['hello']);

      this.$nextTick(() => {//dom渲染完成后在执行

        console.log(222);

        console.log(this.$refs['hello']);

      });

    }

  }

</script>