Vue源码学习（二）-----自定义组件

1、Vue插件的功能

• 添加全局方法或者属性，例如vue-custom-element；
• 添加全局资源：指令/过滤器或者过渡等；
• 通过全局混入来添加一些组件选项，例如vue-router；
• 添加vue实例方法，将其加到原型上；
• 一个组件库，提供自己的API，同时提供上面提到的一个或者多个功能，例如Element-ui提供自己的API；

2、Vue的钩子函数

• 源码中（/src/core/instance/index.js），Vue是一个构造函数，所以我们需要使用new的方式创建一个关于Vue的实例，如果是生产环境或者不是Vue的实例，将发出警告，然后通过Vue实例上的_init()方法进行Vue的初始化；

  function Vue (options) {
    if (process.env.NODE_ENV !== 'production' &&
      !(this instanceof Vue)
    ) {
      warn('Vue is a constructor and should be called with the `new` keyword')
    }
    this._init(options)
  }

• _init()方法是Vue通过prototype来实现的一个原型属性，Vue先调用了initLifecycle(vm)、initEvents(vm)、initRender(vm)这三个方法，用于初始化生命周期、事件和渲染函数，且发生在beforeCreated钩子函数之前，在Vue中几乎所有的钩子（errorCaptured除外）函数执行都是通过callHook(vm: Component, hook: string) 来调用的；


  Vue.prototype._init = function (options?: Object) {
      ...
      // expose real self
      vm._self = vm
      initLifecycle(vm)
      initEvents(vm)
      initRender(vm)
      callHook(vm, 'beforeCreate')
      initInjections(vm) // resolve injections before data/props
      initState(vm)
      initProvide(vm) // resolve provide after data/props
      callHook(vm, 'created')
      ...
      if (vm.$options.el) {
        vm.$mount(vm.$options.el)
      }
   }

• callHook()方法根据传入的hook从实例中拿到对应的回调函数数组（/packages/vue-template-compiler/browser.js下的 LIFECYCLE_HOOKS），然后再执行，步骤如下：
  • 把所有同类钩子先合并成数组（一个实例通过mixins可能有很多个相同钩子），然后存放在 vm.$options，类似于mixin，然后遍历执行；
  • 使用
    

    //callHook的作用就是执行用户自定义的钩子函数，并将钩子中this指向指为当前的组件实例
    export function callHook(vm:Component, hook:String) {
        //vm为当前vue实例，hook为钩子函数名称
        pushTarget()； //为了避免在某些生命周期钩子中使用 props 数据导致收集冗余的依赖
      //获取对相应的钩子函数内容
        var handlers = vm.$options[hook];
        if (handlers) {
            for (var i = 0, j = handlers.length; i < j; i++) {
                try {
                    // 直接调用
                    handlers[i].call(vm);
                } catch (e) {
                    handleError(e, vm, (hook + " hook"));
                }
            }
        }
        // 钩子函数事件emit
        if (vm._hasHookEvent) {
            vm.$emit('hook:' + hook);
        }
        popTarget()；//为了避免在某些生命周期钩子中使用 props 数据导致收集冗余的依赖
    }

3、插件的开发流程

• 如果插件是一个对象，必须暴露一个install方法，如果是一个函数，自己则会被作为install方法

  Myplugin.install = (Vue,options) => {
  //添加全局方法或者属性
  Vue.globalMethod = () => {}
  //添加全局资源
  Vue.directive(directiveName,{})
  //注入组件选项
  Vue.mixin({})
  //添加实例方法
  Vue.prototype.commonMethod = () => {}

          注意：首先根据installed属性来判断插件是否被注册，防止二次注册，然后利用Vue.mixin使插件在beforeCreate（即组件实例化之前）注册，在destoryed中销毁组件，最后利用defineProperty；让复制关系为已读，且不会被人为修改，结尾还是用Vue.component方法注册router-view与router-link两个组件；

• 在new Vue()（即组件实例化之前）使用全局方法Vue.use()，执行时自动执行install方法，用来安装插件，多次调用，只会注册一次；

  注意：Vue上定义use方法，参数可以是Object或者Function，逻辑：先判断插件是否注册过，防止重复注册，然后使用工具类的方法toArray拿到use中从1-剩余的参数，最后根据是
  Object或者Function执行对应的install方法，并记录该组件已经被注册过（将参数放入一个数组中）。

4、遇到的问题

　　暂无