生命周期钩子的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>
运行代码:
三秒之后: