Vue面试系列之十一：vue生命周期的理解

最新推荐文章于 2022-01-14 10:40:05 发布

听北风

最新推荐文章于 2022-01-14 10:40:05 发布

阅读量148

点赞数

分类专栏： web 前端工程师 Vue 文章标签： vue

本文链接：https://blog.csdn.net/jmsLU/article/details/119876477

版权

web 同时被 3 个专栏收录

21 篇文章 0 订阅

订阅专栏

前端工程师

18 篇文章 1 订阅

订阅专栏

Vue

11 篇文章 0 订阅

订阅专栏

我们先来看一下vue官网提供的vue实例生命周期图示：

官网提供的图上很详细的描述了一个vue实例的整个生命过程，从创建到销毁，从图上都能很直观的看出来；

那么，接下来，我再具体解释一下各个生命周期所做的事情：

beforeCreate()-创建前：data和methods的数据还未初始化；

created()-创建后：添加观察者，data的数据可以访问，methods的方法也可以调用，请求数据是异步的，宜早不宜迟；此时，到了判断阶段，判断是否有el元素；

beforeMount()--挂载前：创建vm.$el替换el，实现真正的挂载；

mounted()--挂载后：挂载完毕，vue实例初始化完毕，可以操作dom了；

beforeUpdate()--更新前：可以在该钩子中进一步地更改状态，不会触发附加地重渲染过程；

Updated()--更新后：虚拟dom重新渲染完并应用更新，源码中执行了updata()；

beforeDestroy()--销毁前：解除绑定销毁钩子组件以及事件监听器；

destroyed()--销毁后：销毁完毕（并不是当前程序立即消失了，只是执行操作时，数据无任何变化）；

从代码中观察vue实例的整个生命周期，可能会更直观一点：

<!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>
    <script src="../vuejs/vue.js"></script>
</head>

<body>
    <!-- 
        vue实例的生命周期简单演示
     -->
    <div id="app">
        <div>{{msg}}</div>
        <!-- 更新的话触发生命周期第五六阶段 -->
        <button @click='updata'>更新</button>
        <button @click='destroy'>销毁</button>
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg: '生命周期'
        },
        methods: {
            updata: function() {
                this.msg = 'hello'
            },
            destroy: function() {
                // 销毁data中的内容 及methods中的内容
                this.$destroy();
            }
        },
        beforeCreate: function() {
            console.log('beforeCreate');
        },
        created: function() {
            console.log("created");
        },
        beforeMount: function() {
            console.log("beforeMount");
        },
        mounted: function() {
            console.log("mounted");
        },
        beforeUpdate: function() {
            console.log('beforeUpdate');
        },
        updated: function() {
            console.log("updated");
        },
        beforeDestroy: function() {
            console.log("beforeDestroy");
        },
        destroyed: function() {
            console.log("destroyed");
        }
    })
</script>

</html>

听北风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue面试系列之十一：vue生命周期的理解

我们先来看一下vue官网提供的vue实例生命周期图示：官网提供的图上很详细的描述了一个vue实例的整个生命过程，从创建到销毁，从图上都能很直观的看出来；那么，接下来，我再具体解释一下各个生命周期所做的事情：beforeCreate()-创建前：data和methods的数据还未初始化；created()-创建后：添加观察者，data的数据可以访问，methods的方法也可以调用，请求数据是异步的，宜早不宜迟；此时，到了判断阶段，判断是否有el元素；beforeMount()--挂.
复制链接

扫一扫