• 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>

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

  • 相关阅读:
    链接收藏:bullet物理引擎不完全指南
    设计模式的六大原则
    链接错误 2038
    玄天宝录
    第二章 期中架构
    第一章 Linux基础
    13 代理与负载均衡基础
    12 LNMP搭建
    11 搭建博客
    10 Nginx模块介绍
  • 原文地址:https://www.cnblogs.com/czh64/p/12073892.html
Copyright © 2020-2023  润新知