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

  • 相关阅读:
    Spring学习笔记(一)IoC(XML部分)
    近期计划
    《番茄工作法图解》读后笔记
    第一篇随笔
    JavaScript 基本语法
    Eclipse启动之四 : Eclipse核心框架启动(百度空间迁移)
    Eclipse启动之三 : 启动器插件(百度空间迁移)
    Eclipse启动之二:Eclipse动态库(百度空间迁移)
    Eclipse启动之一:外壳程序(百度空间迁移)
    04SQL 查询当天,本月,本周的记录
  • 原文地址:https://www.cnblogs.com/vs1435/p/7001492.html
Copyright © 2020-2023  润新知