zoukankan      html  css  js  c++  java
  • 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')
      }
    })

  • 相关阅读:
    axios 进行类库封装
    vue的中vuex为何需要mutation更新状态,vue-router的路由的理解
    发布订阅者模式、观察者模式总结
    es 模块的基础知识,深度了解
    绑定事件的模型
    rem+media+jquery布局结局方案
    VDOM总结
    react-redux
    发布网站配置文件和SSL
    css3d旋转
  • 原文地址:https://www.cnblogs.com/liuguiqian/p/11041751.html
Copyright © 2011-2022 走看看