Vue.js 中 created 和 mounted 事件之间的区别

Question

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

created

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

mounted

在实例被挂载后调用，此时 el 被新创建的 vm.$el 替换。如果根实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

这个钩子在服务器端渲染期间不被调用。

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

1. 是否存在某些情况下应该使用 created 而不是 mounted？
2. 在现实生活（真实代码）中我可以使用 created 事件来做什么？

- lesssugar

---

因为 created 被提前调用，所以从API后端获取数据的触发就变得有意义了。 - Egor Stambakio

可以确认，《全栈Vue》一书中的示例都使用created()来触发API调用的动作。 - chovy

@EgorStambakio 如果我在组件中不使用created，而只使用mounted，那么在mounted中调用api几乎是相同的吗？我的意思是，由于不会调用created钩子，因此将跳过它。 - LastM4N

@LastM4N，你可以选择在mounted生命周期函数中实现，但由于钩子函数同步运行，所以你应该在正确的地方实现它。由于API调用与DOM无关，因此它应该放在created钩子函数中。 - wittgenstein

@wittgenstein 好的，我们同意，尽管Vue官方文档使用了mounted钩子 https://vuejs.org/v2/cookbook/using-axios-to-consume-apis.html - LastM4N

Answer 1

created(): 选项处理完成后，您可以访问响应式的data属性并在需要时更改它们。此时DOM尚未被挂载或添加。因此，在这里不能进行任何DOM操作。

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

console.log(element.innerHTML)

那么你的问题：

1. 是否有任何情况下会使用created而不是mounted？

通常，created用于从后端API获取数据并将其设置为数据属性。但在SSR中，mounted()钩子不存在，因此您需要仅在created钩子中执行诸如获取数据之类的任务。

2. 在实际生活（真实代码）中，我可以使用created事件做什么？

可用于从外部API获取任何需要渲染的初始数据（例如JSON），并将其分配给任何响应式数据属性。

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

- Vamsi Krishna

---

在 created 阶段进行 API 调用时，它会等待所有异步操作完成后再继续进入下一个生命周期阶段吗？ - Ominus

不，它不会等待。运行此代码片段- https://jsfiddle.net/1k26sqrx/] 并查看控制台日志。 - Vamsi Krishna

我注意到当使用mounted()时，Vue会检测响应式变量是否真的存在作为响应式变量。如果不存在，则会抛出错误。但在created()中不是这种情况。"实例上没有定义属性或方法'foo'，但在渲染过程中引用了它。确保此属性是响应式的。" - Rob Juurlink

只要您不需要与DOM交互，created就可以做到。 - Vamsi Krishna

@tobiasBora 如果你指的是多个 Vue 实例，那么是的，每个 Vue 实例都会调用它自己相应的 created 钩子函数。但是 created 只会在一个 Vue 对象被实例化时被调用一次。 - Vamsi Krishna

Answer 2

对于 created() 钩子而言，在浏览器中操作数据后，它在挂载之前不会显示在 DOM 中。简单来说，数据需要时间来操作才能在浏览器中看到。

mounted() 钩子在 DOM 被挂载或呈现之后调用，这使您可以访问 DOM 元素并执行 DOM 操作。如果您需要在初始渲染之前或之后立即访问 DOM，则最好使用 mounted 钩子。

- Muhammad Numan

---

你正在翻新一份已存在的答案。 - Flame

我没有重新整理任何现有的答案。 - Muhammad Numan

是的...你做到了。 - Henrique Miranda