집 > 기사 > 웹 프론트엔드 > Vue 초기화는 무엇을 합니까?

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

青灯夜游원래의: 2022-12-21 18:44:132833검색

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

initRender(vm)

callHook(vm, 'beforeCreate')

initInjections(vm) // 해결 데이터/소품 이전 주입

initState(vm)

initProvide(vm) // 데이터/소품 이후 제공 해결

callHook(vm, 'created')

0. 옵션 구성 병합

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 등의 구성 요소

병합 후 this.$options.data, this.$options.name를 통해 사용자 정의 데이터 함수에 접근할 수 있습니다. >사용자 정의 구성 요소 이름에 대한 액세스 이 병합된 속성은 매우 중요하며 자주 사용됩니다.

1.initLifecycle(vm)

주요 기능은 구성 요소의 상위-하위 관계를 확인하고 일부 인스턴스 속성을 초기화하는 것입니다. 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) } }
2.initEvents(vm)

beforeCreate

사용자 정의 구성 요소 이벤트 청취를 초기화합니다. 상위 청취 이벤트가 인스턴스에 추가됩니다. 주요 기능은 v-on이나 @를 사용하여 상위 컴포넌트에서 등록한 커스텀 이벤트를 하위 컴포넌트의 이벤트 센터에 추가하는 것입니다.

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

3.initRender(vm)

렌더 렌더링에 필요한 슬롯, 렌더링 기능 등을 초기화합니다. 사실 딱 두 가지에요. 1. 슬롯 처리, 2. $createElm은 렌더링 함수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) } }
에서 h의 선언입니다. callHook(vm, 'beforeCreate')

은

hook 함수를 호출합니다. 이제 사용자가 정의한 생명주기 방식을 실행한다는 것만 알면 되고, 믹스인이 섞여 있으면 역시 실행된다는 것만 알면 된다. 🎜🎜🎜관련 인터뷰 질문: beforeCreate 후크에서 이를 통해 데이터에 정의된 변수에 액세스할 수 있나요? 이 후크는 왜 그리고 무엇을 할 수 있나요? 🎜🎜🎜🎜> 답변: vue 초기화 단계에서는 데이터의 변수가 아직 마운트되지 않았으며 이때 액세스 값은 정의되지 않기 때문에 액세스할 수 없습니다. beforeCreate 후크는 일상적인 비즈니스 개발에서는 거의 사용되지 않습니다. Vue.use 메소드를 통해 플러그인 내부의 instanll 메소드를 설치하는 경우 일반적으로 vue-router 및 vuex에서 실행됩니다. 🎜🎜🎜🎜5.initInjections(vm)🎜🎜🎜🎜다음 초기화 시퀀스는 주입 => Props/data 이전에 주입을 초기화합니다. 이것의 목적은 props/data에 주입된 콘텐츠를 사용하는 것입니다🎜

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

🎜solveInject의 주요 기능은 현재 주입된 데이터를 아래에서 위로 레이어별로 찾는 것입니다🎜.

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

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前端开发】

위 내용은 Vue 초기화는 무엇을 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

构造函数 Event JS undefined 对象事件 dom this

성명：

이전 기사：vue에서 qs의 두 가지 방법은 무엇입니까다음 기사：vue에서 qs의 두 가지 방법은 무엇입니까