返回顶部
首页 > 资讯 > 前端开发 > 其他 >vue初始化都做什么
  • 398
分享到

vue初始化都做什么

Vue.js 2023-05-14 21:05:48 398人浏览 薄情痞子
摘要

本教程操作环境:windows7系统、vue3版,DELL G3电脑。创建实例文件 src/instance/index.js 为创建Vue实例的入口文件在创建之前首先会有一些混入的方法,用于初始化实例的方法和属性initMixin(Vue

vue初始化都做什么

教程操作环境:windows7系统、vue3版,DELL G3电脑。

创建实例

文件 src/instance/index.js 为创建Vue实例的入口文件

在创建之前首先会有一些混入的方法,用于初始化实例的方法和属性

initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)
这里先看initMixin就行

initMixin(Vue) 初始化混入

initMixin方法的作用是混入Vue的_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

  • 子组件初始化

    如果是子组件初始化,除了合并以上那些外,还会将父组件的参数进行合并,如有父组件定义在子组件上的eventprops等等。

经过合并之后就可以通过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钩子函数。现在这里只需要知道它会执行用户自定义的生命周期方法,如果有mixin混入的也一并执行。

相关面试题:请问可以在beforeCreate钩子内通过this访问到data中定义的变量么,为什么以及请问这个钩子可以做什么?


> 回答:是不可以访问的,因为在vue初始化阶段,这个时候data中的变量还没有被挂载到this上,这个时候访问值会是undefined。beforeCreate这个钩子在平时业务开发中用的比较少,而像插件内部的instanll方法通过Vue.use方法安装时一般会选在beforeCreate这个钩子内执行,vue-router和vuex就是这么干的。

5. initInjections(vm)

后面的初始化顺序是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
  }
}

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 )
  }
  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] !== 'function' ? 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 === '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 )
}

initProvide(vm)

很容易看出是把用户传进来的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前端开发

以上就是vue初始化都做什么的详细内容,更多请关注编程网其它相关文章!

--结束END--

本文标题: vue初始化都做什么

本文链接: https://lsjlt.com/news/206062.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue初始化都做什么
    本教程操作环境:windows7系统、vue3版,DELL G3电脑。创建实例文件 src/instance/index.js 为创建Vue实例的入口文件在创建之前首先会有一些混入的方法,用于初始化实例的方法和属性initMixin(Vue...
    99+
    2023-05-14
    Vue.js
  • vue初始化要做什么
    这篇“vue初始化要做什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue初始化要做什么”文章吧。做的事:1、选项合并,...
    99+
    2023-07-04
  • Vue初始化是什么意思
    Vue 是一款非常流行的 JavaScript 框架,广泛用于构建现代化的 Web 应用程序。在开始学习 Vue 之前,你需要先了解 Vue 的初始化过程,以便正确地使用 Vue 并创建可重复的代码。初始化 Vue 是指在页面中创建一个 V...
    99+
    2023-05-14
  • vue初始化data方法是什么
    今天小编给大家分享一下vue初始化data方法是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。vue初始化data方法有...
    99+
    2023-07-04
  • jquery需要$做初始化吗
    jQuery是Web开发中常用的JavaScript库之一,它提供了丰富的DOM操作、事件处理、动画效果等功能,让开发者能够更简单、快速地编写高效的JavaScript代码。而作为jQuery的核心,$(或jQuery)是必不可少的工具,那...
    99+
    2023-05-14
  • 初始化vue项目的过程 是什么
    本篇内容主要讲解“初始化vue项目的过程 是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“初始化vue项目的过程 是什么”吧!在命令行执行命令“vue init webpack vue-pr...
    99+
    2023-07-05
  • Vue脚手架怎么初始化
    这篇文章主要介绍“Vue脚手架怎么初始化”,在日常操作中,相信很多人在Vue脚手架怎么初始化问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue脚手架怎么初始化”的疑惑有所帮助!接下来,请跟着小编一起来学习吧...
    99+
    2023-07-04
  • java什么是初始化?
    java什么是初始化?初始化就是给变量一个初始值。初始化的目的是为了让变量有值,防止使用时出现异常。【推荐学习:java课程】例如:声明一个变量:String aa = "abc"; int cc =0;其中abc和0就是初始化的值,最后值...
    99+
    2018-07-08
    java教程 java 初始化
  • java什么是初始化
    java什么是初始化初始化就是给变量一个初始值。例如:声明一个变量:String php = "www.php.cn"; int score = 100; 其中 www.php.cn 和 100 就是初始化的值,最后值不一定是 www.p...
    99+
    2016-01-15
    java基础 java 初始化
  • Vue Router中Matcher的初始化流程是什么
    这篇文章主要讲解了“Vue Router中Matcher的初始化流程是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue Router中Matcher的初始化流程是...
    99+
    2023-06-30
  • 什么是Java的初始化
    初始化就是给变量一个初始值。例如:声明一个变量:String aa = "abc";int cc =0;其中abc和0就是初始化的值,最后值不一定是abc或者0加入你覆盖了aa的值如下:aa = "def" ; cc=1;那最后aa变量的值...
    99+
    2015-08-08
    java入门 Java 初始化
  • Git初始化命令是什么
    这篇文章给大家分享的是有关Git初始化命令是什么的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 初始化命令命令作用git init初始化 git,创建 .git 文件感...
    99+
    2024-04-02
  • SpringMVC初始化流程是什么
    本篇内容主要讲解“SpringMVC初始化流程是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“SpringMVC初始化流程是什么”吧!框架源码是我们 Cod...
    99+
    2024-04-02
  • css初始化是什么意思
    这篇文章给大家分享的是有关css初始化是什么意思的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。CSS初始化是指重设浏览器的样式。不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一。如果...
    99+
    2023-06-14
  • Vue Router中Matcher的初始化流程
    目录MatchercreateMatcher()的初始化1、Location类型2、rowLocation类型3、Route类型4、RouteRecord类型addRoutes()的...
    99+
    2024-04-02
  • vue-router初始化的示例分析
    这篇文章主要为大家展示了“vue-router初始化的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue-router初始化的示例分析”这篇文章吧。v...
    99+
    2024-04-02
  • Vue中如何初始化模块init.js
    这篇文章主要为大家展示了“Vue中如何初始化模块init.js”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Vue中如何初始化模块init.js”这篇文章吧。我...
    99+
    2024-04-02
  • vue中如何初始化data数据
    目录如何初始化data数据vue程序初始化流程初始化改写的原因流程实现源码流程初始化流程如何初始化data数据 后台管理系统中,新建和编辑使用同一个页面,常常需要初始化data数据。...
    99+
    2024-04-02
  • vue初始化data方法有哪些
    本教程操作环境:windows7系统、vue3版,DELL G3电脑。vue data有两种初始化的方式,function和object,但是这两种情况适用场景有哪些?能不能通用?带着这两个问题咱们一起分析下data初始化// 代码来源于官...
    99+
    2023-05-14
    vue3 Vue
  • vue如何初始化加载动画
    本文小编为大家详细介绍“vue如何初始化加载动画”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue如何初始化加载动画”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。1.在入口文件index.html中加入loa...
    99+
    2023-07-04
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作