vue 动态组件、异步组件

1、动态组件

    动态组件适用于在多标签页面中动态切换组件，通过component元素的is属性实现。

例如：需要在一个页面中动态切换商品介绍、商品评价和用户问答三个按钮标签，代码如下：

注册三个组件的实现代码：

在根实例中定义两个数据属性和一个计算属性，为了便于使用v-for指令循环渲染button按钮，以及动态切换组件，代码如下：

数据属性currentTab表示当前的标签页，tabs数组表示需要显示的数据属性内容，通过v-for标签来渲染tabs数组对应的标签，计算属性currentTabComponent代表当前选中的组件。接下来在与实例相关联的DOM模板中渲染按钮，以及动态切换软件，代码如下：

当点击一个按钮时，currentTab的值会更改，从而导致currentTabComponent的值更新，<component>元素的is属性使用v-bind指令绑定到一个已经注册组件的名字上，随着计算属性的改变，组件也就自动切换了。结果如下：

每次在切换新标签时，Vue都创建一个新的currentTabComponent实例，所有会导致之前修改标签里的内容不会被保存，为了避免重复渲染，可使用<keep-alive>标签包裹动态组件。

2、异步组件

    作用：将应用分割成较小的代码块，只在需要时才从服务器加载组件

   实现方式：以一个工厂函数的方式定义组件，然后异步解析组件定义

   结果：只有在组件被渲染时才触发工厂函数，并将结果缓存，用于下次渲染

   示例：

  

渲染结果：

推荐做法：异步组件+webpack的代码拆分功能