博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue 钩子函数
阅读量:7044 次
发布时间:2019-06-28

本文共 1919 字,大约阅读时间需要 6 分钟。

 

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

转载于:https://www.cnblogs.com/vs1435/p/7001492.html

你可能感兴趣的文章
BCM路由全智能固件升级软件tftp,一键刷路由及常用固件下载
查看>>
个人认识:直接断电和发送复位信号给主板有啥区别?
查看>>
测试体会:WAYOS新架构(即二代QOS)的新功能解释
查看>>
UVA 10169 Urn-ball Probabilities !
查看>>
每日一例,练就编程高手
查看>>
no argument specified with option "/LIBPATH:"错误的解决【转载】
查看>>
初涉c#设计模式-Factory Pattern
查看>>
JRuby——Java和Ruby的强强联合
查看>>
ipcs和ipcrm用法简介
查看>>
[Go 笔记]关于 Panic和 Recover
查看>>
关于HP Diagnostics
查看>>
Oracle中的二进制、八进制、十进制、十六进制相互转换函数
查看>>
关于empty函数的输出
查看>>
SCI
查看>>
【菜鸟学习Linux】-第三章- Linux环境搭建-使用VMware9安装Ubuntu 12.04系统
查看>>
分享一组Rpg Marker人物行走,游戏素材图片,共20张图片
查看>>
POJ 1947 Rebuilding Road(树形DP)
查看>>
武汉性能测试研讨会资料共享
查看>>
Masonry+Infinite-Scroll实现无刷新无分页完美瀑布流(转)
查看>>
WPF DataTrigger的两个用法
查看>>