vue钩子生命周期及父子组件生命周期执行顺序 |
您所在的位置：网站首页 › vue子组件和父组件执行顺序 › vue钩子生命周期及父子组件生命周期执行顺序 |
|
vue的生命8个生命周期
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroy
在new Vue()的时候，初始化事件生命周期 各个生命周期分别做了哪些事情 beforeCreate初始化 createdVue.$data 已经初始化 父子组件共存时，会优先执行父组件的created，再执行子组件的created事件， 这说明父组件需要线创造容器，然后才能在创建子组件 beforeMountVue.$el挂在前 mountedVue.$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钩子事件 练习代码示例 Document {{message}} 切换 Vue.component('todo-item', { template: ' {{ message}}', 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; } } }); ``` |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |