【vue学习】动态组件和异步组件

动态组件

image

有的时候，在不同组件之间进行动态切换是非常有用的，比如在一个多标签的界面里：

image

is

上述内容可以通过 Vue 的 元素加一个特殊的 is 特性来实现

在上述示例中，currentTabComponent 可以包括

• 已注册组件的名字，或
• 一个组件的选项对象
• component中绑定参数的方式和普通组件一样
  
  

  image
• 解析 DOM 模板时的注意事项：有些 HTML 元素，诸如
  、
  、 和 ，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如
  1. 、
  和 ，只能出现在其它某些特定的元素内部。这会导致我们使用这些有约束条件的元素时遇到一些问题。例如：
  • 这个自定义组件 会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的 is 特性给了我们一个变通的办法：

  keep-alive

  当组件切换时，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题
  

  
  image
  
  上图中，你选择了一篇文章，切换到 Archive 标签，然后再切换回 Posts，不会继续展示之前选择的文章。因为你每次切换时， Vue 都创建了一个新的 currentTabComponent 实例。

  重新创建动态组件的行为通常非常有用，但该案例中，我们更希望标签的组件实例能够被缓存下来。我们可以用 元素将其动态组件包裹起来。
  

  
  image
  
  
  
  image

  注意这个 要求被切换到的组件都有自己的名字，不论是通过组件的 name 选项还是局部/全局注册。

  组件中的name选项有什么作用？

  根据上面的注意事项，延伸出该问题，下面来看个网上的回答：

  vue组件name的作用小结

  1. 当项目使用keep-alive时，可搭配组件name进行缓存过滤

  //假设我们有个组件命名为detail,
  //其中dom加载完毕后我们在钩子函数mounted中进行数据加载
  export default {
    name:'Detail'
  }，
  mounted(){
    this.getInfo();
  }，
  methods:{
    getInfo(){
       axios.get('/xx/detail.json',{
         params:{
          id:this.$route.params.id 
         }
       }).then(this.getInfoSucc)
     }
   }
   /**
   在App.vue中使用了keep-alive导致
   我们第二次进入的时候页面不会重新请求，
   即不会再次触发mounted函数。
  
   有两个解决方案：
   一个增加activated()函数,每次进入新页面的时候再获取一次数据。
   还有个方案就是在keep-alive中增加一个过滤exclude：
   */
   
   
   
    
   
  
  

  2. DOM做递归组件时

  
      
  
        
  
          
          {{item.title}}
        
        
  
        
          
        
      
   
  
  

  迭代结果如下：

  
  
  
  image
  3. 当你用vue-tools时：该调试工具里显示的组见名称是由vue中组件name决定的
     
     

     image

  异步组件

  在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。

  为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。

  Vue 只有在这个组件需要被渲染时才会触发该工厂函数，且会把结果缓存起来供未来重渲染

  知识点

  
  image

  • 如你所见，这个工厂函数会收到一个 resolve 回调，这个回调函数会在你从服务器得到组件定义的时候被调用。你也可以调用 reject(reason) 来表示加载失败。

  • 这里的 setTimeout 是为了演示用的，如何获取组件取决于你自己。一个推荐的做法是将异步组件和 webpack 的 code-splitting 功能一起配合使用：
    

    

    image

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

    

    image

  组件之间的循环引用

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

    

    image

  • vue处理边界情况中有一种情况是：组件之间的循环引用，这里就涉及到了异步加载组件问题：
    

    

    image

  • 当你仔细观察的时候，你会发现这些组件在渲染树中互为对方的后代和祖先——一个悖论！
    当通过 Vue.component 全局注册组件的时候，这个悖论会被自动解开。
    如果你是这样做的，那么你可以跳过这里。

  • 然而，如果你使用一个模块系统依赖/导入组件，例如通过 webpack 或 Browserify，你会遇到一个错误：
    

    

    image

  • 这里我们可以异步import（具体的我们可以在处理边界情况一节中具体再学习）
    

    

    image

  处理加载状态

  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异步组件处理路由组件加载状态的解决方案

  • 在大型单页面应用中，处于对性能的考虑和首屏加载速度的要求，我们一般都会使用webpack的代码分割和vue-router的路由懒加载功能将我们的代码分成一个个模块，并且只在需要的时候才从服务器加载一个模块。
  • 但是这种解决方案也有其问题，当网络环境较差时，我们去首次访问某个路由模块，由于加载该模块的资源需要一定的时间，那么该段时间内，我们的应用就会处于无响应的状态，用户体验极差。
  • 【解决方案】这种情况，我们一方面可以缩小路由模块代码的体积，静态资源使用cdn存储等方式缩短加载时间，另一方面则可以路由组件上使用异步组件，显示loading和error等状态，使用户能够得到清晰明了的操作反馈。
  • 【具体实现】声明方法，基于Vue动态组件工厂函数来返回一个Promise对象
    
    

    image
    
    调用：
    
    

    image