zoukankan      html  css  js  c++  java
  • 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);
        }
    })
  • 相关阅读:
    hdu acm 2844 Coins 解题报告
    hdu 1963 Investment 解题报告
    codeforces 454B. Little Pony and Sort by Shift 解题报告
    广大暑假训练1 E题 Paid Roads(poj 3411) 解题报告
    hdu acm 2191 悼念512汶川大地震遇难同胞——珍惜现在,感恩生活
    hdu acm 1114 Piggy-Bank 解题报告
    poj 2531 Network Saboteur 解题报告
    数据库范式
    ngnix 配置CI框架 与 CI的简单使用
    Vundle的安装
  • 原文地址:https://www.cnblogs.com/camille666/p/vue_instance_prop_lifecycle.html
Copyright © 2011-2022 走看看