当前位置：网站首页 > 技术分类 > 正文

不来看看这些 VUE 的生命周期钩子函数?| 原力计划

ztj100 2025-04-30 21:22 3 浏览 0 评论

作者 | huangfuyk

责编 | 王晓曼

出品 | CSDN 博客

VUE的生命周期钩子函数：就是指在一个组件从创建到销毁的过程自动执行的函数，包含组件的变化。可以分为：创建、挂载、更新、销毁四个模块。

注：在组件的整个生命周期内，钩子函数都是可被自动调用的，且生命周期函数的执行顺序与书写的顺序无关。

图示：

BeforeCreate

该函数执行在组件创建、数据观测 (data observer) 和 event/watcher 事件配置之前，实例初始化之后被调用。

在该阶段组件未创建，不能访问数据，组件中的 data，ref 均为 undefined。

Created

该函数在组件创建完成后被立即调用，在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。

但是还未渲染成HTML模板，组件中的data对象已经存在，可以对data进行操作了，即可以访问数据，发请求，ref依旧是undefined，挂载阶段还没开始，$el 属性目前尚不可用。

一般我们可以将对数据的初始化和初始化页面的请求放到里面，结束loading。

Created 实例：1、RAP2 模拟一个后端接口（
http://rap2.taobao.org:38080/app/mock/252122/test），使用 created 拿数据。

2、RAP2操作界面如下：

3、代码：

<div id="box">
<ul>
<li v-for="item in list" :key="item.id">{{item.name}}</li>
</ul>
</div>
<script>
new Vue({
el:"#box",
data:{
list:
},
created{
fetch('http://rap2.taobao.org:38080/app/mock/252122/test')
.then(res=>res.json)
.then((res)=>{
if(res.code===200){
this.list = res.data.list;
}
})
},
beforeCreate{
},
})
</script>

4、结果

BeforeMount

该函数在组件挂载之前，在该阶段页面上还没渲染出 HTML 元素，data 初始化完成，ref 依旧不可以操作，相关的 render 函数首次被调用。

可以访问数据，编译模板结束，虚拟 dom 已经存在。

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

Mounted

该函数是页面完成挂载之后执行的，这时 el 被新创建的 vm.$el 替换了，就可以操作 ref 了，一般会用于将组件初始时请求数据的方法放到这里面，filter 也是在这里生效。

如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。

可以拿到数据和节点，实例被挂载后调用。

注意：mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick：

mounted: function  {
this.$nextTick(function {
// Code that will run only after the
// entire view has been rendered
})
}

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

1、beforeMount与mounted实例①：

（ref表示节点；this.$refs.ref的标识，就可拿到节点）

<div id="box">
<div ref='demo'>demo</div>
</div>
<script>
new Vue({
el:"#box",
data:{
a:666
},
mounted{
console.log('mounted',this.a);
},
beforeMount{
console.log('beforeMount',this.a);
console.log(this.$refs.demo);
}
})
</script>

结果：

2、beforeMount与mounted实例②：

<div id="box">
<div ref='demo'>demo</div>
</div>
<script>
new Vue({
el:"#box",
data:{
a:666
},
mounted{
console.log('mounted',this.a);
console.log(this.$refs.demo);
},
beforeMount{
console.log('beforeMount',this.a);
}
})
</script>

结果：

3、beforeMount与mounted实例③：

（节点挂载后，文本框自动获取焦点）

<div id="box">
<input type="text" ref='txt'>
</div>
<script>
new Vue({
el:"#box",
data:{
a:666,
},
mounted{
console.log('mounted',this.a);
this.$refs.txt.focus;
},
beforeMount{
console.log('beforeMount',this.a);
}
})
</script>

结果：

以上两个实例，更加有力的说明：

beforeMount执行在真实的dom节点挂载之前，此时没有节点，所以拿不到节点。mounted执行时真实的dom节点已经挂载到页面上了，所以能拿到节点。

例：beforeCreate、created、beforeMount、mounted执行顺序差别演示：

（因为它们此时都是对象，所以它们代码的摆放位置是不影响结果的。）

<div id="box"></div>
<script>
new Vue({
el:"#box",
data:{
a:666,
},
created{
console.log("created",this.a);
},
beforeCreate{
console.log('beforeCreate',this.a);
},
mounted{
console.log('mounted',this.a);
},
beforeMount{
console.log('beforeMount',this.a);
}
})
</script>

结果：

BeforeUpdate

该函数在数据更新时调用，发生在虚拟 DOM 打补丁之前，在有特殊需求的情况下，可以将更新之前的数据存起来，放到后面去使用。

这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。

Updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子，在数据更新之后做一些处理，即监控数据的变化。

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。

注意：updated 不会保证所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以在 updated 里使用 vm.$nextTick：

updated: function  {
this.$nextTick(function {
// Code that will run only after the
// entire view has been re-rendered
})
}

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

注意：

watch是监控特定数据的变化，而updated是监控组件里所有数据的变化。

例：beforeUpdate与updated执行演示：

<body>
<div id="box">
<input type="range" min="1" max="100" v-model="n" />
<Com :n="n"></Com>
</div>
<script>
var Com = {
props:["n"],
template: `<div>{{n}}</div>`,
//这两个钩子会在数据更新时被调用
beforeUpdate{
console.log("beforeUpdate")
},
updated{
console.log("updated")
}
};
new Vue({
el: '#box',
components: {
Com,
},
data:{
n:1
}
});
</script>

结果：

BeforeDestroy

该函数在实例销毁之前调用，这里的 ref 依旧可以操作，实例仍然完全可用，可以在这里做清除定时器的操作，防止内存泄漏。

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

Destroyed

该函数在组件销毁的时候执行，即实例销毁后调用，这里的 ref 不存在。

该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

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

例：beforeDestroy与destroyed执行演示：

（this.$destroy()可以销毁组件）

<div id="box">
<Com></Com>
</div>
<script>
var Com = {
template: `<div>
<button @click="kill">kill</button>
</div>`,
mounted {
this.timer = setInterval(=>{
console.log("hello");
},1000)
},
beforeDestroy{
clearInterval(this.timer);
console.log("beforeDestory")
},
destroyed{
console.log("destoryed")
},
methods:{
kill{ //销毁组件
this.$destroy
}
}
};
new Vue({
el: '#box',
components: {
Com,
},
});
</script>

结果：

注：组件进行销毁的时候,是先销毁的是父组件,然后销毁子组件。

Activated

被 keep-alive 缓存的组件激活时调用。

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

Deactivated

被 keep-alive 缓存的组件停用时调用。

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

例：activated与deactivated执行演示：

<div id="box">
<keep-alive>
<component :is="cName"></component>
</keep-alive>
<button @click="cName='One'">change1</button>
<button @click="cName='Two'">change2</button>
</div>
<script>
var One ={
template:`<div>one component</div>`,
activated{
console.log("activated");
},
deactivated{
console.log("deactivated");
}
}
var Two ={
template:`<div>two component</div>`,
}
new Vue({
el:"#box",
components:{
One,Two
},
data:{
cName:'One' //存组件的名字
}
})
</script>

结果：

ErrorCaptured

类型：(err: Error, vm: Component, info: string) => ?boolean。

当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

我们可以在此钩子中修改组件的状态。因此在捕获错误时，在模板或渲染函数中有一个条件判断来绕过其它内容就很重要；不然该组件可能会进入一个无限的渲染循环。

默认情况下，如果全局的 config.errorHandler 被定义，所有的错误仍会发送它，因此这些错误仍然会向单一的分析服务的地方进行汇报。
如果一个组件的继承或父级从属链路中存在多个 errorCaptured 钩子，则它们将会被相同的错误逐个唤起。
如果此 errorCaptured 钩子自身抛出了一个错误，则这个新错误和原本被捕获的错误都会发送给全局的config.errorHandler。
一个 errorCaptured 钩子能够返回 false以阻止错误继续向上传播。本质上是说“这个错误已经被搞定了且应该被忽略”。它会阻止其它任何会被这个错误唤起的 errorCaptured钩子和全局的 config.errorHandler。

原文链接：
https://blog.csdn.net/weixin_42881768/article/details/105747563


尤雨溪：重头来过的 Vue 3 带来了什么？
活跃了 40 年的 AWK 现在怎么样了？
可怕！CPU 竟成了黑客的帮凶！
如何用NLP辅助投资分析？三大海外机构落地案例详解
这 10 个云计算错误，会让你的业务一蹶不振！
好扑科技结合区块链行业发展趋势，重磅推出“好扑区块链合伙人”计划

vue refs

上一篇：Vue3.5正式上线，父传子props用法更丝滑简洁
下一篇：基于 vue3.0 桌面端朋友圈/登录验证+60s倒计时

不来看看这些 VUE 的生命周期钩子函数?| 原力计划

相关推荐

取消回复欢迎你发表评论:

Vue自定义Hook示例:useUrlState（vue中的自定义指令如何使用）

Vue-实现自定义插件弹窗（vue 实现弹窗）

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起

什么是幂等?分布式锁如何实现业务幂等?

如何快速切换node版本?利用n包快速切换nodejs版本

【Python机器学习系列】建立多层感知机模型预测心脏疾病

如何发个 npm 包?

手把手教你搞定菜单权限设计，精确到按钮级别，建议收藏

详解MySQL 字符串拼接之concat\concat_ws\group_concat

让Jenkins自动部署你的Vue项目「实践」

不来看看这些 VUE 的生命周期钩子函数?| 原力计划

相关推荐

取消回复欢迎 你 发表评论:

Vue自定义Hook示例:useUrlState（vue中的自定义指令如何使用）

Vue-实现自定义插件弹窗（vue 实现弹窗）

旗舰机新标杆 OPPO Find X2系列正式发布 售价5499元起

什么是幂等?分布式锁如何实现业务幂等?

如何快速切换node版本?利用n包快速切换nodejs版本

【Python机器学习系列】建立多层感知机模型预测心脏疾病

如何发个 npm 包?

手把手教你搞定菜单权限设计，精确到按钮级别，建议收藏

详解MySQL 字符串拼接之concat\concat_ws\group_concat

让Jenkins自动部署你的Vue项目「实践」

取消回复欢迎你发表评论:

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起