本教程操作环境:windows7系统、vue3版,DELL G3电脑。创建实例文件 src/instance/index.js 为创建Vue实例的入口文件在创建之前首先会有一些混入的方法,用于初始化实例的方法和属性initMixin(Vue
本教程操作环境: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) // 转化手写的
...
}
调用 beforeCreate
钩子函数。现在这里只需要知道它会执行用户自定义的生命周期方法,如果有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 )
}
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 )
}
很容易看出是把用户传进来的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初始化都做什么的详细内容,更多请关注编程网其它相关文章!
--结束END--
本文标题: vue初始化都做什么
本文链接: https://lsjlt.com/news/206062.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-24
2023-05-24
2023-05-24
2023-05-24
2023-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0