版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u012326462/article/details/82820742
首先看下面代码:
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset="utf-8"/>
<title>Hello world</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">hello world</div>
<script>
//生命周期函数就是vue实例在某一个时间点会自动执行的函数
var vm = new Vue({
el:"#app",
template:"<div>{{test}}</div>",
data:{
test:'test hello'
},
beforeCreate: function(){
console.log("before create"); //vue实例初始化后执行
},
created: function(){
console.log("created"); //外部注入,双向绑定等完成后执行
},
beforeMount: function(){
console.log("before mount");
console.log(this.$el); //页面还没有被渲染
},
mounted: function(){
console.log("mounted");
console.log(this.$el); //页面渲染完
},
beforeDestroy: function(){ //当vm.$destory()方法执行时
console.log("beforeDestory");
},
destroyed: function(){
console.log("destoryed");//组件被完全销毁后
},
beforeUpdate:function(){
console.log("beforeUpdate");
},
updated: function(){
console.log("updated");
}
})
</script>
</body>
</html>
声明周期就是vue实例在某一个时间点会自动执行的函数,这些函数没有放在methods里面,直接在vue实例下。
beforeCreate: vue实例初始化后执行
created:外部注入,双向绑定等完成后执行
beforeMount:页面还没有被渲染
mounted:页面渲染完
beforeDestroy:当vm.$destory()方法执行时
destroyed:组件被完全销毁后
beforeUpdate:属性值有变化时
updated:属性值变化后