Vue 中 created 和 mounted 的区别

2022 年 6 月 09 日
本文字数：709 字
阅读完需：约 2 分钟

大多数人在谈论生命周期钩子时会感到困惑的一件事是 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() 保持不变。

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/2cba7174c8347e6bf4bfe859f】。

devpoint

关注

细节的追求者 2011.11.12 加入

专注前端开发，用技术创造价值！

发布

暂无评论

创作场景

Vue 中 created 和 mounted 的区别

devpoint

评论