全国旗舰校区

不同学习城市 同样授课品质

北京

深圳

上海

广州

郑州

大连

武汉

成都

西安

杭州

青岛

重庆

长沙

哈尔滨

南京

太原

沈阳

合肥

贵阳

济南

下一个校区
就在你家门口
+
当前位置:首页  >  应聘面试  >  html5面试题

vue实例中的data,在生命周期哪里能找到

发布时间:2022-11-16 17:01:50
发布人:qyf

vue实例

  如果想要了解哪个生命周期中可以找到vue实例的data,那我们必须了解,vue实例初始化的基本流程。

  一、vue实例的初始化过程

  1. new Vue从new Vue(options) 开始作为入口,Vue只是一个简单的构造函数,内部是这样的: function Vue (options) { this._init(options) } 进入了 _init 函数之后,先初始化了一些属性。

  (1. initLifecycle:初始化一些属性如$parent,$children。根实例没有 $parent,$children开始是空数组,直到它的子组件实例进入到initLifecycle时,才会往父组件的 $children里把自身放进去。所以$children里的一定是组件的实例。initEvents:初始化事件相关的属性,如 _events 等。

  (2. initRender:初始化渲染相关如 $createElement,并且定义了$attrs和$listeners为浅层响应式属性。

  具体可以查看细节章节。并且还定义了$slots、$scopedSlots,其中$slots是立刻赋值的,但是$scopedSlots初始化的时候是一个emptyObject,直到组件的vm._render过程中才会通过normalizeScopedSlots去把真正的$scopedSlots整合后挂到vm上。然后开始第一个生命周期: callHook(vm, 'beforeCreate')

  2. beforeCreate被调用完成 beforeCreate 之后

  (1. 初始化inject

  (2. 初始化state - 初始化props - 初始化methods - 初始化data - 初始化computed - 初始化watch

  (3. 初始化provide 所以在data中可以使用 props 上的值,反过来则不行。然后进入 created 阶段: callHook(vm, 'created')

  3. created被调用完成 调用 $mount 方法,开始挂载组件到dom上。如果使用了 runtime-with-compile版本,则会把你传入的template选项,或者html文本,通过一系列的编译生成 render 函数。

  - 编译这个 template,生成 ast 抽象语法树。

  - 优化这个 ast,标记静态节点。(渲染过程中不会变的那些节点,优化性能)。

  - 根据 ast,生成 render 函数。 对应具体的代码就是: const ast = parse(template.trim(), options) if (options.optimize !== false) { optimize(ast, options) } const code = generate(ast, options) 如果是脚手架搭建的项目的话,这一步 vue-cli 已经帮你做好了,所以就直接进入 mountComponent 函数。

  那么,确保有了render函数后,我们就可以往 渲染的步骤继续进行了

  二、结论:通过上面的vue实例化的前面几步我们可以知道,在created生命周期中,我们就可以对data做操作,因为此时根实例相关的属性都已准备完毕。

  那在created后面执行的生命周期,自然也都可以获取并操作data,所以能够操作data的常用生命周期就有如下几个:

  - created - beforeMount - mounted - beforeUpdate - updated

相关文章

前端公司面试题——jquery移除class

2023-08-07

前端JavaScript面试题——js时间戳转换时间的方法

2023-08-04

前端中JavaScript常见的面试题——js年月日转为时间戳

2023-08-02

前端jquery面试题——jquery字符串包含哪些?

2023-08-01

前端JavaScript面试题——js如何创建函数?

2023-07-31

前端程序员面试题——jquery发送get请求的步骤

2023-07-28
在线咨询 免费试学 教程领取