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

Question

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

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

Answer 1

看看vue 网站上的这个页面

根据图：

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

但请记住不要更改创建方法中的反应数据。因为每次这些数据发生变化时，创建的方法都不会再次被调用。您也无权访问this.$el创建的方法

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

Answer 2

很多人在 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 生命周期中更快地执行。

Answer 3

create() 方法是执行不依赖于 DOM 的其他数据初始化的好地方。事实上我经常这样做。