zoukankan      html  css  js  c++  java
  • VUE自定义指令生命周期,VUE生命周期

    一、自定义指令的生命周期

      自定义指令有五个生命周期(也叫钩子函数),分别是 bind,inserted,update,componentUpdated,unbind

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

     二、VUE生命周期

      Vue一共有10个生命周期函数,官网有张图帮助理解:

    如下代码(应该看代码就能看懂):

    复制代码
    add:function(){
    this.num++;
    },
    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 销毁之后')
    }
     
  • 相关阅读:
    Delphi TStringList的用法
    Android Studio使用教程(一)
    如何在win7下安装和配置Android Studio
    python基础字符串单引号双引号和三引号
    同步和互斥
    posix多线程有感线程高级编程(条件变量)
    VMware网络配置详解
    posix多线程有感POSIX 线程间的内存可视性
    进程及相关API
    POSIX线程属性
  • 原文地址:https://www.cnblogs.com/1549983239yifeng/p/14546388.html
Copyright © 2011-2022 走看看