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

  • 相关阅读:
    MySQL教程(四)—— MySQL的登录与退出
    MySQL教程(三)—— MySQL的安装与配置
    django中使用POST方法报错 URL via POST, but the URL doesn't end in a slash
    django的html模板中获取字典的值
    使用pycharm手动搭建python语言django开发环境(五) 使用日志模块打日志
    使用pycharm手动搭建python语言django开发环境(四) django中buffer类型与str类型的联合使用
    python语言 buffer类型数据的使用 'ascii' codec can't decode byte 0xe5 问题的解决
    使用pycharm手动搭建python语言django开发环境(三) 使用django的apps应用 添加应用静态文件
    使用pycharm手动搭建python语言django开发环境
    使用pycharm手动搭建python语言django开发环境(一)
  • 原文地址:https://www.cnblogs.com/vs1435/p/7001492.html
Copyright © 2020-2023  润新知