2.最俗学习之-Vue源码学习-引入篇(中)

源码地址

引入Vue后进行了global-api的初始化,那么现在就到了第二步的初始化,文件入口为:

src\entries\web-runtime.js

首先是4个方法绑定在Vue.config上


isUnknownElement     --方法解释看methods realizes目录  源码在platforms\web\util\element.js
isReservedTag        --方法解释看methods realizes目录  源码在platforms\web\util\element.js
getTagNamespace      --这个方法就不做解释了比较简单     源码在platforms\web\util\element.js
mustUseProp          --方法解释看methods realizes目录  源码在platforms\web\util\attrs.js

然后这里到了extend方法,这个和Vue.extend不一样的,我们来看一下src\shared\util


export function extend (to: Object, _from: ?Object): Object {
  for (const key in _from) {
    to[key] = _from[key]
  }
  return to
}

好吧,这个就是object的继承吧,把后者的属性赋值给前者,最后返回前者,然后我们找到这两个东西

  • platforms/web/runtime/directives/index

  • platforms/web/runtime/components/index

这两个文件夹里面有6个js文件,很熟悉的东东,就是常用的v-model,v-show,transition组件了,在上
一篇有提到过的


// 还记得Vue.options这个值是这样的

Vue.options = {
    components: {
      KeepAlive: {
        
      },
      // 这两个是Vue自带的,在另一个地方初始化的,这里暂时这样理解就好,存在这两个方法的
      Transition: {
        
      },
      TransitionGroup: {
        
      },
      my-component: {
        
      }
    },
    directives: {
      // 这两个是Vue自带的,在另一个地方初始化的,这里暂时这样理解就好,存在这两个方法的
      model: {

      },
      show: {

      },
      // 如果经过了第一种方法注册指令,那么就会添加下面一个了
      demo: {
        bind: function () {
          // some methods
        }
      }
    },
    filters: {}
}

那么自带的东东就是在这里初始化的了通过这两个操作,这里水平有限,暂时搁着 - -#

  • extend(Vue.options.directives, platformDirectives)

  • extend(Vue.options.components, platformComponents)

然后到了Vue.prototype.patch

这个东西涉及太多,包括vdom和渲染rander等等,水平有限,暂时搁着 - -#

主要就是看这个Vue.prototype.$mount

这里有个query(el),这个源码在platforms\web\util\index.js里面,主要就是获取el这个dom元素

然后执行this._mount(el, hydrating),这个方法后续再讲,这个是Vue实例启动了的方法,至于第二个
参数hydrating,这个貌似是服务端渲染才要用到的,个人猜想

然后再到了同目录下的web-runtime-with-compiler.js文件,这个文件重写了$mount方法,查了下资料以及
官方的说法大概就是,独立构建时带有模板编译功能的初始化方法,还是直接看代码吧

首先const mount = Vue.prototype.$mount缓存了上面的$mount方法,然后重写,query(el)获取dom,
然后判断dom不能是body标签或者html标签,获取this.$options,这个实际上就是new Vue传入的参数
后面讲数据绑定的时候会经常用到,这里举个栗子说明一下吧:


var options = {
  el: '#app',
  data () {
    return {
      msg: 'hello world'
    }
  }
}

new Vue(options)

// 这个就是这个options,一个对象字面量,然后有if (!options.render)这样的一个判断,这里要
// 说下Vue的三种写法:Render函数,template模板,el绑定

第一种:Render函数





  
  Render函数


  
// 这种写法就是最底层的写法,性能最好,但是难以理解,这里方法还有更复杂的方式,后面的两种写法 // 最后会经过一些列的算法,比如AST解析再转换成render函数,最后还是得出这样的形式,这里这种方 // 法不讨论了

第二种:template模板,这里又有三种情况





  
  template模板


  
// 这是第一种情况 // 这种写法因为没有render函数,则会进入if语句里面,然后这里let template = options.template获取 // 字符串模板后就直接进入compileToFunctions这个方法了




  
  template模板


  
// 这是第二种情况 // 这种写法因为没有render函数,则会进入if语句里面,然后进入if (template.charAt(0) === '#') // idToTemplate方法执行,方法解释见methods realizes目录 // 之后就直接进入compileToFunctions这个方法了




  
  template模板


  
// 第三种则走if (template.nodeType)这里,这个就很好理解了,因为这里的template是dom节点 // 所以里面直接就获取innerHTML了,和第二种差不多,只是这里自己手动获取了dom节点 // 之后就直接进入compileToFunctions这个方法了

第三种:el绑定方法,这种便是我们最常用的了





  
  el绑定


  

{{msg}}

// 这种则走template = getOuterHTML(el)这个方法,这里el就是dom节点,通过query(el)方法获取的 // getOuterHTML方法就在下面,获取元素的el元素的html片段,最后template也是一段字符串模板了 // 之后就直接进入compileToFunctions这个方法了,这个方法先不看了,很复杂 // 这个方法返回对象{ render, staticRenderFns },然后绑定在options上面 // options.render = render 也就是下面这个方法 function anonymous() { with(this){return _c('div',{attrs:{"id":"app"}},[_c('p',{staticStyle:{"color":"blue"}},[_v(_s(msg))])])} } 这个并不是一个自定义的方法名字,它的创建其实是这样子的,算是一种比较特殊的创建函数方式 var code = 'var co = 12;co = co + 1;return co' var a = new Function(code) console.log(a) 输出 => function anonymous() { var co = 12;co = co + 1;return co } console.log(a()) 输出 => 13 最后还是调用先前缓存下来的mount方法,这个下一节再说

关于这个可以参考这位大神的文章

【Vue源码探究二】从 $mount 讲起,一起探究Vue的渲染机制

剩下的几个问题


Vue.set = set                       // 涉及到Vue的数据响应式系统,先保留
Vue.delete = del                    // 涉及到Vue的数据响应式系统,先保留
Vue.nextTick = util.nextTick        // 水平有限,看不懂 - -#
initMixin(Vue)                      // 这个后面再讲
initExtend(Vue)                     // 水平有限,看不懂 - -#


extend(Vue.options.directives, platformDirectives)  // 水平有限,看不懂 - -#
extend(Vue.options.components, platformComponents)  // 水平有限,看不懂 - -#
Vue.prototype.__patch__                             // 水平有限,看不懂 - -#
compileToFunctions                                  // 水平有限,看不懂 - -#


你可能感兴趣的:(2.最俗学习之-Vue源码学习-引入篇(中))