vue的生命8个生命周期
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroy
在new Vue()
的时候,初始化事件生命周期
各个生命周期分别做了哪些事情
beforeCreate
初始化
created
Vue.$data 已经初始化
父子组件共存时,会优先执行父组件的created,再执行子组件的created事件,
这说明父组件需要线创造容器,然后才能在创建子组件
beforeMount
Vue.$el挂在前
mounted
Vue.$el已经挂在完成
父子组件共存时,会优先执行子组件的mounted,在执行父组件的mounted,这很好去理解,子组件时零散的,可能有很多个,只有完成一个个零散的子组件的dom,才能将一个完整的dom去挂载到$el上
当父子组件共存时,事件加载顺序时这样的:
- beforeCreated父节点
- created父节点
- beforeMount父节点
- beforeCreated子节点
- created子节点
- beforeMount子节点
- mounted子节点
- mounted父节点
beforeUpdate
当data里的数据更改时
updata
当data里的数据更改时
当父组件向子组件传值时,且父组件值有变更时,执行顺序时这样的:
- beforeUpdate父节点
- beforeUpdate子节点
- updated子节点
- updated父节点
beforeDestroy
销毁组件前
destroy
销毁组件 使用 v-if 时切换条件可触发beforeDestroy和destroy钩子事件
练习代码示例
<html lang="cn-Zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
{{message}}
<input v-model="message">
<button v-on:click="changestatus">切换</button>
<todo-item v-if="status" v-bind:message="message"></todo-item>
</div>
<script>
Vue.component('todo-item', {
template: '<div> <span v-on:click="change">{{ message}}</span><input v-model="msg"/></div>',
props: ['message'],
data() {
return {
msg:this.message
}
},
methods: {
change(){
this.message = 111;
}
},
beforeCreate() {
console.log('beforeCreated子节点')
},
created() {
console.log('created子节点')
},
mounted() {
console.log('mounted子节点')
},
beforeMount() {
console.log('beforeMount子节点')
},
beforeUpdate(){
console.log('beforeUpdate子节点')
},
updated(e) {
console.log('upouted子节点')
},
beforeDestroy(){
console.log('beforeDestory子节点')
},
destroyed(){
console.log(' destoryed子节点')
}
})
var app = new Vue({
el: '#app',
data: {
message: '默认值',
status: true
},
beforeCreate() {
console.log('beforeCreated父节点')
},
created(){
console.log('created父节点')
},
beforeMount(){
console.log('beforeMount父节点')
},
mounted() {
console.log('mounted父节点')
},
updated(){
console.log('upouted父节点')
},
beforeUpdate() {
console.log('beforeUpdate父节点')
},
beforeDestroy() {
console.log('beforeDestory子节点')
},
destroyed() {
console.log(' destoryed子节点')
},
methods: {
onshow(){
console.log(this.message);
this.message = this.message.split('').reverse().join('');
},
changestatus(){
this.status = !this.status;
}
}
});
</script>
</body>
</html>```