3.vue生命周期钩子函数有哪些?,vue3生命周期钩子函数
本文主要介绍vue中的生命周期和钩子函数。一个Vue实例有一个完整的生命周期，就是从开始，创建，初始化数据，编译模板，挂载Dom，渲染。下面文章详细介绍，有需要的朋友可以参考一下。
:
目录
1.什么是生命周期2。2.vue 3的生命周期。生命周期挂钩功能
1.什么是生命周期
Vue实例有一个完整的生命周期，即从开始创建、初始化数据、编译模板、挂载Dom、渲染更新渲染、卸载等一系列过程。我们称之为Vue的生命周期。一般来说，Vue实例从创建到销毁的过程就是生命周期。
在vue的整个生命周期中，它提供了一系列的事件，允许我们在事件被触发时注册js方法，用我们注册的js方法控制全局。这在这些事件响应方法中直接指向Vue的实例。
2.vue 的生命周期
生命周期函数，也叫钩子函数(生命周期钩子===生命周期函数==生命周期事件)
vue中的生命周期函数一般成对出现。所以我们两人一组比较一下他们的区别。
要牢记的10个生命周期功能！具体使用！
3.生命周期钩子函数
特点：是自动调用的，但是他们调用的时间节点是先后。
在官网上拿了张图：
BeforeCreate - vue实例创建前，注意：在此函数中，vue中数据中心的数据不可读。
脚本src=。/js/vue.js/script
脚本
让vm=new Vue({
埃尔： #app ，
数据：{
名字：哈哈哈，
编号：1111
},
方法：{
},
//在创建Vue实例之前
创建之前(){
console . log( before create )；
console . log(this . name)；
}
/脚本
输出数据中心的 name 是读不到的：
Created - vue实例创建后，注意：在此功能中，可以识别vue中数据中心的数据。
脚本src=。/js/vue.js/script
脚本
让vm=new Vue({
埃尔： #app ，
数据：{
名字：哈哈哈，
编号：1111
},
//创建vue实例后
已创建(){
console . log( created )；
console . log(this . name)；
}
})
/脚本
查看结果：
在装上这个之前。挂载DOM之前的El——此时的El是一个“虚拟”DOM节点
在视图层渲染标签:
div id=应用程序
p{{name}}/p
p{{num}}/p
/div
脚本src=。/js/vue.js/script
脚本
让vm=new Vue({
埃尔： #app ，
数据：{
名字：哈哈哈，
编号：1111
},
//在挂载DOM之前
beforeMount(){
console . log( before mount )；
//查看dom元素
console . log(document . body . query selector( # app )。innerHTML)；
}
})
/脚本
dom挂载前输出结果：
装上这个。挂载DOM后的El——此时的El是“真正的”DOM节点
脚本src=。/js/vue.js/script
脚本
让vm=new Vue({
埃尔： #app ，
数据：{
名字：哈哈哈，
编号：1111
},
//安装DOM后
已安装(){
console.log(mounted )。
console . log(document . body . query selector( # app )。innerHTML)；
}
})
/脚本
查看输出结果：
之前-数据更新之前(视图层中数据更改之前和之后)更新-数据更新之后(视图层中数据更改之前和之后)在视图层通过 点击让 num 的数值发生改变来模拟数据更新，查看结果：
div id=应用程序
p id=num{{num}}/p
Button @click=num Click数据更新(数字1)/button
/div
//数据更新前
更新之前(){
Console.log(更新前-数据更新前)；
//查看dom元素
console . log(document . body . query selector( # num )。innerHTML)；
},
//数据更新后
已更新(){
console . log( updated-在数据更新后)；
//查看dom元素
console . log(document . body . query selector( # num )。innerHTML)；
}
此时数据无变化时，在控制台是看不到效果的，当我们点击按钮后：
这就是这篇关于vue中生命周期和钩子函数的文章。关于vue中生命周期挂钩功能的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。