什么时候在 vue 中使用 created() 方法？

Posted 2023-02-22

【中文标题】什么时候在 vue 中使用 created() 方法？

【英文标题】：When to use created() method in vue?

【发布时间】：2019-03-19 13:33:25

【问题描述】：

我学过Vue.js的生命周期钩子，但没有找到使用created()函数的实际场景？

我知道 created() 函数可以访问响应式数据和事件，但不能访问 DOM 元素。但实际上我不知道如何使用它。请有人帮我提供使用 Created() 函数的实际场景。 提前致谢。

【问题讨论】：

你可以查看这个帖子-***.com/questions/45813347/…

【参考方案1】：

很多人在 Vue 中使用全局事件总线模式：

https://alligator.io/vuejs/global-event-bus/

设置事件侦听器的页面示例如下：

EventBus.$on('i-got-clicked', clickCount => 
  console.log(`Oh, that's nice. It's gotten $clickCount clicks! :)`)
);

这是您可以在 DOM 模板完成此特定组件的渲染之前设置的事件。如果您在此处等待 DOM 模板完成，您可能会错过一次点击。您只是想尽快执行此操作。

就像您的组件触发 AJAX 请求一样，您不必总是等待 DOM 完成对组件的渲染。很多时候，您可以立即触发请求。那么，您为什么不想节省一些时间并立即触发 AJAX 请求呢？

mounted 钩子中的任何内容并且不需要 DOM，都可以移动到 created 钩子中，以便在 Vue 生命周期中更快地执行。

【参考方案2】：

created() 方法可以很好地进行不依赖于 DOM 的额外数据初始化。事实上，我经常这样做。

【参考方案3】：

看一下vue网站上的this page

根据示意图：

创建的方法将在组件模板制作之前被调用。因此您无法访问模板，但您可以更改应在模板中使用的值。例如，您可以将 json 道具转换为对象或更改组件静态数据和... 'created' 与 'mounted' 的唯一区别是您可以在模板制作之前执行性能

但请记住不要在 created 方法中更改响应式数据。因为每次这些数据更改创建的方法都不会被再次调用。 您也无权在 created 方法中访问this.$el

现在，你用哪一个或者你需要哪一个取决于你自己

【讨论】：

如果我在beforeMount 阶段这样做有什么区别？它也没有渲染。

那么我可以使用 created() 而不是 mounted() 来改变反应数据的值吗？ @Zoha

此时模板已经编译，但$el还没有创建@TimothyLee

不适用于反应性数据。因为每次更改数据时，更新的方法都将被称为未创建的方法。创建的方法只会在 vue 编译模板时调用一次