电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

vue中keep-alive內置組件緩存的實例代碼

瀏覽:3日期:2023-01-26 15:45:22

需求:home 組件中有一個 name 的 data 數據。這個數據修改之后,再切換到其他的組件。再切換到 home 組件,希望 home 中 name 這個值是之前修改過的值。希望組件有緩存。keep-alive 的使用方式:將要緩存的組件使用 keep-alive 包裹住即可。keep-alive優點的介紹:1. 切換組件時,當前組件不會觸發銷毀的生命周期鉤子。也就是說不會銷毀了。2. 切換回來時,也不會重新創建。(既然都沒有被銷毀,哪里來的重新創建呢)3. 會多出兩個生命周期的鉤子函數a. activated 緩存激活 第一次會觸發、組件能被看到一般根 created 做一樣的事情:請求數據b.deactivated 緩存失活 組件不能被看到一般根 beforeDestroy 做一樣的事情: 清除定時器、移除全局事件監聽4. 可以在 vue devtools 上看見組件的緩存情況** keep-alive 的更多屬性設置**1. include 包含a. include=“組件1,組件2” 注意 逗號前后不要有空格b. :include='[組件1, 組件2]'c. :include='/^hello/'2. exclude 排除a. exclude=“組件1,組件2” 注意 逗號前后不要有空格b. :exclude='[組件1, 組件2]'c. :exclude='/^hello/'3. max 規定最大能緩存組件的數量,默認是沒有限制的假定緩存隊列是 [home, list]現在進入about的時候 about 也會被緩存上,這時會將之前的第一個給排出去 [home, list, about] => [list, about] 先進先出原則。

概念就這些上代碼

1.vue鏈接:https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js2.創建組件。(三個組件)

//組件一 Vue.component('home', { data() { return { name: '張三', }; }, template: ` <div> <h1>home</h1> <p>{{ name }}</p> <button @click='name = ’李四’'>修改name為 李四</button> </div> `, //實例創建完成的時候打印 created() { console.log('home created'); }, //實例銷毀前的打印 beforeDestroy() { console.log('home beforeDestroy'); }, //激活緩存的時候打印組件能被看到 activated() { console.log('home activated'); }, //緩存失活時打印 組件不能被看到 deactivated() { console.log('home deactivated'); }, }); //組件二 Vue.component('list', { template: ` <div> <h1>list</h1> </div> `,//激活緩存的時候打印組件能被看到 created() { console.log('list created'); },//緩存失活時打印 組件不能被看到 beforeDestroy() { console.log('list beforeDestroy'); }, });//組件三Vue.component('about', { template: ` <div> <h1>about</h1> </div> `,//激活緩存的時候打印組件能被看到 created() { console.log('about created'); },//緩存失活時打印 組件不能被看到 beforeDestroy() { console.log('about beforeDestroy'); }, });

3.創建實例。

Vue.component('home', { data() { return { name: '張三', }; },

body部分

<div id='app'> //active是樣式來做高亮用v-bind來綁定 //@click自定義事件將實例里的數據改為home //點擊的時候會觸發component內置標簽更換為home <button : @click='curPage = ’home’'> home </button> <button : @click='curPage = ’list’'> list </button> <button : @click='curPage = ’about’' > about </button> <hr /> //用keep-alive內置組件包裹componet內置組件v-bind綁定max作用是最多緩存兩個 <keep-alive :max='2'> <component :is='curPage'></component> </keep-alive> //方法二 //排除法排除了about只有home與list可以緩存 //<keep-alive exclude='about'> // <component :is='curPage'></component> //</keep-alive> //方法三 //選擇緩存法只有home與list可以被緩存 //keep-alive include='home,list'> //<component :is='curPage'></component> //</keep-alive> </div>

三種方法的具體用法在文章的開始的時候有介紹

總結

到此這篇關于vue中keep-alive內置組件緩存的實例代碼的文章就介紹到這了,更多相關vue keep-alive內置組件緩存內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網!

標簽: Vue
相關文章:
主站蜘蛛池模板: 深圳善跑体育产业集团有限公司_塑胶跑道_人造草坪_运动木地板 | 滁州高低温冲击试验箱厂家_安徽高低温试验箱价格|安徽希尔伯特 | 睿婕轻钢别墅_钢结构别墅_厂家设计施工报价 | 考勤系统_考勤管理系统_网络考勤软件_政企|集团|工厂复杂考勤工时统计排班管理系统_天时考勤 | 模具ERP_模具管理系统_模具mes_模具进度管理_东莞市精纬软件有限公司 | 广东燎了网络科技有限公司官网-网站建设-珠海网络推广-高端营销型外贸网站建设-珠海专业h5建站公司「了了网」 | 私人别墅家庭影院系统_家庭影院音响_家庭影院装修设计公司-邦牛影音 | FFU_空气初效|中效|高效过滤器_空调过滤网-广州梓净净化设备有限公司 | 恒压供水控制柜|无负压|一体化泵站控制柜|PLC远程调试|MCGS触摸屏|自动控制方案-联致自控设备 | 304不锈钢无缝管_不锈钢管厂家 - 隆达钢业集团有限公司 | 衬氟止回阀_衬氟闸阀_衬氟三通球阀_衬四氟阀门_衬氟阀门厂-浙江利尔多阀门有限公司 | 刘秘书_你身边专业的工作范文写作小秘书| 深圳3D打印服务-3D打印加工-手板模型加工厂-悟空打印坊 | PC构件-PC预制构件-构件设计-建筑预制构件-PC构件厂-锦萧新材料科技(浙江)股份有限公司 | 天津力值检测-天津管道检测-天津天诚工程检测技术有限公司 | 缠绕机|缠绕膜包装机|缠绕包装机-上海晏陵智能设备有限公司 | 免联考国际MBA_在职MBA报考条件/科目/排名-MBA信息网 | 间苯二酚,间苯二酚厂家-淄博双和化工 | 无轨电动平车_轨道平车_蓄电池电动平车★尽在新乡百特智能转运设备有限公司 | 精密机械零件加工_CNC加工_精密加工_数控车床加工_精密机械加工_机械零部件加工厂 | 食品机械专用传感器-落料放大器-低价接近开关-菲德自控技术(天津)有限公司 | 鲁尔圆锥接头多功能测试仪-留置针测试仪-上海威夏环保科技有限公司 | 臭氧灭菌箱-油桶加热箱-原料桶加热融化烘箱-南京腾阳干燥设备厂 臭氧发生器_臭氧消毒机 - 【同林品牌 实力厂家】 | 山东石英砂过滤器,除氟过滤器「价格低」-淄博胜达水处理 | 汽车润滑油厂家-机油/润滑油代理-高性能机油-领驰慧润滑科技(河北)有限公司 | 双齿辊破碎机-大型狼牙破碎机视频-对辊破碎机价格/型号图片-金联机械设备生产厂家 | 中图网(原中国图书网):网上书店,尾货特色书店,30万种特价书低至2折! | 中式装修设计_室内中式装修_【云臻轩】中式设计机构 | 广州中央空调回收,二手中央空调回收,旧空调回收,制冷设备回收,冷气机组回收公司-广州益夫制冷设备回收公司 | 塑料托盘厂家直销-吹塑托盘生产厂家-力库塑业【官网】 | 柴油机_柴油发电机_厂家_品牌-江苏卡得城仕发动机有限公司 | 称重传感器,测力传感器,拉压力传感器,压力变送器,扭矩传感器,南京凯基特电气有限公司 | 【北京写字楼出租_写字楼租赁_办公室出租网/出售】-远行地产官网 | 钢化玻璃膜|手机钢化膜|钢化膜厂家|手机保护膜-【东莞市大象电子科技有限公司】 | 玉米深加工设备-玉米深加工机械-新型玉米工机械生产厂家-河南粮院机械制造有限公司 | 同学聚会纪念册制作_毕业相册制作-成都顺时针宣传画册设计公司 | 工业制氮机_psa制氮机厂家-宏骁智能装备科技江苏有限公司 | 上海平衡机-单面卧式动平衡机-万向节动平衡机-圈带动平衡机厂家-上海申岢动平衡机制造有限公司 | 快速卷帘门_硬质快速卷帘门-西朗门业 | 微学堂-电动能源汽车评测_电动车性能分享网 | 东莞螺丝|东莞螺丝厂|东莞不锈钢螺丝|东莞组合螺丝|东莞精密螺丝厂家-东莞利浩五金专业紧固件厂家 |