Vue 초기화는 무엇을 합니까?

해야 할 일: 1. 옵션을 병합하고 구성 요소의 구성 콘텐츠를 처리합니다. 2. vue 인스턴스 수명 주기와 관련된 속성을 초기화합니다. 3. 사용자 정의 구성 요소 이벤트 모니터링을 초기화합니다. 4. 슬롯 및 렌더링 기능을 초기화합니다. 5. beforeCreate 함수를 호출합니다. 7. 소품, 데이터, 시계 등을 초기화합니다. 8. 조상으로부터 전달된 데이터를 호출합니다. 10. DOM 요소를 마운트합니다.

이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.

인스턴스 만들기

src/instance/index.js 파일은 Vue 인스턴스를 만들기 위한 항목 파일입니다.

먼저 생성하기 전에 인스턴스의 메서드와 속성을 초기화하기 위한 몇 가지 혼합 메서드가 있습니다

initMixin (Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)
여기서 initMixin을 먼저 보세요

initMixin(Vue) 초기화 mixin

initMixin 메소드는 섞다 Vue의_init메소드,_init메소드의 핵심은 다음 메소드입니다_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')

0. 合并options配置

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

• 병합 옵션 구성
• initLifecycle(vm)< /li>< li>initEvents(vm)
• initRender(vm)
• callHook(vm, 'beforeCreate')
• initInjections(vm) // 해결 데이터/소품 이전 주입
• initState(vm)
• initProvide(vm) // 데이터/소품 이후 제공 해결
• callHook(vm, 'created')

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 }

로그인 후 복사

옵션을 병합하고 인스턴스에 $options 속성을 마운트합니다. 무엇이 병합되었나요? 여기에는 두 가지 상황이 있습니다.

• Initializing new Vue

  new Vue생성자를 실행할 때 매개변수는 사용자 정의 구성인 객체입니다.vue이전에 정의된 프로토타입 메소드 및 전역 API 속성과 전역Vue.mixin의 매개변수와 병합되며, 이들은 새로운로 병합됩니다. options, 그리고 마지막으로 새로운 속성$options에 할당됩니다.

• 하위 구성 요소 초기화하위 구성 요소 초기화인 경우 위의 병합 외에도 상위 구성 요소에서 정의한이벤트가 있는 경우 상위 구성 요소의 매개 변수도 병합됩니다. 하위 구성 요소,props등의 구성 요소

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 } }

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 } }

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 */) }

export function initProvide (vm: Component) { const provide = vm.$options.provide if (provide) { vm._provided = typeof provide === 'function' ? provide.call(vm) : provide } }