码迷,mamicode.com
首页 > 其他好文 > 详细

Vue 生命周期

时间:2019-07-26 01:21:41      阅读:100      评论:0      收藏:0      [点我收藏+]

标签:image   就是   creat   ons   apt   状态更新   事件监听   div   dom   

一、什么是生命周期?

Vue 实例从创建到销毁的过程,就是生命周期。

 

二、生命周期钩子

 

1、创建期间的生命周期函数:

  • beforeCreate:实例刚在内存中被创建出来,此时还没初始化好 data 和 methods 属性
  • created:实例已在内存中创建,此时 data 和 methods 已经创建完成,还没开始编译模板
  • beforeMount:此时已经完成了模板的编译,但还没挂载到页面中
  • mounted:此时已将编译好的模板挂载到页面指定的容器中显示

 

2、运行期间的生命周期函数:

  • beforeUpdate:状态更新之前执行此函数,此时 data 中的状态值是最新的,但界面上显示的数据还是旧的,因为还没开始重新渲染 DOM 节点
  • updated:实例更新完之后调用此函数,此时 data 中的状态值和界面上显示的数据都已经完成了更新,界面已被重新渲染好

 

3、销毁期间的生命周期函数:

  • beforeDestroy:实例销毁之前调用,这里实例仍然完全可用
  • destroyed:Vue 实例销毁后调用,调用后 Vue 实例指示的所有东西都会解绑,所有的事件监听器会被移除,所有的子实例也会被销毁

 

三、生命周期图示

技术图片

 

四、代码示例

new Vue({
    data: {
        message: 0
    },
    template: ‘<div>{{ message }}</div>‘,
    beforeCreate() {
        console.log(this.$el, ‘beforeCreate‘);
    },
    created() {
        console.log(this.$el, ‘created‘);
    },
    beforeMount() {
        console.log(this.$el, ‘beforeMount‘);
    },
    mounted() {
        console.log(this.$el, ‘mounted‘);
    },
    beforeUpdate() {
        console.log(this.$el, ‘beforeUpdate‘);
    },
    updated() {
        console.log(this.$el, ‘updated‘);
    },
    activated() {
        console.log(this.$el, ‘activated‘);
    },
    deactivated() {
        console.log(this.$el, ‘deactivated‘);
    },
    beforeDestroy() {
        console.log(this.$el, ‘beforeDestroy‘);
    },
    destroyed() {
        console.log(this.$el, ‘destroyed‘);
    },
    errorCaptured() {
        console.log(this.$el, ‘errorCaptured‘);
    }
});

// 输出结果
技术图片

这里,beforeCreate() 和 created() 两个生命周期方法依次被执行,而其它生命周期方法没被触发执行。

如果加上 el 属性

new Vue({
    el: ‘#app‘, // 设置 el 属性
    // ...
});

或调用 vm.$mount() 方法

var app = new Vue({
    // ...
});

app.$mount(‘#root‘); // 调用 Vue 实例的 $mount() 方法

则输出结果为:

技术图片

可以看到 beforeCreate()、created()、beforeMount() 和 mounted() 四个生命周期方法依次被执行。

因此,在 new 一个 Vue 实例时,如果没设置 el 属性或调用 Vue 实例的 $mount() 方法,其实只会执行 beforeCreate() 和 created() 方法,原因在于生命周期中的 mounted() 方法把 Vue 实例中的 template 属性里的 html 挂载到 el 属性对应的 dom 节点上,如果没有定义 el 属性或没调用 Vue 实例的 $mount() 方法,就无法执行挂载的动作,因为不知要挂载到哪去

 

Vue 生命周期

标签:image   就是   creat   ons   apt   状态更新   事件监听   div   dom   

原文地址:https://www.cnblogs.com/Leophen/p/11247668.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!