vue的生命周期是什么
Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。
vue生命周期的作用是什么?
让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
要想很好滴了解Vue生命周期就要看下官方给的图
我们可以清晰的看出顺序从上到下被执行,其中我们能看见你的有8的标志性的函数我们先在来
介绍下!
1、创建前(beforeCreate)
对应的钩子函数为beforeCreate。此阶段为实例初始化之后,此时的数据观察和事件机制都未形成,不能获得DOM节点。
2、创建后(created)
对应的钩子函数为created。在这个阶段vue实例已经创建,仍然不能获取DOM元素。
3、载入前(beforeMount)
对应的钩子函数是beforeMount,在这一阶段,我们虽然依然得不到具体的DOM元素,但vue挂载的根节点已经创建, 下面vue对DOM的操作将围绕这个根元素继续进行;beforeMount这个阶段是过渡性的,一般一个项目只能用到一两次。
4、载入后(mounted)
对应的钩子函数是mounted。mounted是平时我们使用最多的函数了,一般我们的异步请求都写在这里。在这个阶段,发送请求 启动定时器 绑定自定义事件。
5、更新前(beforeUpdate)
对应的钩子函数是beforeUpdate。在这一阶段,vue遵循数据驱动DOM的原则。beforeUpdate函数在数据更新后虽然没立即更新数据,但是DOM中的数据会改变,这是Vue双向数据绑定的作用。
6、更新后(updated)
对应的钩子函数是updated。在这一阶段DOM会和更改过的内容同步。
7、销毁前(beforeDestroy)
对应的钩子函数是beforeDestroy。在上一阶段Vue已经成功的通过数据驱动DOM更新,当我们不再需要vue操纵DOM时, 就要解绑自定事件 清除定时器,取消订阅消息等收尾工作。
8、销毁后(destroyed)
对应的钩子函数是destroyed。在销毁后,会触发destroyed钩子函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="root">
<!-- <h2>当前n的值是:<span v-text="n"></span></h2>-->
<!-- <button @click="add">点我n++</button>-->
<!-- <button @click="bye">点击销毁vm</button>-->
</div>
<script src="./js/vue.js"></script>
<script>
Vue.config.productionTip = false;
let vm = new Vue({
el: '#root',
template: `
<div>
<h2>当前n的值是:<span v-text="n"></span></h2>
<button @click="add">点我n++</button>
<button @click="bye">点击销毁vm</button>
</div>`,
data() {
return {
n: 1
}
}, methods: {
add() {
console.log("执行了Add函数");
this.n++;
},
bye() {
console.log("执行了销毁函数");
this.$destroy();
}
}, watch: {
n() {
console.log("n变了");
}
},
beforeCreate() {
console.log("beforeCreate");
console.log(this.n);
},
created() {
console.log("created");
console.log(this.n);
}, beforeMount() {
console.log("beforeMount");
},mounted(){
console.log("mounted");
},beforeUpdate(){
console.log("beforeUpdate");
},
updated(){
console.log("updated");
},
beforeDestroy(){
console.log("beforeDestroy");
},
destroyed(){
console.log("destroyed");
}
});
</script>
</body>
</html>
我看看下执行的后台
创建前(beforeCreate):
console.log(this.$el);
console.log(this.$data);
输出结果为:undefined
此时模板和数据都未载入所以就是undefined。
当点击add()方法时beforeUpdate和Update函数启动
关闭后自动调用销毁函数。
此时整个生命周期就此结束。