vue是怎么初始化数据并挂载的?

vue初始化流程----模板渲染(挂载)

1. $mount() 方法

   工程源码: src/platforms/web/entry-runtime-with-compiler.js

   1. 如果传入的 el 是字符串就查找 DOM 元素, 如果有就返回, 没有就警告并返回一个新创建的 div
   2. 如果传入的 el 不是字符串就直接返回 el (可以测试传入真实 DOM 元素 box)
   3. 然后调用了 mount() 方法并返回

   Vue.prototype.$mount = function (el) {
        
     // 根据用户传入的 el 属性获取节点
     el = el && query(el)
     let vm = this;
     //把节点放在 vm.$el 上方便后面使用
     vm.$el = el;
     let options = vm.$options;
     let template
     /**
      * 编译权重：
      * 优先看有没有 render 函数, 如果有就直接用
      * 如果没有 render 函数就看有没有 template 模板
      * 如果都没有就直接获取 el 的 outerHTML 作为渲染模板
      */
     if (!options.render) {
        
         if (!options.template) {
        
             template = el.outerHTML
         } else {
        
             template = vm.$options.template
         }
     }
     if (template) {
        
         //用 template 生成 render 函数
         let render = compileToFunctions(template)
         options.render = render
     }
     //调用 mount 方法开始渲染页面。
     return mount(this, el)
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34

   • 上面代码主要实现了 Vue 渲染过程中很重要的一步: 生成 render 函数
   • 如果我们使用的 template 进行编写 HTML 代码, Vue 内部会把模板编译成 Vue 可识别的 render 函数, 如果有写 render 则省去编译过程
   • 总结: 直接写 render 函数比在 template 中写代码的编译效率更高

   query 方法

   function query (el) {
         // 传入了 `#box` 字符串
     if (typeof el === 'string') {
        
       var selected = document.querySelector(el);
   1
   2
   3
   4