摘要:本次分析的版本是。持續更新中。。。目錄的引入的實例化的引入這一章將會分析用戶在引入后,框架做的初始化工作創建這個類,并往類上添加類屬性類方法和實例屬性實例方法。
背景
Vue.js是現在國內比較火的前端框架,希望通過接下來的一系列文章,能夠幫助大家更好的了解Vue.js的實現原理。本次分析的版本是Vue.js2.5.16。(持續更新中。。。)
目錄Vue.js的引入
Vue的實例化
Vue.js的引入這一章將會分析用戶在引入Vue.js后,Vue框架做的初始化工作:創建Vue這個類,并往Vue類上添加類屬性&類方法和實例屬性&實例方法。
流程圖:
流程分析:
1)入口文件(platforms/web/entry-runtime-with-compiler.js)
引入 platforms/web/runtime/index.js 得到Vue類
緩存Vue的原型鏈上添加$mount方法,并重寫該方法
2)platforms/web/runtime/index.js
引入 core/index.js 得到Vue類
往Vue類的config屬性上添加mustUseProp,isReservedTag,isReservedAttr,getTagNamespace,isUnknownElement
擴展Vue類options屬性的directives,components
給Vue類添加實例方法__patch__,$mount
3)core/index.js
引入core/instance/index.js得到Vue類
為Vue類添加添加全局API
設置Vue實例屬性$isServer,$ssrContext
設置Vue類屬性 FunctionalRenderContext
添加Vue類的版本號
4)core/instance/index.js
聲明Vue類
將Vue類傳入各種初始化方法initMixin,stateMixin,eventsMixin,lifecycleMixin,renderMixin
源碼分析:
我們將根據上述的流程分析從后往前分析,逐步分析Vue從定義到最后初始化結束的整個流程。
core/instance/index.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" // 聲明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) } // 將Vue類傳入各種初始化方法 // 為Vue添加_init實例方法 Vue.prototype._init = function(){} initMixin(Vue) // 通過Object.defineProperty方法,添加vue的實例屬性$data,$props,主要跟數據相關 // 添加Vue的實例方法 $set,$delete,$watch, eg:Vue.prototype.$set = function(){} stateMixin(Vue) // 添加Vue實例基礎的事件方法 // 添加Vue實例方法 $on, $off, $emit, $once eg:Vue.prototype.$on = function () {} eventsMixin(Vue) // 添加Vue實例生命周期的方法,主要涉及到組件的更新與銷毀 // 添加Vue實例方法 $_update,$forceUpdate, $destroy lifecycleMixin(Vue) // 添加Vue實例方法 $nextTick, $_render以及_o,_n,_s,_l,_t等組件渲染相關的方法 renderMixin(Vue) export default Vue
core/index.js
import Vue from "./instance/index" import { initGlobalAPI } from "./global-api/index" import { isServerRendering } from "core/util/env" import { FunctionalRenderContext } from "core/vdom/create-functional-component" // 為Vue添加類方法 // 通過Object.defineProperty方法添加Vue.config屬性, // 添加Vue.util,Vue.set,Vue.delelt,Vue.delete,Vue.nextTick,Vue.options // 添加Vue.options上的"components","directives","filters"方法 // 實現Vue.options.components => 內建組件{keep-alive} => Vue.options.components.KeepAlive = xxxx // 添加Vue.options上的_base屬性 // 添加Vue.use,用于VUe插件的安裝 // 添加Vue.mixin // 添加Vue.extend,用于類的繼承 // 添加Vue類上"component","directive","filter"方法 initGlobalAPI(Vue) Object.defineProperty(Vue.prototype, "$isServer", { get: isServerRendering }) Object.defineProperty(Vue.prototype, "$ssrContext", { get () { /* istanbul ignore next */ return this.$vnode && this.$vnode.ssrContext } }) // expose FunctionalRenderContext for ssr runtime helper installation Object.defineProperty(Vue, "FunctionalRenderContext", { value: FunctionalRenderContext }) Vue.version = "__VERSION__" export default Vue
platforms/web/runtime/index.js
/* @flow */ import Vue from "core/index" import config from "core/config" import { extend, noop } from "shared/util" import { mountComponent } from "core/instance/lifecycle" import { devtools, inBrowser, isChrome } from "core/util/index" import { query, mustUseProp, isReservedTag, isReservedAttr, getTagNamespace, isUnknownElement } from "web/util/index" import { patch } from "./patch" import platformDirectives from "./directives/index" import platformComponents from "./components/index" // 實現Vue.config上的mustUseProp,isReservedTag,isReservedAttr,getTagNamespace,isUnknownElement方法 Vue.config.mustUseProp = mustUseProp Vue.config.isReservedTag = isReservedTag Vue.config.isReservedAttr = isReservedAttr Vue.config.getTagNamespace = getTagNamespace Vue.config.isUnknownElement = isUnknownElement // 實現Vue.options上的directives,components方法 // Vue.options.directives的model,show // Vue.options.components的Transition,TransitionGroup方法 extend(Vue.options.directives, platformDirectives) extend(Vue.options.components, platformComponents) // install platform patch function // Vue實例上的__patch__方法 Vue.prototype.__patch__ = inBrowser ? patch : noop // public mount method // Vue實例上的$mount方法 Vue.prototype.$mount = function ( el?: string | Element, hydrating?: boolean ): Component { el = el && inBrowser ? query(el) : undefined return mountComponent(this, el, hydrating) } // devtools global hook /* istanbul ignore next */ if (inBrowser) { setTimeout(() => { if (config.devtools) { if (devtools) { devtools.emit("init", Vue) } else if ( process.env.NODE_ENV !== "production" && process.env.NODE_ENV !== "test" && isChrome ) { console[console.info ? "info" : "log"]( "Download the Vue Devtools extension for a better development experience: " + "https://github.com/vuejs/vue-devtools" ) } } if (process.env.NODE_ENV !== "production" && process.env.NODE_ENV !== "test" && config.productionTip !== false && typeof console !== "undefined" ) { console[console.info ? "info" : "log"]( `You are running Vue in development mode. ` + `Make sure to turn on production mode when deploying for production. ` + `See more tips at https://vuejs.org/guide/deployment.html` ) } }, 0) } export default Vue
platforms/web/entry-runtime-with-compiler.js
/* @flow */ import config from "core/config" import { warn, cached } from "core/util/index" import { mark, measure } from "core/util/perf" import Vue from "./runtime/index" import { query } from "./util/index" import { compileToFunctions } from "./compiler/index" import { shouldDecodeNewlines, shouldDecodeNewlinesForHref } from "./util/compat" // 實現通過id來緩存模板的功能。 const idToTemplate = cached(id => { const el = query(id) return el && el.innerHTML }) // 緩存mount方法 const mount = Vue.prototype.$mount // 重新實現Vue實例上的$mount方法 Vue.prototype.$mount = function ( el?: string | Element, hydrating?: boolean ): Component { el = el && query(el) /* istanbul ignore if */ if (el === document.body || el === document.documentElement) { process.env.NODE_ENV !== "production" && warn( `Do not mount Vue to or - mount to normal elements instead.` ) return this } const options = this.$options // resolve template/el and convert to render function if (!options.render) { let template = options.template if (template) { if (typeof template === "string") { if (template.charAt(0) === "#") { template = idToTemplate(template) /* istanbul ignore if */ if (process.env.NODE_ENV !== "production" && !template) { warn( `Template element not found or is empty: ${options.template}`, this ) } } } else if (template.nodeType) { template = template.innerHTML } else { if (process.env.NODE_ENV !== "production") { warn("invalid template option:" + template, this) } return this } } else if (el) { template = getOuterHTML(el) } if (template) { /* istanbul ignore if */ if (process.env.NODE_ENV !== "production" && config.performance && mark) { mark("compile") } const { render, staticRenderFns } = compileToFunctions(template, { shouldDecodeNewlines, shouldDecodeNewlinesForHref, delimiters: options.delimiters, comments: options.comments }, this) options.render = render options.staticRenderFns = staticRenderFns /* istanbul ignore if */ if (process.env.NODE_ENV !== "production" && config.performance && mark) { mark("compile end") measure(`vue ${this._name} compile`, "compile", "compile end") } } } return mount.call(this, el, hydrating) } /** * Get outerHTML of elements, taking care * of SVG elements in IE as well. */ function getOuterHTML (el: Element): string { if (el.outerHTML) { return el.outerHTML } else { const container = document.createElement("div") container.appendChild(el.cloneNode(true)) return container.innerHTML } } // 實現Vue類上的compile方法 Vue.compile = compileToFunctions export default Vue
以上就是引入Vue.js之后整個初始化過程。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/93883.html
摘要:本次分析的版本是。的實例化由上一章我們了解了類的定義,本章主要分析用戶實例化類之后,框架內部做了具體的工作。所以我們先看看的構造函數里面定義了什么方法。這個文件聲明了類的構造函數,構造函數中直接調用了實例方法來初始化的實例,并傳入參數。 背景 Vue.js是現在國內比較火的前端框架,希望通過接下來的一系列文章,能夠幫助大家更好的了解Vue.js的實現原理。本次分析的版本是Vue.js2...
摘要:但沒辦法,還是得繼續。因為這邊返回的是一個,所以會執行如下代碼然后回到剛才的里面,,額,好吧。。。 這段時間折騰了一個vue的日期選擇的組件,為了達成我一貫的使用舒服優先原則,我決定使用directive來實現,但是通過這個實現有一個難點就是我如何把時間選擇的組件插入到dom中,所以問題來了,我是不是又要看Vue的源碼? vue2.0即將到來,改了一大堆,Fragment沒了,所以vu...
摘要:寫在前面其實最開始不是特意來研究的源碼,只是想了解下的命令,如果想要了解命令的話,那么繞不開寫的。通過分析發現與相比,變化太大了,通過引入插件系統,可以讓開發者利用其暴露的對項目進行擴展。 showImg(https://segmentfault.com/img/bVboijb?w=1600&h=1094); 寫在前面 其實最開始不是特意來研究 vue-cli 的源碼,只是想了解下 n...
摘要:一方面是因為想要克服自己的惰性,另一方面也是想重新溫故一遍。一共分成了個基礎部分,后續還會繼續記錄。文章中如果有筆誤或者不正確的解釋,也歡迎批評指正,共同進步。最后地址部分源碼 Why? 網上現有的Vue源碼解析文章一搜一大批,但是為什么我還要去做這樣的事情呢?因為覺得紙上得來終覺淺,絕知此事要躬行。 然后平時的項目也主要是Vue,在使用Vue的過程中,也對其一些約定產生了一些疑問,可...
摘要:一方面是因為想要克服自己的惰性,另一方面也是想重新溫故一遍。一共分成了個基礎部分,后續還會繼續記錄。文章中如果有筆誤或者不正確的解釋,也歡迎批評指正,共同進步。最后地址部分源碼 Why? 網上現有的Vue源碼解析文章一搜一大批,但是為什么我還要去做這樣的事情呢?因為覺得紙上得來終覺淺,絕知此事要躬行。 然后平時的項目也主要是Vue,在使用Vue的過程中,也對其一些約定產生了一些疑問,可...
閱讀 3197·2021-11-25 09:43
閱讀 3408·2021-11-11 16:54
閱讀 823·2021-11-02 14:42
閱讀 3742·2021-09-30 09:58
閱讀 3664·2021-09-29 09:44
閱讀 1279·2019-08-30 15:56
閱讀 2097·2019-08-30 15:54
閱讀 2985·2019-08-30 15:43