Vue.js 中创建事件和挂载事件的区别答案

【问题标题】：Difference between the created and mounted events in Vue.jsVue.js 中创建事件和挂载事件的区别
【发布时间】：2018-01-30 11:41:18
【问题描述】：

Vue.js 文档对created 和mounted 事件的描述如下：

created

在创建实例后同步调用。在这阶段，实例已完成处理选项，这意味着已设置以下内容：数据观察、计算属性、方法，监视/事件回调。但是，安装阶段还没有已启动，$el 属性将不可用。

mounted

在实例刚刚挂载到 el 被替换后调用由新创建的 vm.$el.如果根实例挂载到 in-document 元素，vm.$el 在挂载时也将在文档内调用。

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

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

在任何情况下created 会被mounted 使用吗？
在现实生活中我可以使用created 事件做什么（真实代码）情况？

【问题讨论】：

created 被更早地调用，因此例如触发从 API 后端获取数据是有意义的。
可以确认，Fullstack Vue 书中的例子都是使用created()来调度api调用的动作。
@EgorStambakio 如果我不在我的组件中使用 created 而我只使用mounted，在mounted 调用api时几乎不一样？我的意思是创建的钩子将被跳过，因为它不会调用。
@LastM4N 您可以在挂载中执行此操作，这是您的选择。但是因为钩子是同步运行的，所以你想在正确的地方做。由于 API 调用与 DOM 无关，因此属于 created 钩子。
@wittgenstein 好的，我们同意，尽管 Vue 官方文档使用挂载的钩子 vuejs.org/v2/cookbook/using-axios-to-consume-apis.html

标签： javascript vue.js

【解决方案1】：

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 获取数据并将其设置为数据属性。但是在 SSR mounted() 钩子中不存在，您需要执行诸如在创建的钩子中获取数据之类的任务

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;
    });
}

【讨论】：

在创建 api 调用时，它会等待所有异步操作完成，然后再进入下一个生命周期阶段吗？
@Ominus 不，它不会等待，运行这个小提琴-jsfiddle.net/1k26sqrx/] 并查看控制台日志
我注意到当使用mounted() 而不是created() 时。 Vue 测试反应变量集是否真的作为反应变量存在。如果不是，则抛出错误。在 created() 中不是这种情况“属性或方法“foo”未在实例上定义，但在渲染期间被引用。确保此属性是反应性的。”
@tobiasBora 只要你不需要与 DOM 交互，created 就应该这样做
@tobiasBora 多个对象，如果你的意思是多个到期实例，是的，每个 vuue 实例都会调用它各自的 created 钩子。但是 created 在实例化到期对象时只调用一次。

【解决方案2】：

created()

在 created 钩子中，您将能够访问反应数据并且事件处于活动状态。模板和虚拟 DOM 尚未安装或渲染。

mounted()（DOM 插入）

安装挂钩通常是最常用的挂钩。它们允许您在第一次渲染之前和之后立即访问您的组件。但是，它们不会在服务器端渲染期间运行。在以下情况下使用：您需要在初始渲染之前或之后立即访问或修改组件的 DOM。不要在以下情况下使用：您需要在初始化时为组件获取一些数据。为此，请使用 created（或为 keep-alive 组件创建 +activated），尤其是在服务器端渲染期间需要该数据时。

结论：

mounted() : 在创建组件之前执行。

created() : 创建渲染组件后执行。

【讨论】：

您正在重新散列现有答案。
我没有重复任何现有的答案