Vue的el属性为什么在beforeMount就可以拿到？

Question

    <div class="a">
      {{msg}}
    </div>
  <script>
    var vm = new Vue({
      el: ".a",
      data: {
        msg: "bbb",
      },
      beforeMount() {
        console.log(this.$el);
      },
      mounted() {
        console.log(this.$el);
      },
    });
  </script>

beforeMount阶段，编译好的模板还没挂载到页面中，怎么拿到的el属性。

Answer 1

注意：console.log(this.$el) 打印的是一个引用对象，这意味着你在 f12 的时候看到的可能已经不是 beforeMount 时打印的了。
参考：https://segmentfault.com/q/10...

Answer 2

首先回答你的问题：
$el 什么时候能打印出来？
当在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标el时，在 beforeMount 时可以打印出来；当不存在时，在 mounted 阶段可以打印出来:

由上图可以看到在此阶段是给vue实例对象添加$el成员，并且替换掉挂在的DOM元素。在这之前console中打印的结果可以看到beforeMount之前el上还是undefined。
而在beformount阶段，是通过{{msg}}进行占位的，因为此时还有挂在到页面上，还是JavaScript中的虚拟DOM形式存在的。在mounted之后可以看到div中的内容发生了变化。
总结：beformount：虚拟dom创建完成
mounted：渲染出真实dom，组件已经出现在页面中，数据，事件，都DOM都处理好了