• 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')
      }
    })

  • 相关阅读:
    Ubuntu 虚拟机空间不足增加空间笔记
    am335x sd卡启动开启识别emmc kernel 上的改动
    Delphi实现树型结构具体实例
    学习 TTreeView [15]
    delphi中Treeview的使用介绍
    按下F2编辑dxDBTreeView的节点
    dbtreeview
    我的dbtreeview–treeview直接连接数据表_delphi教程
    SqlDbx连接oracle(可用)
    SqlDbx连接oracle(无需安装Oracle客户端)
  • 原文地址:https://www.cnblogs.com/liuguiqian/p/11041751.html
Copyright © 2020-2023  润新知