猪八戒网可以做网站吗,wordpress 精仿36kr,公司注册地址与办公地址不一致,梦幻创意晋城网站建设异步组件#xff1a;defineAsyncComponent
Vue3 的 defineAsyncComponent 特性可以让我们延迟加载组件。因为在默认情况下#xff0c;在构建项目或运行项目时#xff0c;会将所有所需要的打包成一个整体#xff0c;vue为单页面应用#xff0c;同步加载大量的页面代码会导…异步组件defineAsyncComponent
Vue3 的 defineAsyncComponent 特性可以让我们延迟加载组件。因为在默认情况下在构建项目或运行项目时会将所有所需要的打包成一个整体vue为单页面应用同步加载大量的页面代码会导致页面长时间处于空白情况所以
这是一个改善初始页面加载的好方法因为该方法会将以较小的块加载而不必在页面加载时加载每个组件。
来自官网可查看示例异步组件 import { defineAsyncComponent } from vueconst AsyncComp defineAsyncComponent(() {return new Promise((resolve, reject) {// ...load component from serverresolve(/* loaded component */)})
})
// ... use AsyncComp like a normal component 使用 import 引入 所需组件 // 使用
AsyncComp /AsyncComp import { defineAsyncComponent } from vueconst AsyncComp defineAsyncComponent(() import(./components/MyComponent.vue)
) defineAsyncComponent 可配置参数 const AsyncComp defineAsyncComponent({// the loader functionloader: () import(./Foo.vue),// A component to use while the async component is loadingloadingComponent: LoadingComponent,// Delay before showing the loading component. Default: 200ms.delay: 200,// A component to use if the load failserrorComponent: ErrorComponent,// The error component will be displayed if a timeout is// provided and exceeded. Default: Infinity.timeout: 3000
}) 动态组件component
可以根据条件动态选择要渲染的组件。通过使用动态组件可以基于不同的状态条件来切换不同的组件从而实现更灵活的组件复用和组合
使用情景有的时候在页面中需要在不同组件之间进行动态切换这时候除了条件渲染还可以使用动态组件来实现
注意
is 属性的值必须是以字符串形式指定的已注册组件的名称。:is 则会将表达式的值作为字符串解析从而动态地渲染相应的组件。vue3 setup 语法糖跟vue2区别 引入不能直接赋值给:is 必须定义
!-- 父组件 --
template
div classcomponent :ischildOneCom/component
/div
/templatescript setup
import childOne from ./childOne.vue;const childOneCom ref(childOne);/script
style langscss scoped
/style 缓存组件keep-alive keep-alive 包裹的组件component在被隐藏后并不会将组件销毁而是将其缓存起来下次再次使用时会从缓存中取出复用的过程。 只执行了创建前后、挂载前后没有执行销毁函数当再次切回时不执行创建前后、挂载前后的生命周期函数了而是只执行了父组件的更新前后函数执行
参数
include匹配的路由/组件被缓存exclude匹配的路由/组件不被缓存max最大缓存数
include/exclude使用逗号分割、正则形式必须采用v-bind形式、数组形式必须采用v-bind形式
匹配规则
首先匹配组件的name选项 如果name选项不可用则匹配它的局部注册名称父组件components选项的键值 匿名组件不可匹配路由组件没有name选项并且没有注册的组件名 只能匹配当前被包裹的组件不能匹配更下面嵌套的子组件例如只能匹配路由组件的name选项不能匹配路由组件里面的嵌套组件name选项 不会在函数式组件中正常工作因为他们没有缓存实例 exclude的优先级include !-- 逗号分隔字符串 --keep-alive includeone,twocomponent :isthree/component/keep-alive!-- 正则表达式 (使用 v-bind) --keep-alive :include/one|two/component :isthree/component/keep-alive!-- 数组形式 (使用 v-bind) --keep-alive :include[one, two]component :isthree/component/keep-alive!— 缓存路由 --keep-alive includetworouter-view/router-view/keep-alive vue2.x vue3.x 区别
在App.vue中
!-- vue2.x配置 --
templatekeep-aliverouter-view v-if$route.meta.keepAlive //keep-aliverouter-view v-if!$route.meta.keepAlive/
/template!-- vue3.0配置 --
templaterouter-view v-slot{ Component }keep-alivecomponent :isComponent v-if$route.meta.keepAlive//keep-alivecomponent :isComponent v-if!$route.meta.keepAlive//router-view
/template
vue3.x 中使用name属性 插件vite-plugin-vue-setup-extend scriptexport default {name: xxx,}
/scriptscript setup/scriptscriptexport default {name: xxx,setup(){return {}},}
/scriptimport { defineComponent } from vue;
defineOptions({name: xxx,
})总结
可根据实际情况 结合、拆分使用
