Vue中created与mounted的区别浅析

更新时间：2022年06月10日 11:05:58 作者：天行无忌

在使用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中使用iframe嵌入网页,页面可自适应问题
这篇文章主要介绍了vue中使用iframe嵌入网页,页面可自适应问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
Vue3中Vuex状态管理学习实战示例详解
这篇文章主要为大家介绍了Vue3中Vuex状态管理学习实战示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-06-06
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
这篇文章主要介绍了解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
vue实现二维码扫码功能(带样式)
最近接了一个移动端的项目，实现微信扫码功能，今天小编利用这个平台给大家分享vue实现二维码扫描功能的实现代码，需要的朋友参考下吧
2021-08-08
详解关于vue2.0工程发布上线操作步骤
这篇文章主要介绍了详解关于vue2.0工程发布上线操作步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
element表格数据部分模糊的实现代码
这篇文章给大家介绍了element表格数据模糊的实现代码,文中有详细的效果展示和实现代码供大家参考,具有一定的参考价值,需要的朋友可以参考下
2024-01-01
element前端实现压缩图片的功能
本文主要介绍了element前端实现压缩图片的功能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-03-03
基于vue中的scoped坑点解说
这篇文章主要介绍了基于vue中的scoped坑点解说，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
Vue前端打包的详细流程
这篇文章主要介绍了Vue前端打包的详细流程,下面文章围绕Vue前端打包的相关资料展开详细内容,需要的小伙伴可以参考一下，希望对大家有所帮助
2021-11-11
Vue组件如何设置Props实例详解
props主要用于组件的传值,他的工作就是为了接收外面传过来的数据,与data、el、ref是一个级别的配置项,下面这篇文章主要给大家介绍了关于Vue组件如何设置Props的相关资料,需要的朋友可以参考下
2022-06-06