Was bewirkt die Vue-Initialisierung?

Was zu tun ist: 1. Optionen zusammenführen und den Konfigurationsinhalt der Komponente verarbeiten. 2. Die Eigenschaften im Zusammenhang mit dem Lebenszyklus der Vue-Instanz initialisieren. 3. Die Überwachung benutzerdefinierter Komponentenereignisse initialisieren Erforderlich für das Rendern. 5. Rufen Sie die Funktion „beforeCreate“ auf. 7. Initialisieren Sie „Properties“, „Data“ usw. 10. Mounten Sie das DOM-Element.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer.

Eine Instanz erstellen

Die Datei src/instance/index.js ist die Eingabedatei zum Erstellen einer Vue-Instanz

Vor der Erstellung werden zunächst einige Mischmethoden durchgeführt, um die Methoden und Eigenschaften der Instanz zu initialisieren

initMixin (Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)
Schauen Sie sich hier zuerst initMixin an

initMixin(Vue) Initialisierungs-Mixin

initMixin-Methode dient zum Einmischen Vues _init-Methode, der Kern der _init-Methode ist die folgende Methode_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访问到用户定义的组件名称，这个合并后的属性很重要，会被经常使用到。

1. initLifecycle(vm)

主要作用是确认组件的父子关系和初始化某些实例属性。

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
}

2. initEvents(vm)

初始化自定义组件事件的监听,若存在父监听事件,则添加到该实例上。 主要作用是将父组件在使用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)
  }
}

3. initRender(vm)

初始化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)  // 转化手写的
  ...
}

4. callHook(vm, 'beforeCreate')

调用 beforeCreate

• Merge-Optionskonfiguration
• initLifecycle(vm)initEvents(vm)
• initRender(vm)
• callHook(vm, 'beforeCreate')
• initInjections(vm) // auflösen Injektionen vor Daten/Props
• initState(vm)
• initProvide(vm) // Bereitstellung nach Daten/Props auflösen
• callHook(vm, 'created')

0. Optionenkonfiguration zusammenführen

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

---

Optionen zusammenführen und ein $options-Attribut auf der Instanz bereitstellen. Was wurde zusammengeführt? Hier gibt es zwei Situationen:

• Neues Vue initialisierenBeim Ausführen des new Vue-Konstruktors ist der Parameter ein Objekt, bei dem es sich um die benutzerdefinierte Konfiguration des Benutzers handelt mit den vor vue definierten Prototypmethoden und globalen API-Eigenschaften sowie den Parametern im globalen Vue.mixin zusammengeführt, und diese werden in einem neuen zusammengeführt Optionen und schließlich einem neuen Attribut $options zugewiesen.

• Unterkomponenteninitialisierung

  Wenn es sich um eine Unterkomponenteninitialisierung handelt, werden zusätzlich zum oben genannten Zusammenführen auch die Parameter der übergeordneten Komponente zusammengeführt, wenn ein vom übergeordneten Element definiertes -Ereignis vorliegt Komponente auf der untergeordneten Komponente , props usw.

Nach dem Zusammenführen können Sie über this.$options.data, this.$options.nameauf die benutzerdefinierte Datenfunktion zugreifen >Zugriff auf den benutzerdefinierten Komponentennamen. Dieses zusammengeführte Attribut ist sehr wichtig und wird häufig verwendet. 🎜🎜

🎜🎜1. initLifecycle(vm)🎜🎜🎜🎜Die Hauptfunktion besteht darin, die Eltern-Kind-Beziehung der Komponente zu bestätigen und einige Instanzeigenschaften zu initialisieren. 🎜

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 === &#39;__ob__&#39;) 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 (&#39;default&#39; in inject[key]) {
          const provideDefault = inject[key].default
          result[key] = typeof provideDefault === &#39;function&#39;
            ? provideDefault.call(vm)
            : provideDefault
        } else if (process.env.NODE_ENV !== &#39;production&#39;) {
          warn(`Injection "${key}" not found`, vm)
        }
      }
    }
    return result
  }
}

🎜🎜2. initEvents(vm)🎜🎜🎜🎜Initialisieren Sie das Abhören benutzerdefinierter Komponentenereignisse, wird es der Instanz hinzugefügt. Die Hauptfunktion besteht darin, benutzerdefinierte Ereignisse, die von der übergeordneten Komponente registriert wurden, mithilfe von v-on oder @ zum Ereigniszentrum der untergeordneten Komponente hinzuzufügen. 🎜

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

🎜🎜3. initRender(vm)🎜🎜🎜🎜Initialisieren Sie Slots, Rendering-Funktionen usw., die für das Rendern erforderlich sind. Eigentlich sind es nur zwei Dinge. 1. Slot-Verarbeitung, 2. $createElm ist die Deklaration von h in der Renderfunktion🎜

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

🎜🎜4 callHook(vm, 'beforeCreate')🎜🎜🎜🎜Call beforeCreateCode>Hook-Funktion. Jetzt müssen Sie nur noch wissen, dass die benutzerdefinierte Lebenszyklusmethode ausgeführt wird, und wenn ein Mixin beigemischt ist, wird es auch ausgeführt. 🎜🎜🎜Verwandte Interviewfrage: Kann über diesen Hook im beforeCreate auf die in den Daten definierten Variablen zugegriffen werden? 🎜🎜🎜🎜> Antwort: Es ist nicht zugänglich, da die Variablen in den Daten während der Vue-Initialisierungsphase noch nicht darauf gemountet wurden und der Zugriffswert zu diesem Zeitpunkt undefiniert ist. Der beforeCreate-Hook wird in der täglichen Geschäftsentwicklung selten verwendet. Wenn die Instanll-Methode innerhalb des Plug-Ins über die Vue.use-Methode installiert wird, wird sie normalerweise im beforeCreate-Hook ausgeführt. So machen es vue-router und vuex. 🎜🎜🎜🎜5. initInjections(vm)🎜🎜🎜🎜Die nachfolgende Initialisierungssequenz ist inject => Der Zweck besteht darin, den in „inject“ in „props/data“ eingefügten Inhalt zu verwenden. Die Hauptfunktion von „resolveInject“ besteht darin, die aktuell eingefügten Daten Schicht für Schicht von unten nach oben zu finden<pre class="brush:js;toolbar:false;">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 &lt; keys.length; i++) { const key = keys[i] // #6574 in case the inject object is observed... if (key === &amp;#39;__ob__&amp;#39;) continue const provideKey = inject[key].from let source = vm //然后再内层使用while循环自底向上的查找inject该项的父级是否有提供对应的依赖。 while (source) { if (source._provided &amp;&amp; hasOwn(source._provided, provideKey)) { result[key] = source._provided[provideKey] break } source = source.$parent } if (!source) { if (&amp;#39;default&amp;#39; in inject[key]) { const provideDefault = inject[key].default result[key] = typeof provideDefault === &amp;#39;function&amp;#39; ? provideDefault.call(vm) : provideDefault } else if (process.env.NODE_ENV !== &amp;#39;production&amp;#39;) { warn(`Injection &quot;${key}&quot; not found`, vm) } } } return result } }</pre><h3 data-id="heading-10"><span style="font-size: 18px;"><strong>6. initState(vm)</strong></span></h3> <p>初始化会被使用到的状态，状态包括props，methods，data，computed，watch五个选项。（这里先看props，methods，data）</p><pre class="brush:js;toolbar:false;">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 &amp;&amp; opts.watch !== nativeWatch) { initWatch(vm, opts.watch) } }</pre><h4 data-id="heading-11"><strong>6.1 initProps</strong></h4> <ul><li>主要作用是检测子组件接受的值是否符合规则，以及让对应的值可以用this直接访问</li></ul><pre class="brush:js;toolbar:false;">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) }</pre><h4 data-id="heading-12"><strong>6.2 initMethods</strong></h4> <ul><li>主要作用是将methods内的方法挂载到this下。</li></ul><pre class="brush:js;toolbar:false;">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 &amp;&amp; hasOwn(props, key)) { warn(`方法名和props的key重名了`) } if((key in vm) &amp;&amp; isReserved(key)) { warn(`方法名已经存在而且以_或$开头`) } vm[key] = typeof methods[key] !== &amp;#39;function&amp;#39; ? noop : bind(methods[key], vm) // 相当于methods[key].bind(vm) } }</pre><h4 data-id="heading-13"><strong>6.3 initData</strong></h4><pre class="brush:js;toolbar:false;">function initData (vm: Component) { let data = vm.$options.data data = vm._data = typeof data === &amp;#39;function&amp;#39; ? 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 &amp;&amp; hasOwn(methods, key)) { warn(`和methods内的方法重名了`) } if (props &amp;&amp; hasOwn(props, key)) { warn(`和props内的key重名了`) } else if (!isReserved(key)) { // key不能以_或$开头 proxy(vm, `_data`, key) } } // observe data observe(data, true /* asRootData */) }</pre><h4 data-id="heading-14"><strong>initProvide(vm)</strong></h4> <p>很容易看出是把用户传进来的<code>provide选项先获取到，如果是方法则执行一下再挂载到实例的_provided属性,不是则直接挂载到_provided属性

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

7.callHook(vm, 'created')

调用 created钩子函数

总结：Vue初始化都做了什么？

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去挂载

【相关推荐：vuejs视频教程、web前端开发】

Das obige ist der detaillierte Inhalt vonWas bewirkt die Vue-Initialisierung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!