vue 钩子函数

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')
},