Vue 源码分析之二:Vue Class

这段时间折腾了一个vue的日期选择的组件,为了达成我一贯的使用舒服优先原则,我决定使用directive来实现,但是通过这个实现有一个难点就是我如何把时间选择的组件插入到dom中,所以问题来了,我是不是又要看Vue的源码?

vue2.0即将到来,改了一大堆,Fragment没了,所以vue社区中为数不多的组件又有一批不能在2.0中使用,vue的官方插件也是毁得只剩vuex兼容,所以在我正在折腾我的组件的时候看到这个消息我是崩溃的。。。但没办法,还是得继续。希望2.0出来之后官方能完善一下文档,1.0中太多东西根本没在文档里提到,比如Fragment,比如Vue的util方法,这给第三方组件以及插件开发者带来了无数的玛法,你只能去看源码了,费时费力,刚研究透又来个大更新,我真的想哭/(ㄒoㄒ)/~~

———-回归正题——–

Vue Class

vue的核心就是他的Vue class,component到最终其实也就是一个Vue的实例,包含了一些component独有的属性而已,我们来看看这个Class做了什么:

function Vue (options) {
  this._init(options)
}

恩,他调用了_init,而在_init里面就是初始化了一大堆属性,这些不重要,最重要的是最下面他有这么一句代码:

if (options.el) {
  this.$mount(options.el)
}

这个el是我们在调用new Vue({...})时传入的,即这个vue对象的挂载点,好了,我们找到办法去动态得把一个Vue的实例挂载到dom里面了,于是就有了如下代码:

const vm = new Vue({
    template: '<div>我是天才</div>',
    data: {
        hehe: 'haha'
    }
})
vm.$mount(document.body)

愉快得打开页面,等等,为什么整个页面上就剩下我是天才这句非常正确的话呢?哦~原来$mount默认是替换整个整个元素的,呵呵哒

那么我们要如何把节点插入到body里面呢?这里有很多办法,比如你直接调用$mount()不传任何参数,这个时候他不会执行插入操作,然后你把他编译过的节点(也就是vm.$el)拿出来手动通过dom操作来进行插入,当然我们肯定不能用这么low的方法O(∩_∩)O~,继续撸源码,很快我们找到了这么一个文件:

// instance/api/dom.js
Vue.prototype.$appendTo = function(target, cb, withTransition) {...}
Vue.prototype.$before = function(target, cb, withTransition) {...}

是的,Vue的实例自带一些dom操作的帮助,那么我们随便选一个用就是了,不细说

然而我们还是遇到了问题

使用这种方式动态插入的节点会有一个问题,那就是$el并不是我们真正想要的节点,而是一个注释节点,这是为啥?还是看源码,我们跟着$mount进去看看他做了什么:

Vue.prototype.$mount = function (el) {
    if (this._isCompiled) {
      process.env.NODE_ENV !== 'production' && warn(
        '$mount() should be called only once.'
      )
      return
    }
    el = query(el)
    if (!el) {
      el = document.createElement('div')
    }
    this._compile(el)
    this._initDOMHooks()
    if (inDoc(this.$el)) {
      this._callHook('attached')
      ready.call(this)
    } else {
      this.$once('hook:attached', ready)
    }
    return this
}

显然我们的el是没有的,那么这里的el就变成了一个div,然后进行了_compile,再继续:

// 源码太长不贴了
// 文件位置:instance/internal/lifecycle.js

这里面他做了一个el = transclude(el, options),以及this._initElement(el),我们重点看一下this._initElement(el)

Vue.prototype._initElement = function (el) {
    if (el instanceof DocumentFragment) {
      this._isFragment = true
      this.$el = this._fragmentStart = el.firstChild
      this._fragmentEnd = el.lastChild
      // set persisted text anchors to empty
      if (this._fragmentStart.nodeType === 3) {
        this._fragmentStart.data = this._fragmentEnd.data = ''
      }
      this._fragment = el
    } else {
      this.$el = el
    }
    this.$el.__vue__ = this
    this._callHook('beforeCompile')
}

我们发现这里的el以及不是之前我们可亲的div了,那么他是什么呢?我们倒回去看transclude

发表评论

提供最优质的资源集合

立即查看 了解详情