模板编译

Vue初次渲染流程：

=> 先初始化数据
=> 将模板进行编译
=> 变成render()
=> 生成虚拟节点
=> 将虚拟节点变成真实的dom
=> 放到页面上

- 将模板进行编译

1. 编译方式：template render el
2. 重点：必须要有el（层级最低）
3. 判断是否有el，有el判断是不是template，然后遍历template中的内容进行render。
   判断有没有el

// 判断有没有el
if(vm.$options.el){
  vm.$mount(vm.$options.el)
}
// 所以el在项目中挂载方式有两种
// 第一种
new Vue({
  el:'#app'
})
// 第二种
new Vue({
}).$mount('#app')

创建$mount挂载方法

Vue.prototype.$mount = function(el){
  let vm = this // this是当前实例
  let options = vm.$options
  // 此时el = ‘#app’
  // 获取元素
  el = document.querySelector(el);
  vm.$el = el
  // 此时el是html页面元素
  if(!options.render && el){ // 判断options上有没有render函数
    let template = options.template // 判断实例vm的options上有没有template
    if(!template && el){
      // 获取html
       template = el.outerHTML  // outerHTML相对于innerHTML，把元素的标签都返回回来了
    }
  }
}

image.png