Vue2 与 Vue3 生命周期对比

Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载DOM、渲染更新渲染、卸载等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。

Vue的整个生命周期中,它提供了一系列的事件,可以让我们注册js方法,可以让我们达到控制整个过程的目的,值得注意的是,在这些事件响应方法中的this直接指向的是vue的实例。

 

Vue2 与 Vue3 生命周期对比_第1张图片

Vue2

Vue2 与 Vue3 生命周期对比_第2张图片

1、beforeCreate(创建前)

表示实例完全被创建出来之前,vue 实例的挂载元素$el和数据对象 data 都为 undefined,还未初始化。此钩子函数不能获取到数据,dom元素也没有渲染出来,此钩子函数不会用来做什么事情。

2、created(创建后)

数据对象 data 已存在,可以调用 methods 中的方法,操作 data 中的数据,但 dom 未生成,$el 未存在 。在这个钩子函数里面,如果同步更改数据的话,不会影响运行中钩子函数的执行。可以用来发送ajax请求,也可以做一些初始化事件的相关操作。

3、beforeMount(挂载前)

vue 实例的 $el 和 data 都已初始化,dom节点马上要被渲染出来了,但是还没有真正的渲染出来,挂载之前为虚拟的 dom节点,模板已经在内存中编辑完成了,但是尚未把模板渲染到页面中。data.message 未替换。

4、mounted(挂载后)

vue 实例挂载完成,data.message 成功渲染。内存中的模板,已经真实的挂载到了页面中,用户已经可以看到渲染好的页面了。实例创建期间的最后一个生命周期函数仅仅执行一次,当执行完 mounted 就表示,实例已经被完全创建好了,DOM 渲染在 mounted 中就已经完成了。

keep-alive 缓存特殊的两个阶段:

5、activated(组件激活时)

被 keep-alive 缓存的组件激活时调用。初始化操作放在actived里面

该钩子在服务器端渲染期间不被调用。

6、deactivated(组件停用时)

被 keep-alive 缓存的组件停用时调用。在deactived里面,在里面进行一些善后操作

该钩子在服务器端渲染期间不被调用。

添加keep-alive标签后会增加activated和deactivated这两个生命周期函数,初始化操作放在actived里面,一旦切换组件,因为组件没有被销毁,所以它不会执行销毁阶段的钩子函数,所以移除操作需要放在deactived里面,在里面进行一些善后操作,这个时候created钩子函数只会执行一次,销毁的钩子函数一直没有执行。

7、beforeUpdate(更新前)

运行中钩子函数beforeUpdate默认是不会执行的,当数据更改的时候,才会执行。数据更新的时候,先调用beforeUpdate,然后数据更新引发视图渲染完成之后,再会执行updated。运行时beforeUpdate这个钩子函数获取的数据还是更新之前的数据(获取的是更新前的dom内容),在这个钩子函数里面,千万不能对数据进行更改,会造成死循环。data 数据尚未和最新的数据保持同步。

8、updated(更新后)

这个钩子函数获取的数据是更新后的数据,生成新的虚拟dom,跟上一次的虚拟dom结构进行比较,比较出来差异(diff算法)后再渲染真实dom,当数据引发dom重新渲染的时候,在updated钩子函数里面就可以获取最新的真实dom了。页面和 data 数据已经保持同步了。

9、beforeDestory(销毁前)

切换路由的时候,组件就会被销毁了,销毁之前执行beforeDestroy。在这个钩子函数里面,我们可以做一些善后的操作,例如可以清空一下全局的定时器(created钩子函数绑定的初始化阶段的事件)、清除事件绑定。

Vue实例从运行阶段进入到了销毁阶段,这个时候上所有的 data 和 methods , 指令, 过滤器 ……都是处于可用状态。还没有真正被销毁

10、destoryed(销毁后)

组件销毁后执行destroyed,销毁后组件的双向数据绑定、事件监听watcher相关的都被移除掉了,对 data 的改变不会再触发周期函数但是组件的真实dom结构还是存在在页面中的。

这个时候上所有的 data 和 methods , 指令, 过滤器 ……都是处于不可用状态。组件已经被销毁了。

Vue2 与 Vue3 生命周期对比_第3张图片

1.vue请求数据放在created好还是mounted里好?

vue2.0建议放在created里
created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。

vue3.0放在onMounted()组件挂载完成后执行的函数。

如果在mounted钩子函数中请求数据可能导致页面闪屏问题
其实就是加载时机问题,放在created里会比mounted触发早一点,如果在页面挂载完之前请求完成的话就不会看到闪屏了。

2.请你说说vue中$nextTick用法及原理

vue在beforeCreate时期是获取不到data及methods里面的数据及方法的,不过还是有办法可以去获取到的,我们可以采用异步的方式,使用this.$nextTicksetTimeout

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

官方理解:Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM

个人理解:nextTick(),是将回调函数延迟在下一次dom更新数据后调用,即数据更新了,在dom渲染完成后调用该函数

Vue3

Vue2 与 Vue3 生命周期对比_第4张图片setup() :开始创建组件之前,在beforeCreatecreated之前执行。创建的是datamethod。

onBeforeMount() : 组件挂载到节点上之前执行的函数。

onMounted() : 组件挂载完成后执行的函数。

onBeforeUpdate(): 组件更新之前执行的函数。

onUpdated(): 组件更新完成之后执行的函数。

onBeforeUnmount(): 组件卸载之前执行的函数。

onUnmounted(): 组件卸载完成后执行的函数

onActivated(): 被包含在中的组件,会多出两个生命周期钩子函数,被激活时执行。

onDeactivated(): 比如从 A 组件,切换到 B 组件,A 组件消失时执行。

onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数。

onRenderTracked() 注册一个调试钩子,当组件渲染过程中追踪到响应式依赖时调用。个钩子仅在开发模式下可用,且在服务器端渲染期间不会被调用。

 onRenderTriggered() 

注册一个调试钩子,当响应式依赖的变更触发了组件渲染时调用。这个钩子仅在开发模式下可用,且在服务器端渲染期间不会被调用。

你可能感兴趣的:(Vue框架,javascript,前端,vue.js)