简单
技术面试0 次浏览字节跳动的一些产品有动态加载组件的需求,例如在用户操作时才加载某些功能组件。请简述如何使用 Vue.js 实现动态组件加载。
字节跳动前端工程师
Vue.js动态组件
答题要点
推荐使用分层分析法,从组件定义、加载方式、使用场景等方面阐述。关键要点如下:1. 组件定义,定义需要动态加载的组件,可以是本地组件或远程组件。2. 异步加载,使用 Vue 的异步组件特性,通过 import() 函数实现动态加载。3. 组件使用,在模板中使用 <component> 标签,通过 is 属性指定要加载的组件。示例思路:首先定义一个异步组件,如 const AsyncComponent = () => import('./AsyncComponent.vue') ,然后在模板中使用 <component :is='AsyncComponent'></component> ,这样当需要加载该组件时,Vue 会自动进行异步加载。