生命周期钩子的API:https://cn.vuejs.org/v2/api/#选项-生命周期钩子
学习官网教程。纪录练习。
生命周期钩子需要写在new Vue()时传递的对象内,以属性的方式进行声明。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg: 'hi vue'
},
//在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
beforeCreate: function(){
console.log('beforeCreate');
},
/*在实例创建完成后被立即调用。
在这一步,实例已完成以下的配置:数据观测 (data observer),property 和方法的运算,watch/event 事件回调。
然而,挂载阶段还没开始,$el property 目前尚不可用。*/
created: function(){
console.log('created');
},
//在挂在开始之前被调用,相关的渲染函数首次别调用
beforeMount: function(){
console.log('mounted');
},
//el被新创建的vm.$el替换,挂载成功
mounted: function(){
console.log('mounted');
},
//数据更新时调用
beforeUpdate: function(){
console.log('beforeUpdate');
},
//组件DOM已经更新,组件更新完毕
updated: function(){
console.log('updated');
}
});
setTimeout(function(){
vm.msg = "change..."
}, 3000);
</script>
</body>
</html>


运行代码:

三秒之后:
