zoukankan      html  css  js  c++  java
  • vue的keep-alive

    keep-alive是vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM;

    keep-alive包裹动态组件的时候,会缓存不活动的组件实例,而不是销毁他们;

    例如:

    有这样一个页面

    food.vue中

    <template>
        <div>
          <h1>button1页面:</h1>
          food页面,参数:{{$route.params.id}}
        </div>
    </template>
    
    <script>
        export default {
            name: "food",
          created(){
              console.log("food组件被创建")
          },
          mounted() {
              console.log("food组件被加载了")
          },
          destroyed() {
              console.log("food组件被销毁了")
          }
        }
    </script>

    rating.vue中

    <template>
        <div>
          <h1>button2页面:</h1>
          rating页面,参数:{{$route.params.id}}
        </div>
    </template>
    
    <script>
        export default {
            name: "rating",
          created(){
            console.log("rating组件被创建")
          },
          mounted() {
            console.log("rating组件被加载了")
          },
          destroyed() {
            console.log("rating组件被销毁了")
          }
        }
    </script>

    当点击button1时,显示页面1,点击button2时,显示页面2;但是在切换的过程是:

    food组件被创建——>food组件被加载——>(点击button2)——>rating组件被创建——>food组件被销毁——>rating组件被加载了;

    切换不同组件时,会不断销毁,加载;

    当用keep-alive包裹后:

    <keep-alive>
           <router-view></router-view>
    </keep-alive>

     组件被缓存,不会因为加载一个而销毁另一个,无论切换多少次都是图片中的两次创建,两次加载。

  • 相关阅读:
    Android开发——Activity启动模式详解
    Spring核心技术(十一)——基于Java的容器配置(一)
    【数学】控制论
    【Mongo】聚合函数
    【Deeplearning】blog
    【Python】添加注册表信息脚本
    【数据库】备份与恢复
    【MongoDB】数组长度查询
    【Mysql】修改最大连接数
    【Python】多线程2
  • 原文地址:https://www.cnblogs.com/czh64/p/12073892.html
Copyright © 2011-2022 走看看