mounted 时元素不全问题

有一点需要注意，在 Vue 2.0 中，mounted 钩子触发时并不保证元素已经被添加到 DOM 上。如果想要保证元素已经被添加，可以调用 Vue.nextTick() 方法（也可以通过 this.$nextTick() 调用）并传入一个回调函数，在回调函数中添加需要在元素被添加到 DOM 之后运行的代码。

<div id="app" v-cloak>
  <h3 ref="test" @click="clickHandler()">hello world</h3>
</div>
<!-- <script src="https://unpkg.com/vue"></script> -->
<script src="https://unpkg.zhimg.com/vue"></script>
<script>
  const vm = new Vue({
    el: '#app',
    mounted() {
      // 此时，不保证元素一定添加到了 DOM 上。
      this.$nextTick(() => {
        // 此时元素一定被添加到了 DOM 上。
        console.info(this.$refs.test);
      });
    }

  });
</script>