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属性表示实例已经被销毁,最后将所有的指令解绑,移除所有事件监听器。