Vue生命周期

定义
Vue的生命周期就是实例从创建到销毁的一个过程,从创建、初始化数据、编译模板、挂载Dom->渲染、更新->渲染,卸载等一系列的过程。
1.beforeCreate
在实例初始化(new Vue())后执行,此时的数据监听和事件绑定机制都未完成,获取不到DOM节点。(可以在此阶段加loading事件,在加载实例时触发)

2.created
这个阶段vue实例已经创建,以下内容已被配置完毕:数据侦听、计算属性、方法、事件/侦听器的回调函数。但挂载阶段还没开始,仍然获取不到DOM元素。(在此阶段,初始化完成时的事件写在这里,如在这结束loading事件,也可以进行异步请求)

3.beforeMount
在这个阶段完成了DOM的初始化,但仍然无法获取到具体的DOM元素,因为vue还没有进行根节点挂载,但是根节点已经创建完成,下面Vue对DOM的操作将围绕这个根节点进行。(beforeMount这个阶段是过渡性的,在项目中使用得比较少)

4.mounted
在这个阶段,实例已经被挂载完成了,也就是能获取到数据和DOM元素了。

(注意 mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作,可以在 mounted 内部使用 vm.$nextTick.)

mounted: function () {
this.$nextTick(function () {
// 仅在整个视图都被渲染之后才会运行的代码
})
}
5.beforeUpdate
在数据发生改变,但页面还没有完成更新时执行的操作,在此阶段视图的数据和DOM元素的数据没有保持同步。(这里适合在现有 DOM 将要被更新之前访问它,比如移除手动添加的事件监听器)

6.updated
这个时候数据发生了改变,并且视图页面也已经完成了更新,因此,该阶段看到的DOM元素的内容是最新内容。

(注意updated 不会保证所有的子组件也都被重新渲染完毕。如果你希望等到整个视图都渲染完毕,可以在 updated 里使用 vm.$nextTick)

7.beforeDestroy
此阶段Vue实例仍然完全可用,也就是还能访问到页面的响应式数据和事件。(可以在这里注销eventBus等事件)

8.destroyed
DOM元素被销毁,此时对应 的Vue 实例所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁。

methods: {
            stop(){
                // 销毁
                this.$destroy()
            }
        },
         beforeCreate() {},
        created() {},
        beforeMount() {},
        // 挂载后
        mounted() {
            this.times = setInterval(()=>{
                this.opacity-=0.01;
                if(this.opacity<=0) {
                    this.opacity=1;
                }
            },10)
        },
        // 更新前
        beforeUpdate() {
        },
        // 更新后
        updated() {
        },
        // 销毁前
        beforeDestroy() {
            clearInterval(this.times);
            console.log("触发了销毁前");
        },
        // 销毁后
        destroyed() {
            
        },
    })

总结
常用的生命周期钩子
1.mounted发送ajax请求,启动定时器,绑定自定义事件,订阅消息等初始化操作
2.beforeDestroy清除定时器,解绑自定义事件,取消订阅消息等收尾工作关于销毁Vue实例
1.销毁后借助Vue工具看不到任何信息
2.销毁后自定义事件失效,但原Dom事件人有效

  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值