beforeRouteEnter
- 方法名称: beforeRouteEnter
- 调用时机: 切换路由之前,调用该方法时,页面还没有切换
- next调用时机: activated 之后
- 注意事项: this == undefined
beforeRouteEnter(to, from, next) {
// alert('beforeRouteEnter')
next(vm =>{
// alert('beforeRouteEnter-next')
})
},
beforeCreate
- 方法名称: beforeCreate
- 调用时机: 数据观测, 初始化vue内部事件之前, beforeRouteEnter 调用之后
- 注意事项:
1: this !== undefined
2: this.$data == undefined
3: methods 里面的方法 == undefined
4: 如果有<keep-alive>缓存,该方法不会被调用
beforeCreate() {
// alert('beforeCreate')
},
created
- 方法名称: created
- 调用时机: 数据观测, 初始化vue内部事件之后 ,beforeCreate 之后
- 注意事项:
1: 如果有<keep-alive>缓存,该方法不会被调用
2: this.$data 可以访问
3: methods 里面的方法可以访问
created() {
// alert('created')
},
beforeMount
- 方法名称: beforeMount
- 调用时机: 在挂载开始之前被调用:相关的 render 函数首次被调用 ; created 之后
- 注意事项:
1: 如果有<keep-alive>缓存,该方法不会被调用
2: this.$el 不能访问
beforeMount() {
// alert('beforeMount')
},
mounted
- 方法名称: mounted
- 调用时机: el 被新创建的 vm.$el 替换,并挂载到实例上去之后 ; beforeMount 之后
- 注意事项:
1: 如果有<keep-alive>缓存,该方法不会被调用
2: this.$el 能访问
mounted() {
// alert('mounted')
},
activated
- 方法名称: activated
- 调用时机: keep-alive 组件激活时调用 ; mounted 之后
- 注意事项:
1: 如果有<keep-alive>缓存,该会被调用
2: this.$el 能访问
activated() {
// alert('activated')
},
deactivated
- 方法名称: deactivated
- 调用时机: keep-alive 组件停用时调用 (跳出页面调用)
deactivated() {
// alert('deactivated')
},
beforeDestroy
- 方法名称: beforeDestroy
- 调用时机: 销毁页面之前 , 实例仍然完全可用
- 注意事项: $destroy()完全销毁一个实例
beforeDestroy() {
// alert('beforeDestroy')
},
destroyed
- 方法名称: destroyed
- 调用时机: 销毁页面之后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁
- 注意事项: $destroy()完全销毁一个实例
destroyed() {
// alert('destroyed')
},
beforeUpdate
- 方法名称: beforeUpdate
- 调用时机: 数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前
- 注意事项: 你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程
beforeUpdate() {
// alert('beforeUpdate')
},
updated
- 方法名称: updated
- 调用时机: 由于数据更改导致的虚拟 DOM 重新渲染和打补丁 之后调用
- 注意事项: 组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环
updated() {
// alert('updated')
},