• vue实例的生命周期


    每个Vue实例在被创建之前都要经过一系列的初始化过程,设置数据监听、编译模板、在dom上挂载实例、数据变化时更新DOM,在这个过程中会运行一些叫做生命周期钩子的函数,让用户能够在一些特定的场景下添加他们自己的代码。

    一、相关属性
    1、beforeCreate
    在实例初始化之后,数据观测和事件配置之前调用该钩子。
    2、created
    在实例创建完成后,即实例完成数据观测,属性和方法的运算,watch/event事件回调后立即调用该钩子。由于挂载阶段还没开始,$el属性目前不可见。
    3、beforeMount
    在挂载前调用该钩子。
    4、mounted
    el被新创建的vm.$el替换,并挂载到实例后调用该钩子,渲染。
    5、beforeUpdate
    数据更新了,在虚拟DOM重新渲染和打补丁之前调用该钩子。
    6、updated
    数据更新了,在虚拟DOM重新渲染和打补丁之后调用该钩子,重绘。数据发生变化,重新渲染更新视图后触发该钩子。updated不会承诺所有的子组件被一起重绘,如果希望整个视图被重绘完毕后触发updated,可以用this.$nextTick。
    7、beforeDestroy
    实例销毁前调用该钩子。
    8、destroyed
    Vue实例销毁后调用该钩子。调用后,Vue实例指示的所有东西会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

    二、基本用法

    <div id="J_app_lifecycle"> {{msg}} <input type="text" v-model="msg"></div>
    
    var data = { msg: 'learning vue lifecycle' };
    var vapp = new Vue({
        el:"#J_app_lifecycle",
        data:data,
        beforeCreate:function(){
            console.log('beforeCreate:'+this.msg);
        },
        created:function(){
            console.log('created:'+this.msg);
        },
        beforeMount:function(){
            console.log('beforeMount:'+this.msg);
        },
        mounted: function () {
        //el被新创建的life.$el替换,并挂载到实例上去之后调用该钩子。
          this.$nextTick(function () {
            console.log('mounted:'+this.msg);
          })
        },
        beforeUpdate:function(){
            console.log('beforeUpdate:'+this.msg);
        },
        updated: function () {
          this.$nextTick(function () {
            console.log('updated:'+this.msg);
          })
        },
        beforeDestroy:function(){
        //实例销毁之前调用。
            console.log('beforeDestroy:'+this.msg);
        },
        destroy: function(){
        //Vue实例销毁后调用。
            console.log('destroy:'+this.msg);
        }
    })
  • 相关阅读:
    读入优化
    poj 3216 Repairing Company
    poj 2594 Treasure Exploration
    poj 1419 Graph Coloring
    POJ 3308 Paratroopers(最小点权覆盖)(对数乘转加)
    bzoj2007: [Noi2010]海拔
    bzoj4552: [Tjoi2016&Heoi2016]排序
    bzoj1041: [HAOI2008]圆上的整点
    oracle 的服务器进程(PMON, SMON,CKPT,DBWn,LGWR,ARCn)
    undo表空间居高不下和enq: US
  • 原文地址:https://www.cnblogs.com/camille666/p/vue_instance_prop_lifecycle.html
Copyright © 2020-2023  润新知