vue3 生命周期,vue中生命周期函数

　　本文详细阐述了Vue3的生命周期功能和方法。对大家的学习或工作都有一定的参考价值。让我们和边肖一起为有需要的朋友学习吧。

1. 概述

　　所谓生命周期功能，就是在一定条件下自动触发的功能。

2. VUE3 生命周期函数介绍

2.1 beforeCreate

　　在生成VUE实例之前将自动执行的函数。

2.2 created

　　生成VUE实例后将自动执行的功能。

2.3 beforeMount

　　在组件内容呈现到页面之前自动执行的函数。

2.4 mounted

　　组件内容呈现到页面后自动执行的函数。

2.5 beforeUpdate

　　在数据中的数据发生变化之前执行的函数。

2.6 updated

　　当数据中的数据发生变化时执行的函数。

2.7 beforeUnmount

　　在VUE实例与元素解除绑定之前执行的函数。

2.8 unmounted

　　VUE实例与元素解除绑定后执行的函数。

3. 代码例子

　　脚本src=./vue.global.js/script

　　/头

　　身体

　　div id=myDiv/div

　　/body

　　脚本

　　//生命周期函数：某个时刻会自动执行的函数。

　　Const app=vue.createApp({ //创建一个vue应用程序实例

　　data() {

　　返回{

　　消息：“你好”

　　}

　　},

　　//在生成实例之前将自动执行的函数

　　创建之前(){

　　警报(“创建前”)

　　},

　　//生成实例后将自动执行的函数

　　已创建(){

　　警报(“已创建”)

　　},

　　//在组件内容呈现到页面之前自动执行的函数

　　beforeMount() {

　　alert( before mount: document . getelementbyid( my div )。innerHTML)

　　},

　　//组件内容呈现到页面后自动执行的函数

　　Mounted() {//绑定后自动执行

　　alert( mounted: document . getelementbyid( my div )。innerHTML)

　　},

　　//在数据中的数据改变之前执行

　　更新之前(){

　　alert( before update: document . getelementbyid( my div )。innerHTML)；

　　},

　　//当数据中的数据发生变化时执行。

　　已更新(){

　　alert( updated: document . getelementbyid( my div )。innerHTML)；

　　},

　　//解除绑定前要执行的函数

　　卸载之前(){

　　alert( before unmount: document . getelementbyid( my div )。innerHTML)；

　　},

　　//解除绑定后要执行的函数

　　卸载(){

　　alert( unmounted: document . getelementbyid( my div )。innerHTML)；

　　},

　　//如果没有模板，则取绑定元素下面的子元素作为模板。

　　模板：“div{{message}}/div”

　　});

　　//vm是vue应用的根组件。

　　const VM=app . mount( # myDiv )；//绑定id为myDiv的元素

　　//更新数据

　　vm。$data.message=hello world！；

　　//解除绑定

　　app . unmount()；

　　/脚本

4. 综述

　　以上是边肖介绍的Vue3生命周期功能和方法的详细说明。希望对你有帮助。非常感谢您对我们网站的支持！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。