阳谷做网站推广/网站seo课程

 // Vue构造函数
function Vue (options) {// 实例初始化this._init(options)
}Vue.prototype._init = function (options?: Object) {const vm: Component = this// a uid 为每个vue实例分配一个唯一的idvm._uid = uid++vm._isVue = true//...省略部分代码if (options && options._isComponent) {// 合并组件选项对象initInternalComponent(vm, options)} else {// 合并vue选项对象vm.$options = mergeOptions(resolveConstructorOptions(vm.constructor),options || {},vm)}vm._self = vminitLifecycle(vm)initEvents(vm)initRender(vm)callHook(vm, 'beforeCreate')initInjections(vm) // resolve injections before data/propsinitState(vm)initProvide(vm) // resolve provide after data/props// 初始化完成后，调用created钩子函数callHook(vm, 'created')//...省略部分代码// 如果指定了挂载元素，则执行挂载逻辑if (vm.$options.el) {vm.$mount(vm.$options.el)}}

// src/platforms/web/entry-runtime-with-compiler.jsVue.prototype.$mount = function (el?: string | Element,hydrating?: boolean
): Component {el = el && inBrowser ? query(el) : undefinedreturn mountComponent(this, el, hydrating)
}// src/platforms/web/runtime/index.js
// 覆写$mount方法
const mount = Vue.prototype.$mountVue.prototype.$mount = function (el?: string | Element,hydrating?: boolean
): Component {el = el && query(el)const options = this.$optionsif (!options.render) {let template = options.template// 选项中指定了templateif (template) {if (typeof template === 'string') {// 如果值以 # 开始，则它将被用作选择符，并使用匹配元素的 innerHTML 作为模板if (template.charAt(0) === '#') {template = idToTemplate(template)if (process.env.NODE_ENV !== 'production' && !template) {warn(`Template element not found or is empty: ${options.template}`,this)}}} else if (template.nodeType) {// 虽然在文档中并未说明，但template还可以指定一个DOM元素作为模板template = template.innerHTML} else {if (process.env.NODE_ENV !== 'production') {warn('invalid template option:' + template, this)}return this}} else if (el) {// 选项中指定了eltemplate = getOuterHTML(el)}// 将模板解析成render函数if (template) {const { render, staticRenderFns } = compileToFunctions(template, {outputSourceRange: process.env.NODE_ENV !== 'production',shouldDecodeNewlines,shouldDecodeNewlinesForHref,delimiters: options.delimiters,comments: options.comments}, this)options.render = renderoptions.staticRenderFns = staticRenderFns}}// ...省略部分代码return mount.call(this, el, hydrating)
}// src/core/instance/lifecycle.js
export function mountComponent (vm: Component,el: ?Element,hydrating?: boolean
): Component {// 将对DOM元素的引用保存到$elvm.$el = el// ...省略部分代码// 调用beforeMount前需要执行模板编译逻辑callHook(vm, 'beforeMount')let updateComponent = () => {vm._update(vm._render(), hydrating)}new Watcher(vm, updateComponent, noop, {before () {if (vm._isMounted && !vm._isDestroyed) {callHook(vm, 'beforeUpdate')}}}, true /* isRenderWatcher */)hydrating = falseif (vm.$vnode == null) {// 标记为已挂载vm._isMounted = true// 触发mounted事件callHook(vm, 'mounted')}return vm
}

/*** 清空所有的队列并执行watcher的更新逻辑*/
function flushSchedulerQueue () {flushing = truelet watcher, id// 队列按照watcher的id升序排序，目的是确保：// 1. 组件总是从父向子进行更新// 2. 用户创建的watcher先于渲染watcher更新// 3. 如果组件在父组件的watcher运行时被销毁，该组件的watcher可以跳过处理queue.sort((a, b) => a.id - b.id)for (index = 0; index < queue.length; index++) {watcher = queue[index]// 调用watcher.before，触发beforeUpdate钩子if (watcher.before) {watcher.before()}id = watcher.idhas[id] = null// 更新domwatcher.run()}const activatedQueue = activatedChildren.slice()const updatedQueue = queue.slice()resetSchedulerState()// 触发activated钩子callActivatedHooks(activatedQueue)// 触发updated钩子callUpdatedHooks(updatedQueue)
}// 触发updated钩子
function callUpdatedHooks (queue) {let i = queue.lengthwhile (i--) {const watcher = queue[i]const vm = watcher.vmif (vm._watcher === watcher && vm._isMounted && !vm._isDestroyed) {callHook(vm, 'updated')}}
}

  // 销毁Vue实例Vue.prototype.$destroy = function () {const vm: Component = this// 避免重复执行销毁操作if (vm._isBeingDestroyed) {return}// 触发实例的beforeDestroy钩子callHook(vm, 'beforeDestroy')vm._isBeingDestroyed = true// 将实例从其父实例中的$chilren中移除（断开与父实例的联系）const parent = vm.$parentif (parent && !parent._isBeingDestroyed && !vm.$options.abstract) {remove(parent.$children, vm)}//  销毁实例的 watchersif (vm._watcher) {vm._watcher.teardown()}let i = vm._watchers.lengthwhile (i--) {vm._watchers[i].teardown()}if (vm._data.__ob__) {vm._data.__ob__.vmCount--}vm._isDestroyed = true// 销毁指令、ref等vm.__patch__(vm._vnode, null)// 触发destroyed事件callHook(vm, 'destroyed')// 移除实例的所有事件监听器vm.$off()if (vm.$el) {vm.$el.__vue__ = null}// 释放循环引用(#6759)if (vm.$vnode) {vm.$vnode.parent = null}}
}

// 组件vnode的钩子
const componentVNodeHooks = {// ...省略其他钩子insert (vnode: MountedComponentVNode) {const { context, componentInstance } = vnodeif (!componentInstance._isMounted) {componentInstance._isMounted = true// 触发组件的mounted钩子callHook(componentInstance, 'mounted')}if (vnode.data.keepAlive) {if (context._isMounted) {queueActivatedComponent(componentInstance)} else {activateChildComponent(componentInstance, true /* direct */)}}}
}// 触发activated钩子
export function activateChildComponent (vm: Component, direct?: boolean) {// ...省略部分代码if (vm._inactive || vm._inactive === null) {vm._inactive = falsefor (let i = 0; i < vm.$children.length; i++) {activateChildComponent(vm.$children[i])}// 调用实例的activated钩子callHook(vm, 'activated')}
}

// 触发activated钩子
callActivatedHooks(activatedQueue)
// 触发updated钩子
callUpdatedHooks(updatedQueue)//...省略部分代码// 触发activated钩子
function callActivatedHooks (queue) {for (let i = 0; i < queue.length; i++) {queue[i]._inactive = trueactivateChildComponent(queue[i], true /* true */)}
}

const componentVNodeHooks = {// ... 省略其他钩子destroy (vnode: MountedComponentVNode) {const { componentInstance } = vnodeif (!componentInstance._isDestroyed) {// 未被keep-alive包裹销毁组件if (!vnode.data.keepAlive) {componentInstance.$destroy()} else {// 被keep-alive包裹deactivateChildComponent(componentInstance, true /* direct */)}}}
}export function deactivateChildComponent (vm: Component, direct?: boolean) {if (direct) {vm._directInactive = trueif (isInInactiveTree(vm)) {return}}if (!vm._inactive) {vm._inactive = truefor (let i = 0; i < vm.$children.length; i++) {deactivateChildComponent(vm.$children[i])}// 调用实例的deactivated钩子callHook(vm, 'deactivated')}
}