vue的生命周期

cabacwj

于 2022-09-12 18:10:43 发布

阅读量41

点赞数 1

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/cabacwj/article/details/126820078

版权

1.什么的vue的生命周期

2.vue的生命周期的八个钩子函数

(1)beforeCreate()：在初始化数据监测、数据代理之前执行beforeCreate函数中的内容。此时，无法通过Vm访问到data中的数据、methods中的方法

(2)created()：在初始化数据监测、数据代理之后执行beforeCreate函数中的内容。此时可以通过vm访问到data中的数据、methods中配置的方法

(3)beforeMount()：在Vue完成虚拟DOM的生成之后，在将虚拟DOM转换为真实DOM之前执行。此时，页面呈现的是未经Vue编译的DOM结构，所有对DOM的操作，最终都不奏效。

(4)mounted()：在将虚拟DOM转换为真实DOM之后执行。此时，页面中呈现的是经过Vue编译的DOM，对DOM的操作均有效（尽可能避免）。至此初始化过程结束，一般在此进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件等初始化操作

(5)beforeUpdate()：在数据发生变化时，生成新的虚拟DOM，随后与旧的虚拟DOM进行比较，最终完成页面更新（Model-》View）的过程之前执行。此时，数据是新的，但页面是旧的，即，页面尚未和数据保持同步

(6)updated()：在数据发生变化时，生成新的虚拟DOM，随后与旧的虚拟DOM进行比较，最终完成页面更新（Model-》View）的过程之后执行。此时，数据是新的，页面也是新的，即，页面和数据保持同步

(7)beforeDestroy()：在移除数据监视、子级元素、事件监听之前执行。此时，vm中所有的data、methods、指令等都处于可用状态，马上要执行销毁过程，一般在此阶段：关闭定时器、取消订阅消息、解绑自定义事件等收尾操作。此时所有东西都可访问到，但是执行操作，页面上的内容不会发生改变

(8)destroyed()：在移除数据监视、子级元素、事件监听之后执行。解除与页面上data、methods、指令等的绑定。

3.vue生命周期的作用是什么

它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

生命周期的部分代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<div id="example">{{message}}</div>

<script src="./vue.js"></script>

<script>

var vm = new Vue({

el:'#example',

data:{

message:'natch'

},

beforeCreate(){

console.log('beforeCreate');

},

created(){

console.log('created');

},

beforeMount(){

console.log('beforMount');

},

mounted(){

console.loh('mouted');

},

beforeUpdate(){

console.log('beforeUpdate');

},

uodated(){

console.log('uodated');

},

beforeDestroy(){

console.log('beforDestroy');

},

destroyed(){

console.log('destroyed');

},

})

</script>

</body>

</html>