PROSAGA码农传奇-Vue-Vue.js中创建和安装的事件之间的区别

Vue.js中创建和安装的事件之间的区别

作者: 狗头军师
发布时间: 2025-03-09 05:11:23 (27天前)

Vue.js文档描述了created和mounted事件，如下所示：

created
创建实例后同步调用。在此阶段，实例已完成对选项的处理，这意味着已设置以下内容：数据观察，计算的属性，方法，监视/事件回调。但是，安装阶段尚未开始，并且$ el属性尚不可用。

mounted
在实例刚刚装入后调用，其中el被新创建的vm。$ el替换。如果将根实例安装到文档中元素，则在调用安装时，vm。$ el也将是文档中。

在服务器端渲染期间不会调用此挂钩。

我了解理论，但我有2个关于实践的问题：

在任何情况下created都可以使用mounted吗？
created在真实（真实代码）情况下，该事件可用于什么？

created()：由于选项的处理已完成，您可以访问反应性data属性，并根据需要更改它们。在此阶段，尚未安装或添加DOM。所以你不能在这里做任何DOM操作

mounted()：在DOM挂载或呈现后调用。在这里，您可以访问DOM元素，并且可以执行DOM操作，例如，获取innerHTML：

console.log(element.innerHTML)
所以你的问题：

Is there any case where created would be used over mounted?
Created通常用于从后端API提取数据并将其设置为数据属性。但是在mounted()不存在SSR 挂钩的情况下，您需要执行诸如仅在创建的挂钩中获取数据之类的任务

What can I use the created event for, in real-life (real-code) situation?
用于从外部API获取要呈现的任何初始必需数据（例如JSON）并将其分配给任何反应性数据属性

data:{
    myJson : null,
    errors: null
},
created(){
    //pseudo code
    database.get().then((res) => {
        this.myJson = res.data;
    }).catch((err) => {
        this.errors = err;
    });
}