在一个Vue实例中,生命周期函数的执行节点
<div id="app1"></div>
<script>
// 生命周期函数就是Vue 实例在某一个时间点会自动执行的函数
const vm = new Vue({
el: '#app1',
data: { },
// 声明Vue, 进行事件和生命周期的初始化之后
beforeCreate () {
console.log('beforeCreate');
},
// 通过依赖注入导入依赖项,简单来说这个过程就是初始化props、data、methods等--所谓依赖注入,vue中有provice和inject实现父组件向子孙组件注入依赖;
created () {
console.log(this.$el);
console.log('create');
},
// 初始化操作完成,判断有无 'el' ,若没有就通过vm.$mount()挂载,然后再向下执行,
// 判断是否有模板(template),若没有则将'el' 外层的HTML当成模板
// 模板和数据结合,即将挂载到页面前,与create()的直观区别就是已经有了DOM树
beforeMount () {
console.log('beforeMount');
},
// 页面挂载之后
mounted () {
console.log(this.$el);
console.log('mounted');
},
// 组件挂载到页面之后,当有数据更新前
beforeUpdate () {
console.log('beforeUpdate');
},
updated () {
console.log('update');
},
// 组件被销毁前, 销毁--vm.$destroy()
beforeDestroy () {
console.log('beforeDestroy');
},
// 组件被销毁后
destroyed () {
console.log('destroy');
}
})
</script>
官网上的生命周期图示