zoukankan      html  css  js  c++  java
  • Vue钩子函数

    Vue的生命周期函数

     beforeCreate:function(){
                    console.log('1-beforeCreate 初始化之后');
                },
                created:function(){
                    console.log('2-created 创建完成');
                },
                beforeMount:function(){
                    console.log('3-beforeMount 挂载之前');
                },
                mounted:function(){
                    console.log('4-mounted 被创建');
                },
                beforeUpdate:function(){
                    console.log('5-beforeUpdate 数据更新前');
                },
                updated:function(){
                    console.log('6-updated 被更新后');
                },
                activated:function(){
                    console.log('7-activated');
                },
                deactivated:function(){
                    console.log('8-deactivated');
                },
                beforeDestroy:function(){
                    console.log('9-beforeDestroy 销毁之前');
                },
                destroyed:function(){
                    console.log('10-destroyed 销毁之后')
                }
    

    自定义指令的生命周期

    • bind:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
    • inserted:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于document中)。
    • update:被绑定于元素所在的模板更新时调用,而无论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新。
    • componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
    • unbind:只调用一次,指令与元素解绑时调用。
    bind:function(){//被绑定
         console.log('1 - bind');
    },
    inserted:function(){//绑定到节点
          console.log('2 - inserted');
    },
    update:function(){//组件更新
          console.log('3 - update');
    },
    componentUpdated:function(){//组件更新完成
          console.log('4 - componentUpdated');
    },
    unbind:function(){//解绑
          console.log('1 - bind');
    }
    

    路由中的钩子函数

    • beforeRouteEnter:在路由进入前的钩子函数。
    • beforeRouteLeave:在路由离开前的钩子函数。
    beforeRouteEnter:(to,from,next)=>{
        console.log("准备进入路由模板");
        next();
      },
      beforeRouteLeave: (to, from, next) => {
        console.log("准备离开路由模板");
        next();
      }
    
  • 相关阅读:
    Spring Boot (20) 拦截器
    Spring Boot (19) servlet、filter、listener
    Spring Boot (18) @Async异步
    Spring Boot (17) 发送邮件
    Spring Boot (16) logback和access日志
    Spring Boot (15) pom.xml设置
    Spring Boot (14) 数据源配置原理
    Spring Boot (13) druid监控
    Spring boot (12) tomcat jdbc连接池
    Spring Boot (11) mybatis 关联映射
  • 原文地址:https://www.cnblogs.com/shiazhen/p/11953795.html
Copyright © 2011-2022 走看看