Question

我有一些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);

那没有达到我的期望

Answer 1

如果要在加载vue组件之前或期间加载的javascript与vue组件本身有关，请使用@matticusatrd发布的解决方案。如果要在加载任何vue组件之前执行javascript，请将其放在页面<head>的{{1}}中。

当心，这将使整个页面加载等待javascript代码执行。此外，您还没有可用的dom，因此在对页面进行任何操作之前，您可能需要先监听app.js之类的事件。

Answer 2

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

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

Answer 3

好吧，它不会等待，因为vue js会编译然后生成DOM。在vue js加载后执行任何操作的更好方法是使用Vue Component类的已安装或创建的方法。

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

在Laravel上异步加载Vue组件

3 个答案: