• Vue学习笔记-深入组件(动态组件/异步组件)


    在动态组件上使用 keep-alive

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

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

    异步组件

    <component :is="currentTabComponent"></component>
    
    components: {
        homePage: function(resolve) {
            require(['../homePage'], resolve)
        },
        resourceManage: function(resolve) {
            require(['../resourceManage'],resolve)
        }
    }
    Vue.component('async-webpack-example', function (resolve) {
      // 这个特殊的 `require` 语法将会告诉 webpack
      // 自动将你的构建代码切割成多个包,这些包
      // 会通过 Ajax 请求加载
      require(['./my-async-component'], resolve)
    })
    
    require 像是一个带回调的异步请求 成功数据在resolve

    工厂函数会收到一个 resolve 回调

    你也可以在工厂函数中返回一个 Promise

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

    局部注册直接返回一个promise的函数

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

  • 相关阅读:
    C语言II博客作业04
    C语言II博客作业03
    C语言II博客作业02
    C语言II博客作业01
    C语言学期总结
    计科二班李英本周第一次作业
    C语言I博客作业09
    C语言I博客作业08
    C语言I博客作业07
    C语言I博客作业06
  • 原文地址:https://www.cnblogs.com/liuguiqian/p/11041751.html
Copyright © 2020-2023  润新知