您好,登錄后才能下訂單哦!
這篇“vue初始化要做什么”文章的知識點大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細,步驟清晰,具有一定的借鑒價值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“vue初始化要做什么”文章吧。
做的事:1、選項合并,處理組件的配置內(nèi)容;2、初始化vue實例生命周期相關(guān)的屬性;3、初始化自定義組件事件的監(jiān)聽;4、初始化render渲染所需的slots、渲染函數(shù)等;5、調(diào)用beforeCreate函數(shù);6、初始化注入數(shù)據(jù);7、對props、data、watch等進行初始化;8、把祖輩傳下的數(shù)據(jù)注入后初始化provide;9、調(diào)用created函數(shù);10、掛載DOM元素。
在創(chuàng)建之前首先會有一些混入的方法,用于初始化實例的方法和屬性
initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)
這里先看initMixin就行
initMixin方法的作用是混入Vue的_init
方法,_init
方法里的核心又是以下方法
合并options配置
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')
vm.$options = mergeOptions( // 合并options
resolveConstructorOptions(vm.constructor),
options || {},
vm
)
合并options并在實例上掛載一個$options屬性。合并什么東西了?這里是分兩種情況的:
初始化new Vue
在執(zhí)行new Vue
構(gòu)造函數(shù)時,參數(shù)就是一個對象,也就是用戶的自定義配置;會將它和vue
之前定義的原型方法,全局API屬性;還有全局的Vue.mixin
內(nèi)的參數(shù),將這些都合并成為一個新的options
,最后賦值給一個的新的屬性$options
。
子組件初始化
如果是子組件初始化,除了合并以上那些外,還會將父組件的參數(shù)進行合并,如有父組件定義在子組件上的event
、props
等等。
經(jīng)過合并之后就可以通過
this.$options.data
訪問到用戶定義的data函數(shù),this.$options.name
訪問到用戶定義的組件名稱,這個合并后的屬性很重要,會被經(jīng)常使用到。
主要作用是確認組件的父子關(guān)系和初始化某些實例屬性。
export function initLifecycle(vm: Component) {
const options = vm.$options // 之前合并的屬性
let parent = options.parent;
if (parent && !options.abstract) { // 找到第一個非抽象父組件
while (parent.$options.abstract && parent.$parent) {
parent = parent.$parent
}
parent.$children.push(vm)
}
vm.$parent = parent // 找到后賦值
vm.$root = parent ? parent.$root : vm // 讓每一個子組件的$root屬性都是根組件
vm.$children = []
vm.$refs = {}
vm._watcher = null
...
vm._isDestroyed = false
vm._isBeingDestroyed = false
}
初始化自定義組件事件的監(jiān)聽,若存在父監(jiān)聽事件,則添加到該實例上。 主要作用是將父組件在使用v-on或@注冊的自定義事件添加到子組件的事件中心中。
export function initEvents (vm: Component) {
vm._events = Object.create(null) // 事件中心
vm._hasHookEvent = false
// init parent attached events
const listeners = vm.$options._parentListeners // 經(jīng)過合并options得到的
if (listeners) {
updateComponentListeners(vm, listeners)
}
}
初始化render渲染所需的slots、渲染函數(shù)等。其實就兩件事。 1、插槽的處理、 2、$createElm 也就是 render 函數(shù)中的 h 的聲明
export function initRender(vm) {
vm._vnode = null
...
vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false) //轉(zhuǎn)化編譯器的
vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true) // 轉(zhuǎn)化手寫的
...
}
調(diào)用 beforeCreate
鉤子函數(shù)?,F(xiàn)在這里只需要知道它會執(zhí)行用戶自定義的生命周期方法,如果有mixin混入的也一并執(zhí)行。
相關(guān)面試題:請問可以在beforeCreate鉤子內(nèi)通過this訪問到data中定義的變量么,為什么以及請問這個鉤子可以做什么?
> 回答:是不可以訪問的,因為在vue初始化階段,這個時候data中的變量還沒有被掛載到this上,這個時候訪問值會是undefined。beforeCreate這個鉤子在平時業(yè)務(wù)開發(fā)中用的比較少,而像插件內(nèi)部的instanll方法通過Vue.use方法安裝時一般會選在beforeCreate這個鉤子內(nèi)執(zhí)行,vue-router和vuex就是這么干的。
后面的初始化順序是inject => state => provide 初始化inject在props/data之前,這樣做的目的是可以在props/data中使用inject內(nèi)所注入的內(nèi)容
export function initInjections (vm: Component) {
const result = resolveInject(vm.$options.inject, vm)
if (result) {
toggleObserving(false) // 刻意為之不被響應(yīng)式
Object.keys(result).forEach(key => {
...
defineReactive(vm, key, result[key])
})
toggleObserving(true)
}
}
resolveInject的主要作用就是自下而上的一層一層的找當(dāng)前被注入的數(shù)據(jù)
export function resolveInject (inject: any, vm: Component): ?Object {
if (inject) {
// inject is :any because flow is not smart enough to figure out cached
// 首先定義一個result返回找到的結(jié)果。
const result = Object.create(null)
const keys = hasSymbol
? Reflect.ownKeys(inject)
: Object.keys(inject)
// 接下來使用雙循環(huán)查找,外層的for循環(huán)會遍歷inject的每一項
for (let i = 0; i < keys.length; i++) {
const key = keys[i]
// #6574 in case the inject object is observed...
if (key === '__ob__') continue
const provideKey = inject[key].from
let source = vm
//然后再內(nèi)層使用while循環(huán)自底向上的查找inject該項的父級是否有提供對應(yīng)的依賴。
while (source) {
if (source._provided && hasOwn(source._provided, provideKey)) {
result[key] = source._provided[provideKey]
break
}
source = source.$parent
}
if (!source) {
if ('default' in inject[key]) {
const provideDefault = inject[key].default
result[key] = typeof provideDefault === 'function'
? provideDefault.call(vm)
: provideDefault
} else if (process.env.NODE_ENV !== 'production') {
warn(`Injection "${key}" not found`, vm)
}
}
}
return result
}
}
初始化會被使用到的狀態(tài),狀態(tài)包括props,methods,data,computed,watch五個選項。(這里先看props,methods,data)
export function initState (vm: Component) {
vm._watchers = []
const opts = vm.$options
if (opts.props) initProps(vm, opts.props)
if (opts.methods) initMethods(vm, opts.methods)
if (opts.data) {
initData(vm)
} else {
observe(vm._data = {}, true /* asRootData */)
}
if (opts.computed) initComputed(vm, opts.computed)
if (opts.watch && opts.watch !== nativeWatch) {
initWatch(vm, opts.watch)
}
}
主要作用是檢測子組件接受的值是否符合規(guī)則,以及讓對應(yīng)的值可以用this直接訪問
function initProps(vm: Component, propsOptions: Object) { // 第二個參數(shù)為驗證規(guī)則
const propsData = vm.$options.propsData || {} // props具體的值 父組件傳過來的
const props = vm._props = {} // 存放props 組件內(nèi)可以通過這個訪問到傳過來的props
const isRoot = !vm.$parent // 是否是根節(jié)點
if (!isRoot) { // 不是根節(jié)點則關(guān)閉響應(yīng)式
toggleObserving(false)
}
for (const key in propsOptions) {
const value = validateProp(key, propsOptions, propsData, vm)
defineReactive(props, key, value)
if (!(key in vm)) {
proxy(vm, `_props`, key) // 代理 this.xx實際上訪問的是 this._props.xx
}
}
toggleObserving(true)
}
主要作用是將methods內(nèi)的方法掛載到this下。
function initMethods (vm: Component, methods: Object) {
const props = vm.$options.props
for (const key in methods) {
if(methods[key] == null) { // methods[key] === null || methods[key] === undefined 的簡寫
warn(`只定義了key而沒有相應(yīng)的value`)
}
if(props && hasOwn(props, key)) {
warn(`方法名和props的key重名了`)
}
if((key in vm) && isReserved(key)) {
warn(`方法名已經(jīng)存在而且以_或$開頭`)
}
vm[key] = typeof methods[key] !== 'function' ? noop : bind(methods[key], vm) // 相當(dāng)于methods[key].bind(vm)
}
}
function initData (vm: Component) {
let data = vm.$options.data
data = vm._data = typeof data === 'function'
? getData(data, vm)
: data || {}
if (!isPlainObject(data)) {
data = {}
}
// proxy data on instance
const keys = Object.keys(data)
const props = vm.$options.props
const methods = vm.$options.methods
let i = keys.length
while (i--) {
const key = keys[i]
if (methods && hasOwn(methods, key)) {
warn(`和methods內(nèi)的方法重名了`)
}
if (props && hasOwn(props, key)) {
warn(`和props內(nèi)的key重名了`)
} else if (!isReserved(key)) { // key不能以_或$開頭
proxy(vm, `_data`, key)
}
}
// observe data
observe(data, true /* asRootData */)
}
很容易看出是把用戶傳進來的provide
選項先獲取到,如果是方法則執(zhí)行一下再掛載到實例的_provided
屬性,不是則直接掛載到_provided
屬性
export function initProvide (vm: Component) {
const provide = vm.$options.provide
if (provide) {
vm._provided = typeof provide === 'function'
? provide.call(vm)
: provide
}
}
調(diào)用 created
鉤子函數(shù)
1、選項合并,處理組件的配置內(nèi)容,將傳入的options與構(gòu)造函數(shù)本身的options進行合并(用戶選項和系統(tǒng)默認的選項進行合并)
2、初始化vue實例生命周期相關(guān)的屬性,定義了比如:root、root、root、parent、children、children、children、refs
3、初始化自定義組件事件的監(jiān)聽,若存在父監(jiān)聽事件,則添加到該實例上
4、初始化render渲染所需的slots、渲染函數(shù)等。其實就兩件事:插槽的處理 和 $createElm
的聲明,也就是 render 函數(shù)中的 h 的聲明
5、調(diào)用 beforeCreate 鉤子函數(shù),在這里就能看出一個組件在創(chuàng)建前和后分別做了哪些初始化
6、初始化注入數(shù)據(jù),隔代傳參時 先inject。作為一個組件,在要給后輩組件提供數(shù)據(jù)之前,需要先把祖輩傳下來的數(shù)據(jù)注入進來
7、對props,methods,data,computed,watch進行初始化,包括響應(yīng)式的處理
8、在把祖輩傳下來的數(shù)據(jù)注入進來以后 再初始化provide
9、調(diào)用 created 鉤子函數(shù),初始化完成,可以執(zhí)行掛載了
10、掛載到對應(yīng)DOM元素上。如果組件構(gòu)造函數(shù)設(shè)置了el選項,會自動掛載,所以就不用再手動調(diào)用$mount去掛載。
以上就是關(guān)于“vue初始化要做什么”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對大家有幫助,若想了解更多相關(guān)的知識內(nèi)容,請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。