vueの初期化は何をするのでしょうか?-フロントエンドQ&A-php.cn

何をすべきか: 1. オプションをマージし、コンポーネントの構成コンテンツを処理します。 2. vue インスタンスのライフサイクルに関連するプロパティを初期化します。 3. カスタムコンポーネントイベントの監視を初期化します。 4. render 必要なスロット、レンダリング関数などをレンダリングする; 5. beforeCreate 関数を呼び出す; 6. 注入されたデータを初期化する; 7. props、data、watch などを初期化する; 8. 祖先から受け継いだデータを注入し、provide を初期化する; 8. 9. 作成した関数を呼び出します; 10 、DOM 要素をマウントします。

vueの初期化は何をするのでしょうか?

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

インスタンスの作成

ファイル src/instance/index.js は、Vue インスタンスを作成するためのエントリファイルです

いくつかの混合があります。作成前メソッド。インスタンスのメソッドとプロパティを初期化するために使用されます。

initMixin(Vue)

stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin( Vue)

最初に initMixin を見てください

initMixin(Vue) 初期化 mixin

initMixin メソッドの機能は、ミックスすることです。 into Vue

_initメソッド、_initメソッドの核心は次のメソッドです

initLifecycle(vm)
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
initInjections(vm) // データの前にインジェクションを解決します/ props
initState( vm)
initProvide(vm) // data/props
callHook(vm, 'created')
# の後で Provide を解決します

##0 . マージオプション設定 vm.$options = mergeOptions( // 合并options resolveConstructorOptions(vm.constructor), options || {}, vm )
ログイン後にコピー
オプションをマージし、インスタンスに $options 属性をマウントします。何が統合されたのですか？ここには 2 つの状況があります:

new Vue
コンストラクターを実行するとき、パラメーターはオブジェクトです。ユーザーのカスタム設定です。これは、vue の前に定義されたプロトタイプメソッドとグローバル API プロパティ、およびグローバル Vue.mixin のパラメーターと結合されます。結合新しい options に結合され、最終的に新しい属性 $options に割り当てられます。
サブコンポーネントの初期化の場合、上記のマージに加えて、親コンポーネントのパラメータもマージされます。コンポーネントの子
event
、props などで定義されたコンポーネント。

マージ後は、

this.$options.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)レンダーレンダリングに必要なスロットやレンダリング関数などを初期化します。実際には、それはたった 2 つのことです。 1. スロット処理、 2. $createElm は、レンダー関数の 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')Call

beforeCreate

フック関数。ここで必要なことは、ユーザー定義のライフサイクルメソッドが実行されること、およびミックスインが混在している場合はそれも実行されることだけです。

関連するインタビューの質問: データで定義された変数には、beforeCreate フックでこれを介してアクセスできますか? このフックで何ができるのか、またその理由は何ですか?

> 回答: Vue の初期化段階ではデータ内の変数がまだマウントされておらず、この時点でのアクセス値は未定義であるため、アクセスできません。。 beforeCreate フックは日常のビジネス開発ではほとんど使用されません。プラグイン内の instanll メソッドが Vue.use メソッドを通じてインストールされる場合、通常は beforeCreate フックで実行されます。これが vue-router と vuex の仕組みです。

5. initInjections(vm)後続の初期化シーケンスは、inject => state => Provide です。 props/data の前に inject を初期化します。この目的は、inject で注入されたコンテンツを props/data で使用することです。

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 === &#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
  }
}

ログイン後にコピー

6. initState(vm)

初始化会被使用到的状态，状态包括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)
  }
}

ログイン後にコピー

6.1 initProps

主要作用是检测子组件接受的值是否符合规则，以及让对应的值可以用this直接访问

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

ログイン後にコピー

6.2 initMethods

主要作用是将methods内的方法挂载到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而没有相应的value`)
    }
    if(props && hasOwn(props, key)) {
      warn(`方法名和props的key重名了`)
    }
    if((key in vm) && isReserved(key)) {
      warn(`方法名已经存在而且以_或$开头`)
    }
    vm[key] = typeof methods[key] !== &#39;function&#39; ? noop : bind(methods[key], vm)   //  相当于methods[key].bind(vm)
  }
}

ログイン後にコピー

6.3 initData

function initData (vm: Component) {
  let data = vm.$options.data
  data = vm._data = typeof data === &#39;function&#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 && 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 */)
}

ログイン後にコピー

initProvide(vm)

很容易看出是把用户传进来的provide选项先获取到，如果是方法则执行一下再挂载到实例的_provided属性,不是则直接挂载到_provided属性

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

ログイン後にコピー