Vue之异步组件【按需加载,动态引入,乃Vue异步组件之精髓也】

简介: Vue之异步组件【按需加载,动态引入,乃Vue异步组件之精髓也】

引子

搞一搞Vue的学习吧,咱们来说说Vue中的那个家伙——异步组件。这异步组件来头不小,究竟是个啥呢?它有那么重要吗?咱们一探究竟。

有的时候,我们的Vue项目有些页面可能包含了大量的组件,而且每个组件又大如猪笼相同,一下子在页面加载的时候把所有组件都给用户看,这不就相当于端着大猪笼去赶集嘛。于是,我们就想到了按需加载。想用啥,就加载啥,用不着的东西,先放放。这就是Vue异步组件的来历。使用异步组件的话,可以大大减少首页加载需要的时间,网页反应会更快,用户也会得到更好的体验。


异步组件是怎么一回事?

异步组件就是我们的Vue项目中,需要但又不需要立即使用的组件。简单来说,就是按需加载。只有当组件真的需要呈现在用户眼前的时候,我们才去加载它。这样的好处就是可以减轻首页的加载压力,使得网页的响应速度更快,同时也方便我们复用和管理代码。


怎么去使用呢?

  1. 我们要创建一个异步组件,只需要这样:
 const MyComponent = () => Promise.resolve({
      template: '<div>我是异步加载的组件</div>'
 })

这段代码的意思就是说,我定义了一个MyComponent,它实际上是一个异步加载的组件。这个组件可能需要花一些时间来加载,并且加载成功后会返回一个包含模板定义的Promise对象

  1. 我们在去使用的时候,先注册一下这个异步组件:
  new Vue({
      el: '#app',
      components: {
          MyComponent
      }
  })

注册完以后,我们就可以在HTML中使用这个异步组件了:

 <div id="app">
     <my-component></my-component>
 </div>

需要注意的是,在Vue的异步组件中,并不像普通组件那样可以直接在created生命周期使用数据和方法,因为此时的异步组件可能还没有准备好。但是,在mounted生命周期就可以放心地使用了,因为mounted生命周期会在组件被挂载到DOM上后触发。

小结

简单来说,Vue的异步组件就是个“救星”,可以大大提高页面的性能和用户体验,值得诸位在实际的项目中去使用。

目录
相关文章
|
16小时前
|
JavaScript 索引
Component name “index“ should always be multi-word vue/multi-word-component-names
Component name “index“ should always be multi-word vue/multi-word-component-names
|
15小时前
|
JavaScript
vue 创建项目、运行项目、访问项目(vue2版)
vue 创建项目、运行项目、访问项目(vue2版)
5 0
|
16小时前
|
Web App开发 JavaScript
vue报错【解决方案】 [Violation] Added non-passive event listener to a scroll-blocking <some> event.
vue报错【解决方案】 [Violation] Added non-passive event listener to a scroll-blocking <some> event.
5 0
|
16小时前
|
JavaScript
vue v-for循环渲染动态ref表单校验的实现技巧
vue v-for循环渲染动态ref表单校验的实现技巧
4 0
|
1天前
|
JavaScript 前端开发
|
1天前
|
JavaScript
Eslint-------error ‘Vue‘ is not defined no-undef
Eslint-------error ‘Vue‘ is not defined no-undef
|
1天前
|
JavaScript
|
1天前
|
JavaScript
vue 下载插件downloadjs
vue 下载插件downloadjs
9 1
|
1天前
|
JavaScript
vue组件封装 —— 仪表盘(有缺口的环形进度条内显示百分比值)
vue组件封装 —— 仪表盘(有缺口的环形进度条内显示百分比值)
7 1
|
1天前
|
JavaScript
vue实战——元素的拖拽 + 控制元素无法拖拽出盒子 + 随元素拖拽自适应变化大小的盒子
vue实战——元素的拖拽 + 控制元素无法拖拽出盒子 + 随元素拖拽自适应变化大小的盒子
6 1