Vue生命周期中的重要8个阶段

最新推荐文章于 2024-05-18 15:56:08 发布

陳er_

最新推荐文章于 2024-05-18 15:56:08 发布

阅读量578

点赞数 3

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_68885781/article/details/126919280

版权

vue的生命周期是什么

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

vue生命周期的作用是什么？

让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

要想很好滴了解Vue生命周期就要看下官方给的图

我们可以清晰的看出顺序从上到下被执行，其中我们能看见你的有8的标志性的函数我们先在来

介绍下！

1、创建前(beforeCreate)

对应的钩子函数为beforeCreate。此阶段为实例初始化之后，此时的数据观察和事件机制都未形成，不能获得DOM节点。

2、创建后（created）

对应的钩子函数为created。在这个阶段vue实例已经创建，仍然不能获取DOM元素。

3、载入前（beforeMount）

对应的钩子函数是beforeMount，在这一阶段，我们虽然依然得不到具体的DOM元素，但vue挂载的根节点已经创建，下面vue对DOM的操作将围绕这个根元素继续进行；beforeMount这个阶段是过渡性的，一般一个项目只能用到一两次。

4、载入后（mounted）

对应的钩子函数是mounted。mounted是平时我们使用最多的函数了，一般我们的异步请求都写在这里。在这个阶段，发送请求启动定时器绑定自定义事件。

5、更新前（beforeUpdate）

对应的钩子函数是beforeUpdate。在这一阶段，vue遵循数据驱动DOM的原则。beforeUpdate函数在数据更新后虽然没立即更新数据，但是DOM中的数据会改变，这是Vue双向数据绑定的作用。

6、更新后（updated）

对应的钩子函数是updated。在这一阶段DOM会和更改过的内容同步。

7、销毁前（beforeDestroy）

对应的钩子函数是beforeDestroy。在上一阶段Vue已经成功的通过数据驱动DOM更新，当我们不再需要vue操纵DOM时，就要解绑自定事件清除定时器，取消订阅消息等收尾工作。

8、销毁后(destroyed)

对应的钩子函数是destroyed。在销毁后，会触发destroyed钩子函数。

<!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>

我看看下执行的后台

创建前(beforeCreate)：

console.log(this.$el);
console.log(this.$data);

输出结果为：undefined

此时模板和数据都未载入所以就是undefined。

当点击add()方法时beforeUpdate和Update函数启动

关闭后自动调用销毁函数。

此时整个生命周期就此结束。

陳er_

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue生命周期中的重要8个阶段

Vue 实例从创建到销毁的过程，就是。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。让我们在控制整个Vue实例的过程时更容易形成好的逻辑。要想很好滴了解Vue生命周期就要看下官方给的图我们可以清晰的看出顺序从上到下被执行，其中我们能看见你的有8的标志性的函数我们先在来介绍下！
复制链接

扫一扫