摘要:問中發生了什么先從語法上分析,關鍵字在語言中代表實例化一個對象而實際上是一個類我們簡單看一下源碼源碼地址從源碼可以看到類中非常干凈,只是執行了一個私有函數并且只能通過關鍵字初始化接著我們追蹤至函數源碼地址從上面的代碼我們看見很清淅的
20190214問
new Vue()中發生了什么?
先從語法上分析,new關鍵字在js語言中代表實例化一個對象, 而Vue實際上是一個類, 我們簡單看一下源碼
源碼地址 https://github.com/vuejs/vue/...
// 從源碼可以看到vue類中非常干凈,只是執行了一個_init私有函數, 并且只能通過new關鍵字初始化 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函數
源碼地址 https://github.com/vuejs/vue/...
export function initMixin (Vue: Class) { Vue.prototype._init = function (options?: Object) { const vm: Component = this // a uid vm._uid = uid++ let startTag, endTag /* istanbul ignore if */ if (process.env.NODE_ENV !== "production" && config.performance && mark) { startTag = `vue-perf-start:${vm._uid}` endTag = `vue-perf-end:${vm._uid}` mark(startTag) } // a flag to avoid this being observed vm._isVue = true // merge options if (options && options._isComponent) { // optimize internal component instantiation // since dynamic options merging is pretty slow, and none of the // internal component options needs special treatment. initInternalComponent(vm, options) } else { vm.$options = mergeOptions( resolveConstructorOptions(vm.constructor), options || {}, vm ) } /* istanbul ignore else */ if (process.env.NODE_ENV !== "production") { initProxy(vm) } else { vm._renderProxy = vm } // 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") /* istanbul ignore if */ if (process.env.NODE_ENV !== "production" && config.performance && mark) { vm._name = formatComponentName(vm, false) mark(endTag) measure(`vue ${vm._name} init`, startTag, endTag) } if (vm.$options.el) { vm.$mount(vm.$options.el) } } }
從上面的代碼我們看見_init很清淅的干了幾件事, 合并相關配置, 初始化生命周期,初始化事件中心,初始化渲染,初始化 data、props、computed、watcher 等
題外話Vue初始化邏輯非常清淅,把不同的功能拆成一些多帶帶的函數執行,這種思想值得借鑒和學習
關于JS每日一題JS每日一題可以看成是一個語音答題社區
每天利用碎片時間采用60秒內的語音形式來完成當天的考題
群主在次日0點推送當天的參考答案
注 絕不僅限于完成當天任務,更多是查漏補缺,學習群內其它同學優秀的答題思路
點擊加入答題
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/101705.html
摘要:什么情況下適合使合使用中有幾個步驟開始之前先簡單了解一下定義是一個狀態管理機制采用集中式存儲應用所有組件的狀態嗯,就是一句話能說明白的,沒明白的,我們用代碼再理解一下什么叫集中式式存儲比如下面這段代碼,同時需要用到,那么我們首先能想到就是在 20190121 什么情況下適合使合vuex?Vuex使用中有幾個步驟? 開始之前先簡單了解一下vuex 定義: vuex是一個狀態管理機制,采用...
摘要:問有哪些鉤子使用場景的實現可以點這里前面我們用大白話講過什么是鉤子,這里在重復一下,就是在什么什么之前什么什么之后英文叫專業點叫生命周期,裝逼點可以叫守衛中也存在鉤子的概念分為三步記憶全局守衛路由獨享守衛組件獨享守衛全局守衛很好理解,全 20190218問 Vue-router有哪些鉤子?使用場景? router的實現可以點這里 前面我們用大白話講過什么是鉤子,這里在重復一下,就是在...
閱讀 1669·2021-11-17 09:33
閱讀 3531·2021-11-16 11:40
閱讀 3055·2019-08-30 11:23
閱讀 1048·2019-08-29 16:36
閱讀 2464·2019-08-29 13:23
閱讀 1738·2019-08-29 12:59
閱讀 1542·2019-08-29 12:42
閱讀 1979·2019-08-28 18:22