vue学习总结----什么是vue的生命周期及常见面试题

vue生命周期

  • 生命周期:每一个vue实例从创建到销毁的过程,就是这个vue实例的生命周期。在这个过程中,他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程/
  • 钩子函数:不需要触发,自定执行的函数就叫钩子函数。

Vue2.0的生命周期钩子一共有10个

beforeCreate—实例初始化

什么都是undefined

created----实例创建完成

Vue 实例观察的数据对象data已经配置好,已经可以得到app.message的值
属性和方法的运算
watch/event 事件回调
$el还是undefined

beforeMount —挂载之前被调用

相关的 render 函数首次被调用。
data和el均已经初始化
找到了挂载点el,el的值为“虚拟”的元素节点
{
    
    {
    
    }},v-for还没有解析

mounted----挂载完成执行的回调

el 被新创建的 vm.$el 替换
数据解析完成,页面初始化好了
运用场景:请求数据(ajax)、打开计时器、给window|document添加事件

beforeUpdate----更新之前执行的回调

发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程

页面更新之前,不是数据变化之前,所以拿到的是新值。
目前学到的知识中,只有data中的数据变了,才会触发更新期的执行

updated-----更新之后触发的钩子函数

由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作

activated---- keep-alive 组件激活时调用

deactivated—keep-alive 组件停用时调用。

beforeDestroy-----实例销毁之前调用

当vm.$destroy()触发了,就会进入销毁期
销毁之前:清除计时器、清除window|document上的事件

destroyed----Vue 实例销毁后调用

调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

总结

1、除了beforeCreate和created钩子之外,其他钩子均在服务器端渲染期间不被调用
### 

2、在created钩子中可以对data数据进行操作,这个时候可以进行ajax请求将返回的数据赋给data
3、在mounted钩子对挂载的dom进行操作
4、在使用vue-router时有时需要使用<keep-alive></keep-alive>来缓存组件状态,这个时候created钩子就不会被重复调用了,如果我们的子组件需要在每次加载的时候进行某些操作,可以使用activated钩子触发

常见关于vue生命周期的面试题

1、谈谈你对Vue生命周期的理解?

(1)生命周期是什么?
Vue 实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。

(2)各个生命周期的作用
beforeCreate 组件实例被创建之初,组件的属性生效之前

created 组件实例已经完全创建,属性也绑定,但真实 dom还没有生成,$el 还不可用

beforeMount 在挂载开始之前被调用:相关的 render 函数首次被调用 

mounted el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子 beforeUpdate 组件数据更新之前调用,发生在虚拟 DOM 打补丁之前

update 组件数据更新之后

beforeDestory 组件销毁前调用

destoryed 组件销毁后调用

2、一进来页面发起ajax在哪个阶段?

可以在钩子函数 created、beforeMount、mounted 中进行调用,因为在这三个钩子函数中,data 已经创建,可以将服务端端返回的数据进行赋值。(本人常放置到mounted中可以操作dom,当然也可以放到created中)

3、Vue的父组件和子组件生命周期钩子函数执行顺序

Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类
为以下 4 部分:

加载渲染过程:
	父 beforeCreate -> 父 created -> 父 beforeMount -> 子beforeCreate -> 子 created -> 子 beforeMount -> 子mounted -> 父 mounted

4、谈谈你对keep-alive的了解?

keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,避免重新渲染 ,其有以下特性:
对应两个钩子函数 activated 和 deactivated ,当组件被激活时,触发钩子函数 activated,当组件被移除时,触发钩子函数 deactivated;一般结合路由和动态组件一起使用,用于缓存组件;


5、keep-alive 会重复触发生命周期吗?如果想要重复触发的逻辑如何实现?

不会重复触发生命周期,如果想要重复触发的逻辑写在activated deactivated.

猜你喜欢

转载自blog.csdn.net/m0_62209297/article/details/125142088