Vue实例的生命周期:
开始创建、初始化数据、编译模板、挂载Dom、渲染->更新->渲染、销毁
生命周期阶段:
初始化、运行、销毁
new Vue() ->
创建前后:beforeCreate() -> created() ->
挂载前后:beforeMount() -> mounted() ->
更新前后:beforeUpdate() -> updated() ->
销毁前后:brforeDestory() -> destoryed()
- 运行之前要引入 Vue
- 官方地址:https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js
<!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>Vue生命周期</title>
</head>
<body>
<div id="app">
<!-- <h2 id="msg">{{message}}</h2> -->
<!-- <button @click="show">更换message</button> -->
</div>
</body>
<!--
<script src="这里输入vue.js的路径"></script>
-->
<script>
var vm = new Vue({
el: "#app",
data: {
// message: '数据信息'
},
methods: {
show: function(){
// this.message = '被更改';
// console.log('调用了show方法');
}
},
// 初始化阶段
beforeCreate(){
// console.log(this.message); // undefined
// this.show(); // TypeError: this.show is not a function(报错)
},
created(){
// console.log(this.message); // 数据信息
// this.show(); // 调用了show方法
},
beforeMount(){
// console.log( document.getElementById('msg').innerText ); // {{message}}
},
mounted(){
// console.log( document.getElementById('msg').innerText ); // 数据信息
},
// 运行阶段
beforeUpdate(){
// console.log( document.getElementById('msg').innerText ); // 数据信息
},
updated(){
// console.log( document.getElementById('msg').innerText ); // 被更改
},
// 销毁阶段
beforeDestroy(){
// console.log("此时data, methods等都处于可用状态,还未完全销毁");
},
destroyed(){
// console.log("此时data, methods等都不能使用,完全销毁");
}
})
</script>
</html>
初始化阶段一:
beforeCreate() 执行时,data、methods 的数据没有初始化
created() 执行时, data、methods 的数据被初始化
// javascript内的代码
data: {
message: '数据信息'
},
methods: {
show: function(){
// this.message = '被更改';
console.log('调用了show方法');
}
},
// 初始化阶段一
beforeCreate(){
console.log(this.message); // 控制台输出:undefined
this.show(); // 控制台输出:TypeError: this.show is not a function(报错)
},
created(){
console.log(this.message); // 控制台输出:数据信息
this.show(); // 控制台输出:调用了show方法
}
初始化阶段二:
beforeMount() 执行时,模板没有挂载到页面中
mounted() 执行时,模板挂载到页面,实例创建完成
<!-- body内的代码 -->
<div id="app">
<h2 id="msg">{{message}}</h2>
<!-- <button @click="show">更换message</button> -->
</div>
// javascript内的代码
data: {
message: '数据信息'
},
methods: {
show: function(){
// this.message = '被更改';
console.log('调用了show方法');
}
},
// 初始化阶段二
beforeMount(){
console.log( document.getElementById('msg').innerText ); // 控制台输出:{{message}}
},
mounted(){
console.log( document.getElementById('msg').innerText ); // 控制台输出:数据信息
},
点击 “更换message” 按钮 进入到 运行阶段:
beforeUpdate() 执行时,页面没有和最新数据保持同步,页面中显示的数据时原来的
updated() 执行时,页面与最新数据保持同步,页面中的数据被更改为最新的
<!-- body内的代码 -->
<div id="app">
<h2 id="msg">{{message}}</h2>
<button @click="show">更换message</button>
</div>
// javascript内的代码
data: {
message: '数据信息'
},
methods: {
show: function(){
this.message = '被更改';
// console.log('调用了show方法');
}
},
// 运行阶段
beforeUpdate(){
console.log( document.getElementById('msg').innerText ); // 控制台输出:数据信息
},
updated(){
console.log( document.getElementById('msg').innerText ); // 控制台输出:被更改
},
关闭页面后进入到 销毁阶段:
// 销毁阶段
beforeDestroy(){
console.log("此时data, methods等都处于可用状态,还未完全销毁");
},
destroyed(){
console.log("此时data, methods等都不能使用,完全销毁");
}