一、Vue的生命周期
Vue的生命周期中有多个钩子函数,可以让我们在控制整个Vue实例的过程当中,更容易造成良好的逻辑。
Vue的生命周期分为八个:创建前/后,载入前/后,更新前/后,销毁前/后。
1、创建前(beforeCreate)
beforeCreate阶段,vue实例的挂载元素$el和数据对象data都为undefined,还未初始化。
<!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-demo例子</title>
<script src="vue.js"></script>
</head>
<body>
<div ref="app" id="app">
<input v-model="number">
<p>数字:{{ number }}</p>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
number:"2",
},
beforeCreate(){
console.log('即将创建'); //即将创建
console.log(this.$data); //undefined
console.log(this.$el); //undefined
}
});
</script>
</body>
</html>
2、创建后(created)
created阶段,vue实例的数据对象data有了,$el还没有,即dom还没有创建。
<!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-demo例子</title>
<script src="vue.js"></script>
</head>
<body>
<div ref="app" id="app">
<input v-model="number">
<p>数字:{{ number }}</p>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
number:"2",
},
beforeCreate(){
console.log('即将创建'); //即将创建
console.log(this.$data); //undefined
console.log(this.$el); //undefined
},
created(){
console.log('创建完毕');
console.log(this.$data); //变量创建完毕,data的值已经有了
console.log(this.$el); //但是dom还没有创建--依然是undefined
}
});
</script>
</body>
</html>
3、载入前(beforeMount)
beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换,即可认为$el里面的各元素还未赋值。
<!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-demo例子</title>
<script src="vue.js"></script>
</head>
<body>
<div ref="app" id="app">
<input v-model="number">
<p>数字:{{ number }}</p>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
number:"2",
},
beforeCreate(){
console.log('即将创建'); //即将创建
console.log(this.$data); //undefined
console.log(this.$el); //undefined
},
created(){
console.log('创建完毕');
console.log(this.$data); //变量创建完毕,data的值已经有了
console.log(this.$el); //但是dom还没有创建--依然是undefined
},
beforeMount(){
console.log('即将挂载'); //$el和data都已初始化
console.log(this.$el); //即将挂载,为虚拟的dom节点,但是里面各元素还没有赋值
}
});
</script>
</body>
</html>
最后beforeMounte()输出为:
4、载入后(mounted)
mounted阶段,vue实例挂载完成,data.message成功渲染,即可认为$el里面的各元素已经赋值。
<!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-demo例子</title>
<script src="vue.js"></script>
</head>
<body>
<div ref="app" id="app">
<input v-model="number">
<p>数字:{{ number }}</p>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
number:"2",
},
beforeCreate(){
console.log('即将创建'); //即将创建
console.log(this.$data); //undefined
console.log(this.$el); //undefined
},
created(){
console.log('创建完毕');
console.log(this.$data); //变量创建完毕,data的值已经有了
console.log(this.$el); //但是dom还没有创建--依然是undefined
},
beforeMount(){
console.log('即将挂载'); //$el和data都已初始化
console.log(this.$el); //即将挂载,为虚拟的dom节点,但是里面各元素还没有赋值
},
mounted(){
console.log('挂载完毕');
console.log(this.$el); //dom已经创建,里面各元素已赋值--适用于挂载元素,获取到DOM节点
},
});
</script>
</body>
</html>
最后mounted()输出结果为:
5、更新前(beforeUpdate)
当数据将要变化时,会触发beforeUpdate()方法。
<!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-demo例子</title>
<script src="vue.js"></script>
</head>
<body>
<div ref="app" id="app">
<input v-model="number">
<p>数字:{{ number }}</p>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
number:"2",
},
beforeCreate(){
console.log('即将创建'); //即将创建
console.log(this.$data); //undefined
console.log(this.$el); //undefined
},
created(){
console.log('创建完毕');
console.log(this.$data); //变量创建完毕,data的值已经有了
console.log(this.$el); //但是dom还没有创建--依然是undefined
},
beforeMount(){
console.log('即将挂载'); //$el和data都已初始化
console.log(this.$el); //即将挂载,为虚拟的dom节点,但是el里面各元素还没有赋值
},
mounted(){
console.log('挂载完毕');
console.log(this.$el); //dom已经创建,里面各元素已赋值--适用于挂载元素,获取到DOM节点
},
beforeUpdate(){
console.log('=即将更新渲染=');
let name = this.number; //更改数据时,这个地方已经是新值了。
let test = this.$refs.app.innerHTML; //更改数据时,这个地方还是旧值!
console.log('name:'+name); //打印出新值
console.log('test:'+test); //打印出旧值
console.log(this.$el); //但是$el里面各元素为新值
}
});
</script>
</body>
</html>
将输入框的值从2改为8,beforeUpdate()输出结果为:
6、更新后(updated)
当数据变化完成时,会触发update()方法。
<!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-demo例子</title>
<script src="vue.js"></script>
</head>
<body>
<div ref="app" id="app">
<input v-model="number">
<p>数字:{{ number }}</p>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
number:"2",
},
beforeCreate(){
console.log('即将创建'); //即将创建
console.log(this.$data); //undefined
console.log(this.$el); //undefined
},
created(){
console.log('创建完毕');
console.log(this.$data); //变量创建完毕,data的值已经有了
console.log(this.$el); //但是dom还没有创建--依然是undefined
},
beforeMount(){
console.log('即将挂载'); //$el和data都已初始化
console.log(this.$el); //即将挂载,为虚拟的dom节点,但是el里面各元素还没有赋值
},
mounted(){
console.log('挂载完毕');
console.log(this.$el); //dom已经创建,里面各元素已赋值--适用于挂载元素,获取到DOM节点
},
beforeUpdate(){
console.log('=即将更新渲染=');
let name = this.number; //更改数据时,这个地方已经是新值了。
let test = this.$refs.app.innerHTML; //更改数据时,这个地方还是旧值!
console.log('name:'+name); //打印出新值
console.log('test:'+test); //打印出旧值
console.log(this.$el); //但是$el里面各元素为新值
},
updated(){
console.log('=更新成功=');
let name = this.number; //更改数据时,这个地方已经是新值了。
let test = this.$refs.app.innerHTML; //更改数据时,这个地方也是新值。
console.log('name:'+name); //打印出新值
console.log('test:'+test); //也是打印出新值
console.log(this.$el); //$el里面各元素为新值
}
});
</script>
</body>
</html>
将输入框的值从2改为8,update()输出结果为:
7、销毁前(beforeDestory)
beforeDestory阶段,在执行destory()方法时会触发。
<!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-demo生命周期updated</title>
<script src="vue.js"></script>
</head>
<body>
<div ref="app" id="app">
{{ name }}
</div>
<script>
let vm = new Vue({
//挂载元素
el:'#app',
//实例vm的数据
data:{
name:"大帅B"
},
beforeDestroy(){
console.log('销毁之前');
},
destroyed(){
console.log('销毁成功');
}
});
//在浏览器控制台修改vm.name='更新视图'
// 输出结果为:
// 更新视图
//在浏览器控制台修改vm.$destroy();
// 输出结果为:
// 销毁之前
// 销毁成功
// 在浏览器控制台再次输入 vm.name='再次测试下'
// 页面没有反应,页面的值没有变化
</script>
</body>
</html>
8、销毁后(destoryed)
destoryed阶段,在执行destory()方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在。