在 Laravel 上异步加载 Vue 组件答案

【问题标题】：Load Vue components async on Laravel在 Laravel 上异步加载 Vue 组件
【发布时间】：2019-08-08 21:20:39
【问题描述】：

我有一些javascript 可以在blade 文件中运行，但它正在等待Vue 组件在运行前完全加载。

...
<p id="a"></p>
<my-vue-component></my-vue-component>
...
<script>
  document.getElementById('a').innerText = 'ggg'
</script>

javascript 代码等待Vue 组件加载，然后执行。

我不希望 Vue 组件暂停其余的 javascript。我希望它在其余 javascript 执行时加载或在 javascript 完成执行后加载。

我尝试安装用于异步渲染的动态导入插件

npm install --save-dev @babel/plugin-syntax-dynamic-import

并在 .babelrc 中注册

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

并运行编译器

npm run watch

然后在注册组件的app.js中

Vue.component('my-vue-component', () => import('./components/MyVueComponent.vue').default);

这并没有达到我的预期

【问题讨论】：

重要提示：我想在Vue组件之前运行的JS代码是组件的out，即它不属于组件

标签： javascript laravel vue.js

【解决方案1】：

如果您在加载 vue 组件之前或期间要加载的 javascript 与 vue 组件本身有关，那么请寻求@matticusatrd 发布的解决方案。如果您希望在加载任何 vue 组件之前执行 javascript，请将其放在页面的 <head> 中，然后放在您的 app.js 之前。

请注意，这会使整个页面加载等待 javascript 代码执行。此外，您还没有可用的 dom，因此您可能需要在对页面进行任何操作之前收听诸如 DOMContentLoaded 之类的事件。

【讨论】：

【解决方案2】：

要在加载 Vue 组件后运行一些 JavaScript，只需将其添加到 mounted() 方法即可。

export default {
    name: "MyVueComponent",
    ...
    mounted() {
        // everything here runs after the component is loaded
        let a = true;
    }
}

【讨论】：

我希望我的 JS 在 before 或加载 Vue 组件期间运行，但不要在之后运行。重要提示：我要运行的 JS 不在 Vue 组件中，它在它之外，在托管组件的页面中
那你的帖子很混乱。您说过，“......Vue 组件必须在 javascript 运行之前完全加载”。现在你说它可以运行之前？这没有任何意义。
你说得对，我的措辞很糟糕。我刚刚解决了这个问题
那么你可能应该考虑使用@PtrTon 提到的方法。但是您提供的示例 JavaScript 需要加载 DOM 才能正常工作，这意味着如果您希望 Vue 组件中的任何链接包含在您正在做的任何事情中，您仍然必须延迟执行直到加载 Vue 组件之后— 你无法获取尚未写入 DOM 的元素。
你是对的。 Vue 组件是 DOM 的一部分，之后的任何 Javascript 都必须等待 Vue 组件渲染才能运行。所以，@PtrTon 基本上是正确的。感谢 cmets

【解决方案3】：

好吧，它不会等待，因为 vue js 编译然后生成 DOM。在 vue js 加载后执行任何操作的更好方法是使用 Vue 组件类的 mount 或 created 方法。

export default{
    name: 'TestComponent',
    mounted(){
        //
    },
    created(){
        //
    }
}

【讨论】：

created 方法还没有渲染 HTML。