By

组件挂载

所有的 Vue 组件都是 Vue 实例.

具体看生命周期: https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA

1. new Vue(...),创建实例
2. data ready，event loop, watch ready (created)
3. el指定了元素,或者mount手动，才会开始编译.(此时dom对应的el没有元素)
4. 编译template or outerHtml为render函数.
    优先级render函数>template选项>outer Html,
    render函数开始渲染;
    渲染完成,将得到1个对应的virtual dom.(mounted)
5. vue实例对象添加$el成员，并且替换掉el的DOM元素. 一旦$el变化，就引起dom变化，响应式的核心.
6. 监控数据变化(data<->$el)，变化触发重新render, virtual dom通过patch函数，将变化的部分改动到dom tree上(updated)
7. 对象销毁(destroyed)

指定 el

全局 Vue 实例化后,挂载到 id=app 的元素，并替换它:

new Vue {
  el: '#app'
  ...
}

<div id="app">
  <author-header
    :author-info="authorInfo"
    :me-id="meId"
    :me-follow="meFollow"
    :post-info="postInfo"
  >
  </author-header>
  <post-content-vue :post-info="postInfo">
    <comment-pagination
      :post-info="postInfo"
      ref="cmt_page_r"
    ></comment-pagination>
  </post-content-vue>
</div>

mount 指定 HtmlElement

new Vue {
  ...
}.mount('#app')

手动 mount

const MessageInstance = new Vue({
  data: _props,
  render(h) {
    return h(Message, {
      props: _props
    });
  }
});

//此时构建的component.$el还未加入文档
const component = MessageInstance.$mount();

//dom操作加入某个位置
document.body.appendChild(component.$el);

或者用Vue.extend:

//Main是vue组件
let MessageConstructor = Vue.extend(Main);
//可添加自己的属性
instance = new MessageConstructor({
  data: options
});
//手动挂载
instance.vm = instance.$mount();
//手动添加$el到dom
document.body.appendChild(instance.vm.$el);