vue的生命周期简介以及简单使用

Vue的生命周期简介以及简单使用

---

1. 什么是组件?

​ 通俗来说，组件可以是一个标签，也可以是以个页面；组件是一个可复用的Vue实例。

2. 什么是实例生命周期？

​ 一个组件（实例）从开始创建到最后被销毁的全过程，就是该组件（实例）的生命周期，该生命周期就叫做该实例生命周期，也叫组件生命周期。

3. 什么是生命周期钩子函数 ?

​ 从 组件的创建 => 在页面上运行 => 页面关闭,组件被销毁的全过程，这三个阶段所伴随的各种事件，被统称为组件的生命周期函数，简称 钩子函数。

注意：

• Vue在执行过程中，会自动调用钩子函数，我们只需要只需要提供钩子函数即可。
• 钩子函数都是在Vue中定义好的。

4. 生命周期的三个阶段

• 挂载阶段（进入页面阶段）

• 更新阶段（数据发生变化了）

• 卸载阶段（数据销毁阶段）

下面用一个图示来简单介绍一下（图有点丑哈，如有错误请留言）

1. 挂载阶段 又分为三个阶段：

• 1.1 数据响应式阶段

  在该阶段有两个钩子函数：

  • beforeCreate 数据响应之前调用

    特点：无法获取data中的数据，也无法获取methods里面的事件，所以很少用。

  • created 数据响应之后调用( 很重要! )

    特点：可以获取data中的数据，也可以获取methods里面的事件

    使用场景（操作数据）：

    • 发送ajax请求（调用请求数据的方法）；（更推荐在这里发送ajax请求）
    • 操作data中的数据和methods里的方法；
    • 获取本地数据。

• 1.2 （数据响应成功后，）查找模板，进行编译

  • 查看配置中是否有 el 字段？

    有就继续下一步；

    没有就手动定义vue的管理边界（通过$mount来设置,比如：vm.$mount(’#app’)）

  • 查看是否有 template 字段？

    如果有，就以template里面的内容进行编译；

    如果没有，就以 el 边界的outerHTML（就是它自己的内容）进行编译。

• 1.3 （编译完成后，进行）DOM渲染阶段

  在该阶段有两个钩子函数：

  • beforeMount DOM渲染之前调用

    特点：该钩子函数不能获取到响应成功后的DOM，<h1> {{num}} </h1>

  • mounted DOM渲染之后调用（很重要！）

    特点：该钩子函数可以获取到响应成功后的DOM，

    <h1> 424 </h1>

    使用场景：

    • 发送ajax请求；

    • 操作DOM（推荐在这里操作DOM）

2. 更新阶段：将数据的变化重新渲染到页面中

​ 该阶段有两个钩子函数：

• beforeUpdate 数据更新之前调用；

  特点：获取的DOM是更新之前的

• updated 数据更新之后调用

  特点：获取的DOM是更新之后的

​ 3. 销毁阶段：（页面关闭，数据销毁）

​ 该阶段也有两个钩子函数：

​ beforeDestroy 数据销毁之前调用

​ destroyed 数据销毁之后调用

​ vue提供了一个**$destroy**方法,用来销毁数据（vm

.$destroy( )）

关闭页面vue会自行销毁数据，但是开发人员自己写的方法和定时器等，需要自行销毁（在beforeDestroy中销毁）.

下面用一段简单的代码来简单理解生命周期函数：

<div id="app">
      <h1>{{ num }}</h1>
      <button @click="fn">点击我,num++</button>
</div>

<script src="./vue.js"></script>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            num: 424,
            timerId: 0
        },
        methods: {
            fn() {
                this.num++;
                console.log(this.num);
            }
        },
        // 数据响应之前调用的钩子函数
        // beforeCreate() {
        //   console.log(this.num); //undefined
        //   this.fn(); //error
        //   //说明:该钩子函数不能拿到data中的数据,也拿不到methods里面的方法,使用很少
        // },

        // 数据响应成功后调用的钩子函数
        created() {
            console.log(this.num); //424
            //this.fn(); // 425
            //说明:该钩子函数可以拿到data中的数据,也能拿到methods里面的方法.

            //自定义一个定时器
            this.timerId = setInterval(() => {
                console.log("哈哈哈");
            }, 1000);
        },

        //DOM渲染之前调用的钩子函数
        // beforeMount() {
        //   //操作DOM
        //   console.log(document.querySelector("h1").innerText); // {{ num }}
        //   //说明:没有获取到DOM中的内容,说明该钩子函数不能操作DOM
        // },
        // //DOM渲染成功后调用的钩子函数
        // mounted() {
        //   //操作DOM
        //   console.log(document.querySelector("h1").innerText); // 424
        //   // 可以获取到DOM中的内容,说明该钩子函数可以操作DOM
        // }

        //更新数据之前调用的钩子函数
        // beforeUpdate() {
        //   console.log(this.num);
        // },
        // //更新数据成功后调用的钩子函数
        // updated() {
        //   console.log(this.num);
        // }

        //销毁之前调用的钩子
        beforeDestroy() {
            console.log("我被销毁之前");
            //在这里销毁自定义的定时器
            clearInterval(this.timerId);
        },
        //销毁之后调用的钩子
        destroyed() {
            console.log("我被销毁啦");
        }
    });
</script>