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

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

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

瀏覽:2日期: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
相關文章:
主站蜘蛛池模板: UV-1800紫外光度计-紫外可见光度计厂家-翱艺仪器(上海)有限公司 | 花纹铝板,合金铝卷板,阴极铝板-济南恒诚铝业有限公司 | 宝元数控系统|对刀仪厂家|东莞机器人控制系统|东莞安川伺服-【鑫天驰智能科技】 | 定坤静电科技静电消除器厂家-除静电设备| 招商帮-一站式网络营销服务|搜索营销推广|信息流推广|短视视频营销推广|互联网整合营销|网络推广代运营|招商帮企业招商好帮手 | 专业广州网站建设,微信小程序开发,一物一码和NFC应用开发、物联网、外贸商城、定制系统和APP开发【致茂网络】 | 膏剂灌装旋盖机-眼药水灌装生产线-西林瓶粉剂分装机-南通博琅机械科技 | 不锈钢轴流风机,不锈钢电机-许昌光维防爆电机有限公司(原许昌光维特种电机技术有限公司) | 西门子伺服控制器维修-伺服驱动放大器-828D数控机床维修-上海涌迪 | 美甲贴片-指甲贴片-穿戴美甲-假指甲厂家--薇丝黛拉 | 篮球地板厂家_舞台木地板品牌_体育运动地板厂家_凯洁地板 | 包装机传感器-搅拌站传感器-山东称重传感器厂家-济南泰钦电气 | 消泡剂_水处理消泡剂_切削液消泡剂_涂料消泡剂_有机硅消泡剂_广州中万新材料生产厂家 | 双杰天平-国产双杰电子天平-美国双杰-常熟双杰仪器 | 企典软件一站式企业管理平台,可私有、本地化部署!在线CRM客户关系管理系统|移动办公OA管理系统|HR人事管理系统|人力 | 不锈钢螺丝,不锈钢螺栓,不锈钢标准件-江苏百德特种合金有限公司 交变/复合盐雾试验箱-高低温冲击试验箱_安奈设备产品供应杭州/江苏南京/安徽马鞍山合肥等全国各地 | 盘式曝气器-微孔曝气器-管式曝气器-曝气盘-斜管填料 | 郑州市前程水处理有限公司 | SOUNDWELL 编码器|电位器|旋转编码器|可调电位器|编码开关厂家-广东升威电子制品有限公司 | 新能源汽车电池软连接,铜铝复合膜柔性连接,电力母排-容发智能科技(无锡)有限公司 | 广东泵阀展|阀门展-广东国际泵管阀展览会| Brotu | 关注AI,Web3.0,VR/AR,GPT,元宇宙区块链数字产业 | 定硫仪,量热仪,工业分析仪,马弗炉,煤炭化验设备厂家,煤质化验仪器,焦炭化验设备鹤壁大德煤质工业分析仪,氟氯测定仪 | 谷歌关键词优化-外贸网站优化-Google SEO小语种推广-思亿欧外贸快车 | SMN-1/SMN-A ABB抽屉开关柜触头夹紧力检测仪-SMN-B/SMN-C-上海徐吉 | 聚合氯化铝厂家-聚合氯化铝铁价格-河南洁康环保科技 | 酒水灌装机-白酒灌装机-酒精果酒酱油醋灌装设备_青州惠联灌装机械 | 精密钢管,冷拔精密无缝钢管,精密钢管厂,精密钢管制造厂家,精密钢管生产厂家,山东精密钢管厂家 | 多功能三相相位伏安表-变压器短路阻抗测试仪-上海妙定电气 | 潍坊大集网-潍坊信息港-潍坊信息网 | 包装机传感器-搅拌站传感器-山东称重传感器厂家-济南泰钦电气 | 碳化硅,氮化硅,冰晶石,绢云母,氟化铝,白刚玉,棕刚玉,石墨,铝粉,铁粉,金属硅粉,金属铝粉,氧化铝粉,硅微粉,蓝晶石,红柱石,莫来石,粉煤灰,三聚磷酸钠,六偏磷酸钠,硫酸镁-皓泉新材料 | 电脑知识|软件|系统|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网 | 微学堂-电动能源汽车评测_电动车性能分享网 | 北京森语科技有限公司-模型制作专家-展览展示-沙盘模型设计制作-多媒体模型软硬件开发-三维地理信息交互沙盘 | 钢格板|镀锌钢格板|热镀锌钢格板|格栅板|钢格板|钢格栅板|热浸锌钢格板|平台钢格板|镀锌钢格栅板|热镀锌钢格栅板|平台钢格栅板|不锈钢钢格栅板 - 专业钢格板厂家 | 高铝砖-高铝耐火球-高铝耐火砖生产厂家-价格【荣盛耐材】 | 小程序开发公司_APP开发多少钱_软件开发定制_微信小程序制作_客户销售管理软件-济南小溪畅流网络科技有限公司 | 承插管件_不锈钢承插管件_锻钢高压管件-温州科正阀门管件有限公司 | 减速机_上海宜嘉减速机| 单锥双螺旋混合机_双螺旋锥形混合机-无锡新洋设备科技有限公司 | 北京工业设计公司-产品外观设计-产品设计公司-千策良品工业设计 北京翻译公司-专业合同翻译-医学标书翻译收费标准-慕迪灵 |