vue每个组件都是独立的,每个组件都有一个属于它的生命周期,从一个组件创建、数据初始化、挂载、更新、销毁,这就是一个组件所谓的生命周期。
vue对象核心的四个阶段八个钩子函数:
- 1)、数据挂载阶段 :把传入的data属性的内容,赋给vue对象。
前后分别的钩子函数是:beforeCreate、created - 2)、模板渲染阶段:把vue对象中data渲染到dom对象上。
前后分别的钩子函数是:beforeMount、mounted - 3)、组件更新阶段:当数据发生变化时,会触发组件的更新。
前后分别的钩子函数是:beforeUpdate、updated - 4)、组件销毁阶段:
前后分别的钩子函数是:beforeDestroy、destroyed
- 如果组件在<keep-alive></keep-alive>缓存的话,那么,组件切换时,会调用的钩子函数是:
-
activated 和 deactivated
image.png
<script>
let vm = new Vue({
el: '#app',
data: {
msg: 'aaaa'
},
beforeCreate() {
console.log('===beforeCreate===');
console.log(this.msg);
},
created() {
console.log('===created===');
console.log(this.msg);
},
beforeMount() {
console.log('===beforeMount===');
console.log(this.msg);
},
mounted() {
console.log('===mounted===');
console.log(this.msg);
},
beforeUpdate() {
console.log('===mounted===');
console.log(this.msg);
},
updated() {
console.log('===mounted===');
console.log(this.msg);
}
})
</script>
网友评论