Vue中created和mounted有什么区别？

Posted on by

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

createdVue和mountedVue的区别

首先，两者created()都mounted()可以访问原型上的数据和道具。

例如，这两个钩子都会在下面控制台记录“我的消息”，以及 的默认值myProp，即“某些道具”：

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

道具继承created和mounted

created()和之间的根本区别mounted()是您还没有访问 DOM 的权限created()。

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

在上面的例子中，如果我们尝试引用this.$el，它会返回nullin created()，它会返回 DOM 元素mounted()：

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

因此，querySelector在created().

created()非常适合调用 API，同时mounted()非常适合在 DOM 元素完全加载后执行任何操作。

组合 API 并创建或挂载

对此的一个警告是，如果您使用的是 Composition API created()，并且确实beforeCreated()不再存在。您必须改为使用setup(). 这个函数代替了created()和beforeCreated()。

因此，DOM 在setup(). 在 Composition API 中，mounted()保持不变。

推荐阅读：