create() 生命周期钩子中的 vue 异步调用

2024-03-24

我需要调用下面的方法created()。为此,我需要做created() as async。根据 Vue 文档,created()叫做同步地。将Vue框架await on created()避免任何竞争条件?

this.isAuthenticated = await authService.isAuthenticated();

Vue.config.productionTip = false;

function tm(ms, msg) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(msg);
    }, ms);
  });
}

new Vue({
  async beforeCreate() {
    console.log(await tm(1000, "BEFORE CREATE"));
  },
  async created() {
    console.log(await tm(2000, "CREATED"));
  },
  async beforeMount() {
    console.log(await tm(3000, "BEFORE MOUNT"));
  },
  async mounted() {
    console.log(await tm(4000, "MOUNTED"));
  }
}).$mount("#app");
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

create() 生命周期钩子中的 vue 异步调用 的相关文章

  • 同时使用 Vuetify 和 Vue-i18n 翻译

    我正在使用 Vuetify 想要添加我自己的按钮翻译 并使用 Vuetify 提供的翻译 我目前的 Vuetify 配置文件设置如下 import Vue from vue import Vuetify from vuetify impor
  • 使用 v-bind Vue.js 的多个变量

    我试图在以下代码中传递多个变量 div div 但我收到以下错误 Vue warn 无法生成渲染函数 SyntaxError 意外的标记 在 我尝试更换 with a 但我得到 Vue warn 无法生成渲染函数 SyntaxError I
  • Vue.js - 如何获取 v-for 子组件中的最后一个子引用

    我想在页面加载后播放最新的音频
  • Vue cli 3项目,图像路径中的动态src不起作用

    我在 vue 组件中引用图像 url 例如 img alt Vue logo src statics reports logo png 这有效 但在尝试的同时 img alt Vue logo data return imgPath sta
  • 在 Vue.js 中,如何防止子路由的导航?

    好的一点是beforeRouteLeave是你可以防止在某些情况下导航离开 我有一个使用子路由来渲染页面的一部分的设置 我希望在子路线上设置一个导航守卫 以防止在未保存数据的情况下切换到另一条路线 path customers view c
  • Vuex - “不要在突变处理程序之外改变 vuex 存储状态”

    我正在尝试从 Firestore 初始化我的 Vuex 商店 最后一行代码context commit SET ACTIVITIES acts 是什么造成了错误 我不认为我会直接改变状态 因为我正在使用一个动作 我可能会错过什么 这是我的
  • 可以在 Vue 模板中渲染 VNode 吗?

    我遇到的情况是 我有一个渲染函数将一些数据传递到作用域槽 作为此数据的一部分 我想包含一些由渲染函数构造的 VNode 这些 VNode 可以选择由作用域插槽使用 无论如何 在模板中编写作用域槽以输出收到的原始 VNode 时是否存在 Vu
  • Vue父组件访问子组件的compute属性

    在 Vue JS 中 当在数组元素 子元素 的计算属性中进行更改时 我无法监视数组的更改 我在编写的 JSFiddle 示例中总结了这个问题 因此该示例在逻辑上可能没有意义 但它确实显示了我的问题 https jsfiddle net tr
  • vue.js keyup, keydown 事件落后一个字符

    我正在使用 keydown keyup 事件 它调用一个 javascript 函数 该函数将输入框的值打印到控制台 以及事件的 currentTarget 字段的值 并且我注意到它晚了一个字符 例如 如果我输入hello进入输入框 我只看
  • 在 VueJs 中使用上下键自动完成搜索

    除了自动完成搜索之外 我还想添加功能以允许使用 VueJs 按下 向上键功能 我的模板如下所示 div h2 Todos h2 div class autocomplete div div
  • vue-router 仅更改命名视图之一,而不影响其他视图

    我正在使用 vue router 进行测试并遇到这个问题 如果我有两个命名视图但我只想更改其中一个而不更改默认视图怎么办 目前我是这样做的 const router new VueRouter routes path components
  • vue中有自动更新这段代码的东西吗?

    我在导航器中找到了这个按钮 当用户登录时会显示该按钮 而当用户注销时该按钮就会消失 但现在我需要在按钮删除 出现之前刷新页面 这是我的代码 Button div div class div div
  • 如何预渲染多个Vue应用页面?

    我正在尝试 未成功 在使用 Vue CLI 搭建的同一项目中预渲染多个 Vue 应用程序的 HTML 由于多种原因 我不想使用 Vue Router 或 Nuxt 等 我尝试过使用预渲染 Spa 插件 https github com ch
  • 观察者不触发

    我正在使用带有选项 API 的 Vue 3 如下面发布的代码所示 在watch对象 我监视发生的变化isToggleBtnLabelDigitizePolygon 在方法中onDigitizePolygon我改变的值isToggleBtnL
  • 如何在外部 .js 文件中分离 .vue 组件的方法?

    我的组件留下了许多行代码 因此我决定将这些方法放在一个名为functions js 的单独文件中 我无法调用这些方法 我试过这个 函数 js function sendList function getLists function dele
  • Laravel 5.2 CORS,GET 不适用于预检选项

    可怕的 CORS 错误 跨源请求被阻止 同源策略不允许读取 远程资源位于http localhost mysite api test http localhost mysite api test 原因 CORS 标头 Access Cont
  • vue.js:观察输入并未在每次按键时触发

    我有一个input正在监视其模型属性 问题是每次按键时不会调用 watch 方法铬 安卓设备 如果我点击输入文本 就会调用它 过去确实有效 但我不知道发生了什么 在Chrome 桌面版可以正常使用 那就是watch for text每次按键
  • 如何在 vue.js 中使用 SVG.js 插件?

    我在用svg js在我的 Laravel 项目中运行vue js 这就是我使用的方式svg js Step 1 安装svg js作为我的 vue 应用程序中的插件 import svgJs from svg js dist svg expo
  • 使用 Vue.js 附加 HTML 元素

    所以我对此真的很陌生Vue js我想要实现的目标很简单 我试图附加这个结果Ajax请求进入我的列表 div div
  • 从可组合项访问引用值

    这是我的 Vue3 应用程序代码

随机推荐