Vue中created与mounted的区别浅析

在使用vue框架的过程中,我们经常需要给一些数据做一些初始化处理,这时候我们常用的就是在created与mounted选项中作出处理,这篇文章主要给大家介绍了关于Vue中created与mounted区别的相关资料,其中部分知识点可能是我们日常工作会见到或用到的,需要的朋友可以参考下

大多数人在谈论生命周期钩子时会感到困惑的一件事是 created 和 mounted 之间的区别。有着相似的名称，觉得应该做同样的事情，但还是有一些细微的差别。

首先，created() 和 mounted() 都可以访问原型上的 data 和 props 。例如，下面的代码中，这两个钩子将在控制台中打印出 My Data 和 My Props ：

<template>
    <div></div>
</template>
<script>
export default {
    data() {
        return {
            dataMsg: "My data",
        };
    },
    props: {
        propMsg: {
            type: String,
            default: "My Props",
        },
    },
    created() {
        console.log(this.dataMsg);
        console.log(this.propMsg);
    },
    mounted() {
        console.log(this.dataMsg);
        console.log(this.propMsg);
    },
};
</script>

created() 和 mounted() 之间的根本区别在于访问DOM，在上面的示例中，如果尝试引用 this.$el，在 created() 中返回 null，在 mounted() 中返回 DOM 元素：

export default {
    created() {
        // 打印 null
        console.log(this.$el);
    },
    mounted() {
        // 打印 DOM 元素
        console.log(this.$el);
    },
};

因此，任何 DOM 操作，甚至使用诸如 querySelector 之类的方法获取 DOM 元素结构将无法在 created() 中使用。因此根据这点区别 created() 非常适合调用 API，而 mounted() 非常适合在 DOM 元素完全加载后执行任何操作。

在 Vue3 组合式API（Composition API）中，created() 和 beforeCreated() 将不再存在，可以取而代之的是 setup()，因此，在 setup() 中 DOM 仍然不可用，而 mounted() 保持不变。

附：vue官网给出的生命周期图

总结

到此这篇关于Vue中created与mounted区别的文章就介绍到这了,更多相关Vue created与mounted区别内容请搜索北冥有鱼以前的文章或继续浏览下面的相关文章希望大家以后多多支持北冥有鱼！

您可能感兴趣的文章:

• Vue实例中生命周期created和mounted的区别详解
• vue.js页面加载执行created,mounted的先后顺序说明
• 在vue中created、mounted等方法使用小结
• vue 路由子组件created和mounted不起作用的解决方法
• 谈一谈vue请求数据放在created好还是mounted里好
• vue中created和mounted的区别浅析
• vue created钩子函数与mounted钩子函数的用法区别