Vue中Created和Mounted的区别

Mounted和Created听起来很相似，但它们做的是不同的事情。让我们来研究一下。

在之前的文章中，我介绍了Vue中所有不同的生命周期钩子。在谈论生命周期钩子的时候，大多数人都会感到困惑，其中一个问题是created 和mounted 之间的区别。它们都有类似的名字，而且感觉它们应该做同样的事情，但有一些微妙的区别。

Vue中Created和Mounted之间的区别

首先，created() 和mounted() 都可以访问你原型上的数据和道具。例如，这两个钩子都会在下面控制台记录 "我的信息"，以及myProp 的默认值，即 "某个道具"。

Vue.js组件

export default {
    data() {
        return {
            msg: 'My Message'
        }
    },
    props: {
        myProp: {
            type: String,
            default: 'My Prop'
        }
    },
    created() {
        console.log(this.msg);
        console.log(this.myProp);
    },
    mounted() {
        console.log(this.msg);        
        console.log(this.myProp);
    }
}

创建和挂载的道具继承

注意：即使你设置了一个属性，它仍然可以在created() 和mounted()

created() 和mounted() 的根本区别在于，你还不能访问created() 的DOM。在我们的例子中，如果我们试图引用this.$el ，它将在created() 中返回null ，它将在mounted() 中返回DOM元素。

Vue.js组件

export default {
    created() {
        // Returns null
        console.log(this.$el);
    },
    mounted() {
        // Returns the DOM element in console:
        console.log(this.$el);     
    }
}

因此，任何DOM操作，甚至是使用querySelector 等方法获得DOM结构，都不会在created() 。正如在关于生命周期钩子的文章中提到的，created() 很适合调用API，而mounted() 则适合在DOM元素完全加载后做任何事情。

组成API和创建或挂载

有一点需要注意的是，如果你使用的是Composition API，created() ，甚至是beforeCreated() ，都不再存在。你必须使用setup() 。这个函数取代了created() 和beforeCreated() 。因此，DOM仍然不能在setup() 。组成APImounted() 保持不变。

API 钩子 原型 控制台（视频游戏 CLI） 数据（计算） 元素 继承（面向对象编程） 属性（编程）

经Johnny Simpson, DZone MVB许可发表于DZone。请看原文。