生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程 :创建实例,装载模板,渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数(监听函数)。每当Vue实例处于不同的生命周期时,对应的函数就会被触发调用。
钩子函数
- 例1:created代表在vue实例创建后;我们可以在Vue中定义一个created函数,代表这个时期的构造函数:
<div id="app">
{{hello}}
</div>
<script src="vue-2.5.17.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
hello:''
},
created(){
this.hello = 'czdx,一统江湖,千秋万代'
}
});
</script>
结果:
- 例2,Vue中各大钩子函数测试代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vuejs生命周期</title>
<script src="vuejs-2.5.17.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
message: 'hello world'
},
beforeCreate: function() {
showData('创建vue实例前', this);
},
created: function() {
showData('创建vue实例后', this);
},
beforeMount: function() {
showData('挂载到dom前', this);
},
mounted: function() {
showData('挂载到dom后', this);
},
beforeUpdate: function() {
showData('数据变化更新前', this);
},
updated: function() {
showData('数据变化更新后', this);
},
beforeDestroy: function() {
showData('vue实例销毁前', this);
},
destroyed: function() {
showData('vue实例销毁后', this);
}
});
function realDom() {
console.log('真实dom结构:' + document.getElementById('app').innerHTML);
}
function showData(process, obj) {
console.log(process);
console.log('data 数据:' + obj.message)
console.log('挂载的对象:')
console.log(obj.$el)
realDom();
console.log('------------------')
console.log('------------------')
}
vm.message = "good...";
vm.$destroy();
</script>
</html>
结果:这个一定要自己亲自动手测试才能体会到Vue的强大之处。
要是还有不太明白的地方请留言,评论必回
要是对我的文章感兴趣的话,关注一下吧,谢谢!