温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Vue的keep-alive怎么使用

发布时间:2022-02-25 15:17:11 来源:亿速云 阅读:151 作者:iii 栏目:web开发

这篇文章主要讲解了“Vue的keep-alive怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue的keep-alive怎么使用”吧!

用法

keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 transition 相似,keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素,也不会出现在父组件链中。当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

在 2.2.0 及其更高版本中,activated 和 deactivated 将会在 <keep-alive> 树内的所有嵌套组件中触发。

作用

在组件切换过程中将状态保留在缓存中,防止重复渲染DOM,减少加载时间及性能消耗,优化用户体验。(主要用于保留组件状态或避免重新渲染)

Props

include - 字符串或正则表达式。只有名称匹配的组件会被缓存。

exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。

max - 数字。最多可以缓存多少组件实例。

生命周期钩子

activated

在 keep-alive 组件激活时调用(该钩子函数在服务器端渲染期间不被调用)。

deactivated

在 keep-alive 组件失活时调用(该钩子在服务器端渲染期间不被调用)。

被包含在 keep-alive 中的组件,会多出两个生命周期的钩子:activated 与 deactivated,使用 keep-alive 会将数据保留在缓存中,如果要在每次进入页面的时候获取最新的数据,需要在activated 阶段获取数据(因为被包裹的组件只有在首次渲染才会去执行created、mounted等钩子),承担原来在created、mounted等钩子获取数据的任务。

注意: 只有组件被 keep-alive 包裹时,这两个生命周期函数才会被调用,如果作为正常组件使用,是不会被调用的,以及在 2.1.0 版本之后,使用 exclude 排除之后,就算被包裹在 keep-alive 中,这两个钩子函数依然不会被调用!另外,在服务端渲染时,此钩子函数也不会被调用。

示例

缓存(所有)路由组件

App.vue(未使用keep-alive)

<template>

  <div id="app">

    <div id="nav">

      <div class="main-content">

        <router-link to="/home" active-class="isActive">Home</router-link>

        <span>|</span>

        <router-link to="/about" active-class="isActive">About</router-link>

        <div class="router-view-content">

          <!-- 使用 <router-view> 渲染路径匹配到的视图组件 -->

          <router-view />

        </div>

      </div>

    </div>

  </div>

</template>

<script>

export default {

  name: "App"

};

</script>

路由组件1:Home.vue

<template>

  <div class="home">

    <p>This is a Home page</p>

    <el-input v-model="inputText" placeholder="请输入" style="width:50%"></el-input>

  </div>

</template>

<script>

export default {

  name: "Home",

  data() {

    return {

      inputText: "",

    };

  },

};

</script>

路由组件2:About.vue

<template>

  <div class="about">

    <p>This is an About page</p>

    <el-select v-model="value" placeholder="请选择" style="width: 50%">

      <el-option

        v-for="item in options"

        :key="item.value"

        :label="item.label"

        :value="item.value"

      >

      </el-option>

    </el-select>

  </div>

</template>

<script>

export default {

  name: "About",

  data() {

    return {

      value: "",

      options: [

        {

          value: "zhangsan",

          label: "张三",

        },

        {

          value: "lisi",

          label: "李四",

        },

      ],

    };

  },

};

</script>

在未使用keep-alive情况下,在Home页面输入框输入内容

感谢各位的阅读,以上就是“Vue的keep-alive怎么使用”的内容了,经过本文的学习后,相信大家对Vue的keep-alive怎么使用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI