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

【问题标题】：When to use created() method in vue?什么时候在 vue 中使用 created() 方法？
【发布时间】：2019-03-19 13:33:25
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

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

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

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

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

【讨论】：