做的事:1、選項合併,處理元件的配置內容;2、初始化vue實例生命週期相關的屬性;3、初始化自訂元件事件的監聽;4、初始化render渲染所需的slots、渲染函數等;5、呼叫beforeCreate函數;6、初始化注入資料;7、對props、data、watch等進行初始化;8、把祖輩傳下的資料注入後初始化provide;9、呼叫created函數;10 、掛載DOM元素。
本教學操作環境:windows7系統、vue3版,DELL G3電腦。
在建立之前首先會有一些混入的方法,用於初始化實例的方法和屬性
initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)
這裡先看initMixin就行
initMixin方法的作用是混入Vue的_init
方法,_init
方法裡的核心又是以下方法
vm.$options = mergeOptions( // 合并options resolveConstructorOptions(vm.constructor), options || {}, vm )
合併options並在實例上掛載一個$options屬性。合併什麼東西了?這裡是分兩種情況的:
初始化new Vue
#在執行new Vue
建構子時,參數就是一個對象,也就是使用者的自訂配置;會將它和vue
之前定義的原型方法,全域API屬性;還有全域的Vue.mixin
內的參數,將這些都合併成為一個新的options
,最後賦值給一個的新的屬性$options
。
子元件初始化
如果是子元件初始化,除了合併以上那些外,還會將父元件的參數合併,如有父元件定義在子元件上的event
、props
等等。
經過合併之後就可以透過
this.$options.data
存取到使用者定義的data函數,this.$options.name
存取到使用者定義的元件名稱,這個合併後的屬性很重要,會被經常使用到。
#主要功能是確認元件的父子關係和初始化某些實例屬性。
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 }
#初始化自訂元件事件的監聽,若存在父監聽事件,則加入到該實例上。 主要作用是將父元件在使用v-on或@註冊的自訂事件新增至子元件的事件中心。
export function initEvents (vm: Component) { vm._events = Object.create(null) // 事件中心 vm._hasHookEvent = false // init parent attached events const listeners = vm.$options._parentListeners // 经过合并options得到的 if (listeners) { updateComponentListeners(vm, listeners) } }
#初始化render渲染所需的slots、渲染函數等。其實就兩件事。 1、插槽的處理、 2、$createElm 也就是render 函數中的h 的宣告
export function initRender(vm) { vm._vnode = null ... vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false) //转化编译器的 vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true) // 转化手写的 ... }
#callbeforeCreate
鉤子函數。現在這裡只需要知道它會執行使用者自訂的生命週期方法,如果有mixin混入的也一併執行。
相關面試題:請問可以在beforeCreate鉤子內透過this存取data中定義的變數麼,為什麼以及請問這個鉤子可以做什麼?
> 回答:是不可以存取的,因為在vue初始化階段,這個時候data中的變數還沒有被掛載到this上,這個時候存取值會是undefined 。 beforeCreate這個鉤子在平時業務開發中用的比較少,而像插件內部的instanll方法透過Vue.use方法安裝時一般會選在beforeCreate這個鉤子內執行,vue-router和vuex就是這麼幹的。
#後面的初始化順序是inject => state => provide 初始化inject在props/data之前,這樣做的目的是可以在props/data中使用inject內所注入的內容
export function initInjections (vm: Component) { const result = resolveInject(vm.$options.inject, vm) if (result) { toggleObserving(false) // 刻意为之不被响应式 Object.keys(result).forEach(key => { ... defineReactive(vm, key, result[key]) }) toggleObserving(true) } }
resolveInject的主要作用就是自下而上的一層一層的找當前被注入的資料
export function resolveInject (inject: any, vm: Component): ?Object { if (inject) { // inject is :any because flow is not smart enough to figure out cached // 首先定义一个result返回找到的结果。 const result = Object.create(null) const keys = hasSymbol ? Reflect.ownKeys(inject) : Object.keys(inject) // 接下来使用双循环查找,外层的for循环会遍历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 //然后再内层使用while循环自底向上的查找inject该项的父级是否有提供对应的依赖。 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 } }
初始化会被使用到的状态,状态包括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) } }
function initProps(vm: Component, propsOptions: Object) { // 第二个参数为验证规则 const propsData = vm.$options.propsData || {} // props具体的值 父组件传过来的 const props = vm._props = {} // 存放props 组件内可以通过这个访问到传过来的props const isRoot = !vm.$parent // 是否是根节点 if (!isRoot) { // 不是根节点则关闭响应式 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) }
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而没有相应的value`) } if(props && hasOwn(props, key)) { warn(`方法名和props的key重名了`) } if((key in vm) && isReserved(key)) { warn(`方法名已经存在而且以_或$开头`) } vm[key] = typeof methods[key] !== 'function' ? noop : bind(methods[key], vm) // 相当于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内的方法重名了`) } if (props && hasOwn(props, key)) { warn(`和props内的key重名了`) } else if (!isReserved(key)) { // key不能以_或$开头 proxy(vm, `_data`, key) } } // observe data observe(data, true /* asRootData */) }
很容易看出是把用户传进来的provide
选项先获取到,如果是方法则执行一下再挂载到实例的_provided
属性,不是则直接挂载到_provided
属性
export function initProvide (vm: Component) { const provide = vm.$options.provide if (provide) { vm._provided = typeof provide === 'function' ? provide.call(vm) : provide } }
调用 created
钩子函数
1、选项合并,处理组件的配置内容,将传入的options与构造函数本身的options进行合并(用户选项和系统默认的选项进行合并)
2、初始化vue实例生命周期相关的属性,定义了比如:root、root、root、parent、children、children、children、refs
3、初始化自定义组件事件的监听,若存在父监听事件,则添加到该实例上
4、初始化render渲染所需的slots、渲染函数等。其实就两件事:插槽的处理 和 $createElm
的声明,也就是 render 函数中的 h 的声明
5、调用 beforeCreate 钩子函数,在这里就能看出一个组件在创建前和后分别做了哪些初始化
6、初始化注入数据,隔代传参时 先inject。作为一个组件,在要给后辈组件提供数据之前,需要先把祖辈传下来的数据注入进来
7、对props,methods,data,computed,watch进行初始化,包括响应式的处理
8、在把祖辈传下来的数据注入进来以后 再初始化provide
9、调用 created 钩子函数,初始化完成,可以执行挂载了
10、挂载到对应DOM元素上。如果组件构造函数设置了el选项,会自动挂载,所以就不用再手动调用$mount去挂载
以上是vue初始化都做什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!