<!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>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!--
Vue的生命周期:
每一个vue实例从创建到销毁的过程,就是这个vue实例的生命周期。
在这个过程中,他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。
Vue生命周期分析:
1. 创造期间的生命周期函数:
* beforeCreate() :实例刚在内存中被创建出来,但还没有初始化好data和methods属性
* created() :实例已经在内存中创建OK,此时data和methods已经创建OK,还没有开始编译模板
* beforeMount() :此时已经完成了模板的编译,但还没有挂载到页面中
* mounted() :此时,已经将编译好的模板,挂载到了页面指定的容器中显示
2. 运行期间的生命周期函数:
* beforeUpdate() :状态更新之前执行此函数,此时data中的状态值是最新的,但是界面上显示的数据还是旧的,因为此时还没有开始重新渲染DOM节点
* updated() :实例更新完毕之后调用此函数,此时data中的状态值和界面上显示的数据都已经完成了更新,界面已经被重新渲染好了
3. 销毁期间的生命函数
* beforeDestory() : 实例销毁之前调用,在这一步,实例仍然完全可用
* destoryed() :Vue实例销毁后调用。调用后,Vue实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁
-->
<div id="app">
<input type="button" value="修改msg" @click="msg = 'msg被修改了'">
<input type="button" value="销毁实例" @click="destory">
<h3 id="h3">{{msg}}</h3>
</div>
<script>
// 创建Vue实例,得到ViewModel
const app = new Vue({
el: '#app',
data: {
msg: '得到了msg'
},
methods: {
show() {
console.log("执行了show方法");
},
destory() {
console.log("执行destory函数");
console.log(this);
this.$destroy();
}
},
beforeCreate() { // 实例完全被创建出来之前会执行它
console.log("--- beforeCreate ---");
console.log(this.msg); // undefined
},
created() { // 如果要调用methods中的方法,或操作data中的数据,最早只能在created中操作
console.log("--- created ---");
console.log(this.msg);
this.show();
},
beforeMount() { //已经在内存中编译好,但没有把模板挂载到页面
console.log("--- beforeMount ---");
console.log(document.getElementById('h3').innerText);
},
mounted() { //内存中的模板已经真实的挂载到了页面,实例已完全创建好了
console.log("--- mounted ---");
console.log(document.getElementById('h3').innerText);
},
beforeUpdate() { // 数据被更新了但界面还没有被更新
console.log("--- beforeUpdata ---");
console.log( '界面的msg: ' + document.getElementById('h3').innerText);
console.log( 'data中的msg: ' + this.msg);
},
updated() { // 页面和数据都已更新
console.log("--- updated ---");
console.log( '界面的msg: ' + document.getElementById('h3').innerText);
console.log( 'data中的msg: ' + this.msg);
},
beforeDestory() { // 实例被执行销毁操作但还没有被销毁
console.log("--- beforeDestory ---");
console.log(document.getElementById('h3').innerText);
},
destoryed() { // 实例被销毁
console.log("--- destoryed ---");
console.log(document.getElementById('h3').innerText);
}
})
</script>
</body>
</html>
更多相关内容大家可以前往我的个人博客浏览:eyes++的个人空间