Vue的生命周期

最新推荐文章于 2025-03-06 15:18:14 发布

啥也不会-啥都先学

最新推荐文章于 2025-03-06 15:18:14 发布

阅读量243

点赞数 1

分类专栏： vue生命周期文章标签： vue

本文链接：https://blog.youkuaiyun.com/g1437353759/article/details/108627100

版权

vue生命周期专栏收录该内容

1 篇文章

订阅专栏

Vue的生命周期

每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁

一、创建前/后

1、beforeCreate：

在实例创建以前
data中数据和methods中的方法访问不到

2、created：

实例创建完；
能拿到data下的数据，能修改data的数据
修改数据不会触发updated , beforeUpdate 钩子函数
取不到最终渲染完成的dom

二、载入前/后

3、beforeMount：

编译模板已经结束
可以访问data数据
可以修改数据,修改数据不会触发updated , beforeUpdate 钩子函数

4、mounted：

html已经渲染(ajax请求可以放在这个函数中)，把vue实例中的data里的message挂载到BOM节点中去

三、更新前/后（只有view上的数据变化才会触发，仅data中改变不能触发）

5、beforeUpdate：

修改之前会被调用（view层的数据变化前，不是data中数据改变前），vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染

6、updated：

修改数据之后会被调用，dom会重新render完成

四、销毁前/后

7、beforeDestory：

实例卸载之前会被调用，可以清理一些资源，防止内存泄漏

8、destroyed：

dom元素会存在，只是不受vue控制，会卸载掉watcher，事件侦听，组件

<body>
<div id="root">
    <h1>{{msg}}</h1>
</div>
 
<script>
    const vm = new Vue({
        el:'#root',
        data:{
            msg:"没毛病"
        },
        beforeCreate () {
            // 在new一个vue实例后,只有一些默认的生命周期钩子和默认事件,其他的东西都还没创建。在beforeCreate生命周期执行的时候,data和methods中的数据都还没有初始化。
        },
        created () {
            // data 和 methods都已经被初始化好了,如果要调用 methods 中的方法,或者操作 data 中的数据,最早可以在这个阶段中操作
        },
        beforeMount () {
            // 执行到这个钩子的时候,在内存中已经编译好了模板了,但是还没有挂载到页面中,此时,页面还是旧的
        },
        mounted () {
            // 执行到这个钩子的时候,就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段,进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点,最早可以在和这个阶段中进行
        },
        beforeUpdate () {
            // 当执行这个钩子时,页面中的显示的数据还是旧的,data中的数据是更新后的, 页面还没有和最新的数据保持同步
        },
        updated () {
            // 页面显示的数据和data中的数据已经保持同步了,都是最新的
        },
         beforeDestroy () {
            // Vue实例从运行阶段进入到了销毁阶段,这个时候上所有的 data 和 methods,指令,过滤器 ……都是处于可用状态。还没有真正被销毁
        },
        destroyed () {
            // 这个时候上所有的 data 和 methods,指令,过滤器 ……都是处于不可用状态。组件已经被销毁了。
        }
    })
</script>
</body>

在这里插入图片描述