怎么做网站里导出没有水印的图,上海外贸公司是国企吗,二维码生成器永久免费版下载,系统网站建设方案文章目录 Vue 动态组件 keep-alive知识点讲解业务场景实例代码实现keep-alive Vue 动态组件 keep-alive
知识点讲解
通过 Vue 的 component 组件和特殊的 is 属性实现的。
!-- curentComponent 改变时组件也改变 --
component :iscomponentMap[… 文章目录 Vue 动态组件 keep-alive知识点讲解业务场景实例代码实现keep-alive Vue 动态组件 keep-alive
知识点讲解
通过 Vue 的 component 组件和特殊的 is 属性实现的。
!-- curentComponent 改变时组件也改变 --
component :iscomponentMap[curentComponent]/component被传给 :is 的值可以是以下几种
被注册的组件名导入的组件对象
除了以上两种也可以使用 is 属性创建一般的 HTML 元素只要将 is 属性的值设置为任意 HTML 元素标签名比如 ‘div’、‘span’、‘a’ 等Vue 将会根据这个值创建相应的元素。
业务场景实例
访问某系统跳转系统登录页左侧展示图片和公司宣传语右侧展示登录相关信息。左侧内容固定不变针对不同情况右侧展示的登录信息不同这种情况右侧区域可以采用动态组件实现不同内容的切换。 业务逻辑流转如下
访问系统展示【登陆账户】输入手机号点击登录/注册按钮。后端验证该手机号是否注册如果暂未注册展示【输入验证码】。验证码校验通过展示【请设置密码】。密码确认之后展示【登录账户】。点击重置密码展示【设置新密码】。
当然除此场景以外tab 的切换场景也非常常见。 代码实现
代码涉及知识点 Typescript 工具类型 RecordKeys, Type
import Login from ./components/Login.vue
import Code from ./components/VerifyCode.vue
import SetPassword from ./components/SetPassword.vue
import Password from ./components/Password.vue
import SetNewPassword from ./components/SetNewPassword.vueconst curentComponent refstring(Login)const componentMap shallowRefRecordstring, Component({Login,Password,Code,SetPassword,SetNewPassword
})// 不同的时机修改 curentComponent.value ❗❗❗ 注意点 Vue2 是通过组件名称切换的Vue3 是通过组件实例切换的。 如果直接把组件实例放到 reactive 中代理Vue 会发出警告。告知我们可以通过 shallowRef 或者 markRaw 跳过 proxy 代理。因为组件实例进行响应式代理毫无意义且浪费性能。 keep-alive
本节内容涉及 Vue Devtools 插件下载、安装和应用 当使用 component :is“…” 在多个组件间作切换时被切换掉的组件会被卸载。我们可以通过 keep-alive 组件强制被切换掉的组件仍然保持“存活”的状态。
当使用 keep-alive 缓存了组件而不是频繁创建和销毁(开销大)。
有三个属性: include 组件名只要匹配添加的名称表示会被缓存。 exclude 组件名匹配添加的名称表示不会被缓存。 max 设置最多缓存实例数。一般用于页面级别缓存。 !-- include/exclude 支持以下格式设置 --
!-- 以英文逗号分隔的字符串 --
KeepAlive includea,bcomponent :isview /
/KeepAlive!-- 正则表达式 (需使用 v-bind) --
KeepAlive :include/a|b/component :isview /
/KeepAlive!-- 数组 (需使用 v-bind) --
KeepAlive :include[a, b]component :isview /
/KeepAlive!-- 设置最大缓存实例数 --
KeepAlive :max10component :isactiveComponent /
/KeepAlive涉及两个生命周期
deactived组件失效时触发。一般用于做一些未存储数据的提示。actived当组件被激活时。一般用于做一些页面初始化的数据查询。
除了配合 component :is“…” 使组件保持存活状态还可以配合路由 router-view 使用可以使页面保留状态避免重复渲染。
通过 Vue devtools 比较使用 keep-alive 缓存和不使用 keep-alive 缓存时组件的两种存在状态。
未缓存组件 缓存组件
访问过的三个组件都会存在只是分为激活状态和失活状态当重新访问组件进入激活状态时触发 actived 钩子函数失活的触发 deactived 钩子函数。
