1、生命周期执行顺序
● 页面初试化时:
beforeCreate -> created -> beforeMount -> mounted
● 页面发生修改时:
beforeUpdate -> updated
● 页面销毁时:
beforeDestory -> destroyed
2、父子组建生命周期执行顺序
● 页面初始化时:
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
● 页面发生修改时:
beforeUpdate -> updated
父子组件的更新互不影响,只更新自己
● 页面销毁时:
父beforeDestory -> 子beforeDestory -> 子destoryed -> 父destoryed
销毁时子组件要先于父组件销毁
3、this.$nextTick在各生命周期的执行顺序
每个周期使用$nextTick都可以获取到dom,但是还是建议在mounted中使用哈,因为beforeMount/mounted本来就是挂载dom。
4、watch/computed/methods执行顺序
● 页面初始化时:会执行一次computed, watch初始化时不会执行,methods只有调用的时候才会执行。
● 渲染完成后,触发methods: methods -> watch -> computed
本文详细阐述了Vue.js中组件的生命周期,包括页面初始化、修改和销毁时各阶段的执行顺序,以及$nextTick的使用时机和watch、computed、methods的执行顺序。在初始化时,从beforeCreate至mounted,父组件先于子组件完成;更新时,各自组件独立更新;销毁时,子组件先于父组件销毁。$nextTick在mounted后使用能确保DOM已更新。
2495

被折叠的 条评论
为什么被折叠?



