Vue 01 - Vue 的生命周期

不到三十岁就已经成为魔法师

于 2022-09-16 17:51:11 发布

阅读量313

点赞数 1

分类专栏：去罗马的曲曲折折之路文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_57519357/article/details/126858221

版权

去罗马的曲曲折折之路专栏收录该内容

25 篇文章 0 订阅

订阅专栏

基本概念

1. 什么是Vue

Vue.js（/vjuː/，或简称为Vue）是一个用于创建用户界面的开源JavaScript渐进式框架，也是一个创建单页应用的Web应用框架。作者是尤雨溪，之前为AngularJS工作，他提取了Angular框架中自己喜欢的部分，制作了Vue这个轻量级框架，上手简单并且简化了很多复杂功能，让Vue成为了最受欢迎的前端框架之一，学习Vue的前提：懂前端三剑客（HTML,CSS,JS）。

2. Vue的好处

Vue所关注的核心是MVC模式中的视图层，同时，它能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。另外，vue就是一个已经搭建好的空屋，对比JQuery，可以更好地实现代码复用，减少工作量；对比Angular.js这种企业级框架相比，Vue可以自己组装插件，大部分的插件非常小，整个框架搭建的速度非常快。

Vue的生命周期

1. 什么是Vue的生命周期

取自Vue的官方文档的解释，每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。

2. Vue生命周期的具体步骤

一句话，控制Vue的生命周期主要通过8个钩子函数实现。如图

我们从这幅图由上往下看：

new 关键字：Vue底层会开始执行构造函数帮我们建立对象

1. Init Events & Lifecycle

在这个阶段，Vue的生命周期，事件都会被初始化，但是数据代理还没有开始，像$el属性也没有初始化。使用beforeCreat()函数，可以对一些事件进行处理或者提供一些数据让其它阶段调用。但我们不能使用methods中的方法和data中的数据。

2. Init Injections& reactivity

这个阶段，methods和data也被初始化好了，调用created（）函数，可以对初始化好的方法和数据进行测试。

3. 解析模板阶段。

这个阶段根据代码的不同，执行相同的程序：解析模板。根据el：属性和$mount（）方法去执行这个步骤。在这个步骤执行完后，beforeMount()方法可以对这个状态的Vue进行操作，但实际上很少用因为页面仍然没有被挂载出去，所有对DOM的操作还是无效的。

4.解析完成阶段。

这个阶段虚拟DOM对已经将页面填充完毕，整个页面所有数据比如{{}}都已经写好，也就是说，页面是经过Vue编辑过的DOM，mounted（）函数可以对DOM进行操作，但是尽量避免。一般这里的操作都是初始化操作比如：开启定时任务，发送请求，绑定自定义事件等等。

5. 数据改变阶段（用户经常操作的阶段）

这个阶段是用户开始交互以及交互后数据更新的阶段，beforeupdate（）和updated（）函数分别对应旧页面和新页面可以进行的操作。函数多对数据进行处理，比如beforeupdate（）我们可以判断数据的格式是否正确，如果不正确直接return而不是进一步处理数据，节省资源。updated（）可以对数据进行转换，后端的代码对数据格式更敏感，这个阶段可以处理数据。

6. Vue销毁阶段

类似大部分框架，Vue使用完后必须销毁，释放资源。beforeDestroy() 和destroyed（）函数分别对应销毁前执行的函数和销毁后执行的函数。beforeDestroy()算是Vue最后可以认为控制的函数，data和methods都还可以使用，但是destroyed（）是Vue自己执行的函数，这个时候整个Vue不能再进行任何操作。

练习：输出Vue生命周期函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="root">
    <!--    <h2>当前n的值是：<span v-text="n"></span></h2>-->
    <!--    <button @click="add">点我n++</button>-->
    <!--    <button @click="bye">点击销毁vm</button>-->
</div>

<script src="./js/vue.js"></script>
<script>
    Vue.config.productionTip = false;
    let vm = new Vue({
        el: '#root',
        template: `
          <div>
          <h2>当前n的值是：<span v-text="n"></span></h2>
          <button @click="add">点我n++</button>
          <button @click="bye">点击销毁vm</button>
          </div>`,
        data() {
            return {
                n: 1
            }
        }, methods: {
            add() {
                console.log("执行了Add函数");
                this.n++;
            },
            bye() {
                console.log("执行了销毁函数");
                this.$destroy();
            }
        }, watch: {
            n() {
                console.log("n变了");
            }
        },
        beforeCreate() {
            console.log("beforeCreate");
            console.log(this.n);
        },
        created() {
            console.log("created");
            console.log(this.n);
        }, beforeMount() {
            console.log("beforeMount");
        },mounted(){
            console.log("mounted");
        },beforeUpdate(){
            console.log("beforeUpdate");
        },
        updated(){
            console.log("updated");
        },
        beforeDestroy(){
            console.log("beforeDestroy");
        },
        destroyed(){
            console.log("destroyed");
        }
    });
</script>
</body>
</html>

运行代码，我们可以在控制台看到每个阶段生命周期输出的语句。其中当我们出现数据操作时，beforeupdate（）和updated（）函数会被不断地调用。