Vue动态组件与异步组件实例详解


Posted in Javascript onFebruary 23, 2019

本文实例讲述了Vue动态组件与异步组件。分享给大家供大家参考,具体如下:

1 在动态组件上使用 keep-alive

我们之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件:

<component v-bind:is="currentTabComponent"></component>

当在这些组件之间切换的时候,你有时会想保持这些组件的状态,以避免反复重渲染导致的性能问题。例如我们来展开说一说这个多标签界面:

Vue动态组件与异步组件实例详解

你会注意到,如果你选择了一篇文章,切换到 Archive 标签,然后再切换回 Posts,是不会继续展示你之前选择的文章的。这是因为你每次切换新标签的时候,Vue 都创建了一个新的 currentTabComponent 实例。

重新创建动态组件的行为通常是非常有用的,但是在这个案例中,我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题,我们可以用一个 <keep-alive> 元素将其动态组件包裹起来。

<!-- 失活的组件将会被缓存!-->
<keep-alive>
 <component v-bind:is="currentTabComponent"></component>
</keep-alive>

现在这个 Posts 标签保持了它的状态 (被选中的文章) 甚至当它未被渲染时也是如此。

html:

<div id="dynamic-component-demo">
  <button
      v-for="tab in tabs"
      v-bind:key="tab"
      v-bind:class="['tab-button',{active:currentTab === tab}]"
      v-on:click="currentTab = tab"
      >{{ tab }}
  </button>
  <keep-alive>
    <component
        v-bind:is="currentTabComponent"
        class="tab"></component>
  </keep-alive>
</div>

js:

Vue.component('tab-posts', {
  data: function () {
    return {
      posts: [
        {
          id: 1,
          title: '赶在618前夕,微信更新了两个支付与电商功能',
          content: '本周末,中国消费者即将迎来上半年最大的消费网购峰值,6月17日父亲节,6月18日端午节,也是京东、天猫等电商的618购物节。略微出人意料但又在情理之中的是,中国最大的社交平台微信,近日密集上线了两个与支付和电商相关的功能。'
        },
        {
          id: 2,
          title: '腾讯要花32亿收购《绝地求生》开发商10%股份',
          content: '目前腾讯和蓝洞已经接近达成协议,如果交易成功,腾讯将成为蓝洞的第二大股东。'
        },
        {
          id: 3,
          title: '这两个地球之眼是真的吗?形成原因至今仍是谜团',
          content: '一名俄罗斯男子乘坐直升机游览时,经过俄罗斯萨哈林岛(库页岛)时,看到一个巨大的坑洞。地球上坑坑洞洞很多,本该不用大惊小怪。但当飞机离得更近,换了个角度看这个坑时,他震惊了,这分明就是“地球的眼睛”。'
        }
      ],
      selectedPost: null
    }
  },
  template: `
    <div class="posts-tab">
      <ul class="posts-sidebar">
        <li
          v-for="post in posts"
          v-bind:key="post.id"
          v-bind:class="{selected:post === selectedPost}"
          v-on:click="selectedPost = post">
          {{ post.title }}
        </li>
      </ul>
      <div class="selected-post-container">
        <div
          v-if="selectedPost"
          class="selected-post">
          <h3>{{ selectedPost.title }}</h3>
          <div v-html="selectedPost.content"></div>
        </div>
        <strong v-else>
          请点击某个标签页
        </strong>
      </div>
    </div>
  `
});
Vue.component('tab-archive', {
  template: '<div>archive 页面</div>'
});
new Vue({
  el: '#dynamic-component-demo',
  data: {
    currentTab: 'Posts',
    tabs: ['Posts', 'Archive']
  },
  computed: {
    currentTabComponent: function () {
      return 'tab-' + this.currentTab.toLowerCase();
    }
  }
});

css:

.tab-button {
  padding: 6px 10px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border: 1px solid #ccc;
  cursor: pointer;
  background: #f0f0f0;
  margin-bottom: -1px;
  margin-right: -1px;
}
.tab-button:hover {
  background: #e0e0e0;
}
.tab-button.active {
  background: #e0e0e0;
}
.tab {
  border: 1px solid #ccc;
  padding: 10px;
}
.posts-tab {
  display: flex;
}
.posts-sidebar {
  max-width: 40vw;
  margin: 0;
  padding: 0 10px 0 0;
  list-style-type: none;
  border-right: 1px solid #ccc;
}
.posts-sidebar li {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: pointer;
}
.posts-sidebar li:hover {
  background: #eee;
}
.posts-sidebar li.selected {
  background: lightblue;
}
.selected-post-container {
  padding-left: 10px;
}
.selected-post > :first-child {
  margin-top: 0;
  padding-top: 0;
}

效果:

Vue动态组件与异步组件实例详解

2 异步组件

在大型应用中,我们可能需要将应用分割成小一些的代码块,并且只在需要的时候才从服务器加载一个模块。为了简化,Vue 允许你以一个工厂函数的方式定义你的组件,这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会被触发,且会把结果缓存起来供未来重渲染。例如:

Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    //在此定义组件
    resolve({
      template: `
        <div>
          我是异步加载的哦
        </div>
      `
    })
  }, 1000);
});

如你所见,这个工厂函数会收到一个 resolve 回调,这个回调函数会在你从服务器得到组件定义的时候被调用。你也可以调用 reject(reason) 来表示加载失败。这里的 setTimeout 是为了演示用的,如何获取组件取决于你自己。一个推荐的做法是将异步组件和 webpack 的 code-splitting 功能 一起配合使用:

Vue.component('async-webpack-example', function (resolve) {
 // 这个特殊的 `require` 语法将会告诉 webpack
 // 自动将你的构建代码切割成多个包,这些包
 // 会通过 Ajax 请求加载
 require(['./my-async-component'], resolve)
})

你也可以在工厂函数中返回一个 Promise,所以把 webpack 2 和 ES2015 语法加在一起,我们可以写成这样:

Vue.component(
 'async-webpack-example',
 // 这个 `import` 函数会返回一个 `Promise` 对象。
 () => import('./my-async-component')
)

当使用局部注册的时候,你也可以直接提供一个返回 Promise 的函数:

new Vue({
 // ...
 components: {
  'my-component': () => import('./my-async-component')
 }
})

如果你是一个 Browserify 用户同时喜欢使用异步组件,很不幸这个工具的作者明确表示异步加载“并不会被 Browserify 支持”,至少官方不会。Browserify 社区已经找到了一些变通方案,这些方案可能会对已存在的复杂应用有帮助。对于其它的场景,我们推荐直接使用 webpack,以拥有内建的被作为第一公民的异步支持。

处理加载状态

2.3.0+ 新增

这里的异步组件工厂函数也可以返回一个如下格式的对象:

const AsyncComponent = () => ({
 // 需要加载的组件 (应该是一个 `Promise` 对象)
 component: import('./MyComponent.vue'),
 // 异步组件加载时使用的组件
 loading: LoadingComponent,
 // 加载失败时使用的组件
 error: ErrorComponent,
 // 展示加载时组件的延时时间。默认值是 200 (毫秒)
 delay: 200,
 // 如果提供了超时时间且组件加载也超时了,
 // 则使用加载失败时使用的组件。默认值是:`Infinity`
 timeout: 3000
})

注意如果你希望在 Vue Router 的路由组件中使用上述语法的话,你必须使用 Vue Router 2.4.0+ 版本。

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
showModelDialog弹出文件下载窗口的使用示例
Nov 19 Javascript
Javascript变量的作用域和作用域链详解
Apr 02 Javascript
js+css绘制颜色动态变化的圈中圈效果
Jan 27 Javascript
JQuery手速测试小游戏实现思路详解
Sep 20 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 Javascript
EasyUI学习之DataGird分页显示数据
Dec 29 Javascript
vue router自动判断左右翻页转场动画效果
Oct 10 Javascript
Vue自定义弹窗指令的实现代码
Aug 13 Javascript
mpvue将vue项目转换为小程序
Sep 30 Javascript
Vue项目中最新用到的一些实用小技巧
Nov 06 Javascript
详解如何更好的使用module vuex
Mar 27 Javascript
javascript实现留言板功能
Feb 08 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 #Javascript
详解关于Vuex的action传入多个参数的问题
Feb 22 #Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 #Javascript
vue组件之间通信方式实例总结【8种方式】
Feb 22 #Javascript
vue2.0中set添加属性后视图不能更新的解决办法
Feb 22 #Javascript
浅谈Node框架接入ELK实践总结
Feb 22 #Javascript
vue工程全局设置ajax的等待动效的方法
Feb 22 #Javascript
You might like
php的laravel框架快速集成微信登录的方法
2016/12/12 PHP
IE与FireFox中的childNodes区别
2011/10/20 Javascript
javascript面向对象入门基础详细介绍
2012/09/05 Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
2012/11/13 Javascript
js onclick事件传参讲解
2013/11/06 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
2015/08/25 Javascript
JS实现的颜色实时渐变效果完整实例
2016/03/25 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
2016/05/31 Javascript
如何在Angular2中使用jQuery及其插件的方法
2017/02/09 Javascript
Angular2 路由问题修复详解
2017/03/01 Javascript
深入理解vue.js中的v-if和v-show
2017/06/22 Javascript
vue权限路由实现的方法示例总结
2018/07/29 Javascript
浅谈layui里的上传控件问题
2019/09/26 Javascript
js观察者模式的弹幕案例
2020/11/23 Javascript
详解Python中的文件操作
2016/08/28 Python
Python实现获取命令行输出结果的方法
2017/06/10 Python
Python应用库大全总结
2018/05/30 Python
Python 爬取携程所有机票的实例代码
2018/06/11 Python
Python列表list操作相关知识小结
2020/01/29 Python
Python Scrapy多页数据爬取实现过程解析
2020/06/12 Python
Flask缓存静态文件的具体方法
2020/08/02 Python
详解html5 canvas 微信海报分享(个人爬坑)
2018/01/12 HTML / CSS
捷克电器和DJ设备网上商店:Electronic-star
2017/07/18 全球购物
美国购买舞会礼服网站:Couture Candy
2019/12/29 全球购物
幼儿园亲子活动方案
2014/01/29 职场文书
毕业生求职自荐书范文
2014/03/27 职场文书
超市活动计划书
2014/04/24 职场文书
店铺转让协议书(2014版)
2014/09/23 职场文书
党的群众路线领导班子整改方案
2014/09/27 职场文书
教师拔河比赛广播稿
2014/10/14 职场文书
2014年政协委员工作总结
2014/12/01 职场文书
Python编解码问题及文本文件处理方法详解
2021/06/20 Python
「Manga Time Kirara MAX」2022年5月号封面公开
2022/03/21 日漫
Win11怎么跳过联网验机 ?Win11跳过联网验机激活教程
2022/04/05 数码科技