Vue生命周期（vue.js学习笔记）

最新推荐文章于 2024-05-28 10:15:00 发布

dogeggcrazy

最新推荐文章于 2024-05-28 10:15:00 发布

阅读量158

点赞数

分类专栏： vue.js JavaScript 前端文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/dogeggcrazy/article/details/128052414

版权

前端同时被 3 个专栏收录

22 篇文章 1 订阅

订阅专栏

JavaScript

18 篇文章 0 订阅

订阅专栏

vue.js

15 篇文章 0 订阅

订阅专栏

1.什么是vue的生命周期？

每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。

上图看更为直观：

首先，从图上，我们可以看出，他的一个过程是

1.new Vue()实例化一个vue实例，然后init初始化event 和 lifecycle，其实这个过程中分别调用了3个初始化函数（initLifecycle(), initEvents(), initRender()），分别初始化了生命周期，事件以及定义createElement函数，初始化生命周期时，定义了一些属性，比如表示当前状态生命周期状态得_isMounted ，_isDestroyed ，_isBeingDestroyed，表示keep-alive中组件状态的_inactive，而初始化event时，实际上就是定义了$once、$off、$emit、$on几个函数。而createElement函数是在初始化render时定义的（调用了initRender函数）

2.执行beforeCreate生命周期函数

3.beforeCreate执行完后，会开始进行数据初始化，这个过程，会定义data数据，方法以及事件，并且完成数据劫持observe以及给组件实例配置watcher观察者实例。这样，后续当数据发生变化时，才能感知到数据的变化并完成页面的渲染

4.执行created生命周期函数，所以，当这个函数执行的时候，我们已经可以拿到data下的数据以及methods下的方法了，所以在这里，我们可以开始调用方法进行数据请求了

5.created执行完后，我们可以看到，这里有个判断，判断当前是否有el参数，如果有，我们再看是否有template参数。如果没有el，那么我们会等待调用$mount(el)方法。

6.确保有了el后，继续往下走，判断当有template参数时，我们会选择去将template模板转换成render函数（其实在这前面是还有一个判断的，判断当前是否有render函数，如果有的话，则会直接去渲染当前的render函数，如果没有那么我们才开始去查找是否有template模板），如果没有template，那么我们就会直接将获取到的el（也就是我们常见的#app，#app里面可能还会有其他标签）编译成templae, 然后在将这个template转换成render函数。

7.之后再调用beforMount，也就是说实际从creted到beforeMount之间，最主要的工作就是将模板或者el转换为render函数。并且我们可以看出一点，就是你不管是用el，还是用template, 或者是用我们最常用的.vue文件(如果是.vue文件，他其实是会先编译成为template)，最终他都是会被转换为render函数的。

8.beforeMount调用后，我们是不是要开始渲染render函数了，首先我们会先生产一个虚拟dom（用于后续数据发生变化时，新老虚拟dom对比计算），进行保存，然后再开始将render渲染成为真实的dom。渲染成真实dom后，会将渲染出来的真实dom替换掉原来的vm.$el,然后再将替换后的$el append到我们的页面内。整个初步流程就算是走完了

9.之后再调用mounted，并将标识生命周期的一个属性_isMounted 置为true。所以mounted函数内，我们是可以操作dom的，因为这个时候dom已经渲染完成了。

10.再之后，只有当我们状态数据发生变化时,我们在触发beforeUpdate，要开始将我们变化后的数据渲染到页面上了

11.beforeUpdate调用之后，我们又会重新生成一个新的虚拟dom(Vnode)，然后会拿这个最新的Vnode和原来的Vnode去做一个diff算，这里就涉及到一系列的计算，算出最小的更新范围，从而更新render函数中的最新数据，再将更新后的render函数渲染成真实dom。也就完成了我们的数据更新

12.然后再执行updated，所以updated里面也可以操作dom，并拿到最新更新后的dom。不过这里我要插一句话了，mouted和updated的执行，并不会等待所有子组件都被挂载完成后再执行，所以如果你希望所有视图都更新完毕后再做些什么事情，那么你最好在mouted或者updated中加一个$nextTick（），然后把要做的事情放在$netTick()中去做
13.再之后beforeDestroy没啥说的，实例销毁前，也就是说在这个函数内，你还是可以操作实例的
14.之后会做一系列的销毁动作，解除各种数据引用，移除事件监听，删除组件_watcher，删除子实例，删除自身self等。同时将实例属性_isDestroyed置为true
销毁完成后，再执行destroyed

2.实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="example">{{message}}</div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#example',//挂载
            data: {
                message: 'match'
            },
            //初始化阶段
            beforeCreate() {
                console.log('beforeCreate');//组件实例被创始之初，不能获得DOM节点，data、methods、watch上的方法和数据均不能访问（loading）
            },
            created() {
                console.log('created');//组件实例已经完全创建，可以访问到data、methods上的方法和数据（结束loading）
            },
            beforeMount() {
                console.log('beforeMount');//组件挂载之前，得不到具体的DOM节点，Vue挂载的根节点已经创建（一个项目用一两次）
            },
            //挂载阶段
            mounted() {
                console.log('mounted');//组件挂载到实例上去之后，完成挂载DOM和渲染，可以对挂载的DOM进行操作（发起后端Ajax请求）
            },
            beforeUpdate() {
                console.log('beforeUpdate');//组件数据发生变化更新之前，数据是新的，但页面是旧的，即页面尚未与数据保存同步（访问现有的DOM）
            },
              //更新阶段
            updated() {
                console.log('updated');//组件数据更新之后，数据是新的，页面也是新的，即页面和数据保持同步
              //组件更新后调用$destroyed函数，进行销毁 
                this.$destroy();
            },
            beforeDestroy() {
                console.log('beforeDestroy');//组件实例销毁之前，（可做一些删除提示，如：您确定删除XX）
            },
            //销毁阶段
            destroyed() {
                console.log('destroyed');//组件实例销毁之后。销毁后，当前组件已被删除，无法操作里面的任何东西了
            },
        })
    </script>

</body>

</html>

含义解释：

【beforeCreate】（创建前）
在实例开始初始化时同步调用。此时数据观测、事件等都尚未初始化
【created】（创建后）
在实例创建之后调用。此时已完成数据观测、事件方法，但尚未开始DOM编译，即未挂载到document中
【beforeMount】(载入前)
在mounted之前运行
【mounted】（载入后）
在编译结束时调用。此时所有指令已生效，数据变化已能触发DOM更新，但不保证$el已插入文档
【beforeUpdate】（更新前）
在实例挂载之后，再次更新实例(例如更新 data)时会调用该方法，此时尚未更新
DOM结构
【updated】（更新后）
在实例挂载之后，再次更新实例并更新完DOM结构后调用
【beforeDestroy】（销毁前）
在开始销毁实例时调用，此刻实例仍然有效
【destroyed】（销毁后）
在实例被销毁之后调用。此时所有绑定和实例指令都已经解绑，子实例也被销毁

dogeggcrazy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue生命周期（vue.js学习笔记）

每一个vue实例从创建到销毁的过程，就是这个vue实例的。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。上图看更为直观：首先，从图上，我们可以看出，他的一个过程是。
复制链接

扫一扫