第12章 (第④篇 整体流程）实例方法与全局API的实现原理（上）

Vue.js内部，有这样一段代码:

import { initMixin } from './init'
import { stateMixin } from './state'
import { renderMixin } from './render'
import { eventsMixin } from './events'
import { lifecycleMixin } from './lifecycle'
import { warn } from '../util/index'

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)
}

initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

export default Vue

这段代码定义了Vue构造函数，分别调用了5个函数，并将Vue构造函数作为参数传递给了5个参数。这5个函数的作用就是向Vue的原型中挂载方法。例如initMixin

export function initMixin(Vue){
    Vue.prototype._init = function(options){
        //做点什么
    }
}

当initMixin被调用时，会向Vue构造函数的prototype属性添加_init方法，执行new Vue()时，会调用_init方法，该方法实现了一系列初始化操作，包括整个生命周期的流程以及响应式系统流程的启动，其他函数也是如此，只是挂载的方法不同而已。

1.数据相关的实例方法

与数据相关的实例方法有3个：watch\set\delete.它们是在stateMixin中挂载在Vue原型上的。

import { set,del } from '../observer/index'

export function stateMixin(Vue){
    Vue.prototype.$set = set
    Vue.prototype.$delete = del
    Vue.prototype.$watch = function(expOrFn,cb,options){}
}

2.事件相关的实例方法

与事件相关的实例方法有4个：on\once\off\emit.它们是在eventsMixin中挂载到Vue原型上的。

2.1 vm.$on

vm.$on(event,callback)

【参数】{string | Array<string>} event || {Function} callback
【用法】监听当前实例上的自定义事件，事件可以由vm.$emit触发，回调函数会接收所有传入事件所触发的函数的额外参数。
【示例】</string>

vm.$on('test',function(msg){ console.log(msg) })
vn.$emit('test','hi')
// => 'hi'

事件的实现只需要在注册事件时将回调函数收集起来，在触发事件时将收集来的回调函数依次调用即可。
当event参数为数组的时候，需要遍历数组，为数组中的每一项递归调用vm.$on，使回调可以被注册到数组中的每项事件名所指定的事件俩表中，当event不为数组时，就向事件列表中添加回调。
vm._events是一个对象，用来存储事件，使用事件名（event）从vm._events中取出事件列表，如果不存在，使用空数组初始化，然后再将回调函数添加到事件列表中。这个vm._events是new Vue()实例化的时候执行this._init初始化生成的。

2.2 vm.$off

vm.$off([event,callback])

【参数】{string | Array<string>} event || {Function} callback
【用法】移除自定义事件监听器。如果没有提供参数，则移除所有的事件监听器；如果只提供了事件，则移除该事件的所有监听器；如果同时提供了事件和回调，则只移除这个回调的监听器。
没有提供参数的情况，判断arguments.length是否为0，为0的时候则将vm._events重置为初始状态相当于移除所有事件。
当提供了第一个参数为数组的情况，将数组遍历一遍，每一项一次调用vm.$off即可。
如果提供了第一个参数只提供了事件名，则从this._events中找到event将其重置为空即可，在这之前先做一个安全监测，如果这个事件没有被监听，则什么都不做直接退出。
如果提供了两个参数，那么就从vm._events取出事件列表，然后从列表中找到参数中提供的回调函数，将它从列表中移除。这里需要注意：遍历列表是从后向前循环，这样在移除当前位置的监听器时，不会影响列表中为遍历到的监听器的位置，如果是从前往后，那么当移除一个监听器时，后面监听器会自动向前移动一个位置，下一轮就会跳过一个元素。</string>

2.3 vm.$once

vm.$once(event,callback)

【参数】{string | Array<string>} event || {Function} callback
【用法】监听一个自定义事件，但是只触发一次，在第一次触发后移除监听器
once和on的区别在于自定义事件once只触发一次，所以在实现监听的功能与on相同，要新增在自定义事件触发时会执行拦截器，将监听器从事件列表中移除。</string>

Vue.prototype.$once = function(event,fn){
    const vm = this
    function on (){
        vm.$off(event,on)
        fn.apply(vm,arguments)
    }
    on.fn = fn
    vm.$on(event,on)
    return vm
}

2.4 vm.$emit

vm.$emit(event,[...args])

【参数】{string} event || [...args]
【用法】触发当前实例上的事件。附加参数都会传给监听器回调。
触发事件时使用事件名从vm._events中取出对应的事件监听器回调函数列表，然后依次执行列表中的监听器回调并将参数传递给监听器回调

3.生命周期相关的实例方法

与生命周期相关的实例方法有4个：mount\forceUpdate\nextTick\destroy.forceUpdate和destroy是在lifecycleMixin中挂载到Vue原型上的，nextTick是从renderMixin中挂载到Vue原型上，而mount是在跨平台的代码中挂载到Vue原型上的。

3.1 vm.$forceUpdate

forceUpdate作用是迫使Vue.js实例重新渲染。它仅仅影响实例本身以及插入插槽内容的子组件，而不是所有子组件。
手动执行实例watcher的update方法，就可以使Vue.js实例重新渲染。

Vue.prototype.$forceUpdate = function (){
    const vm = this
    // vm._watcher就是Vue.js实例的watcher
    if(vm._watcher){
        vm._watcher.update()
    }
}

Vue.js自动渲染是通过变化侦测来侦测数据，而forceUpdate是手动通知Vue.js实例重新渲染。

3.2 vm.$destroy

destroy作用是完全销毁一个实例，会清理该实例与其他实例的链接，并解绑全部指令及监听器，同时会触发beforeDestroy和destroyed的钩子函数。
为了防止destroy被反复执行，需要对属性_isBeingDestroyed进行判断，为true时，说明实例正在被销毁，直接return出去，因为销毁只需要一次，不需要反复销毁。然后调用callHook函数来触发beforeDestroy钩子函数。
销毁实例的逻辑：清理当前组件与父组件之间的连接，子组件在不同的父组件是不同的实例，所以一个子组件实例的父组件只有一个，销毁操作只需从父级的子组件列表中销毁这个Vue.js实例。接着销毁实例上所有的watcher，将所有的依赖追踪销毁，使用watcher的teardown方法来从所有依赖项的Dep列表中将其删除。只删除vue.js实例上的watcher实例是不够的，还需要删除用户使用vm.$watch所创建的watcher实例，在初始化操作里，会有个vm._watcher来存储用户添加的watcher实例，只需要在这个属性中找到对应的watcher，使用teardown方法进行销毁。然后向vue.js实例中添加一个isDestroyed属性表示实例已经被销毁，最后将所有的指令解绑，移除所有事件监听器。