首页vue2 keep-alive

vue2 keep-alive

时间: 2023-07-10 09:11:09 浏览: 136

Vue2 中的 `<keep-alive>` 组件用于缓存组件，避免组件频繁地被销毁和重新创建，以提高页面性能。具体来说，`<keep-alive>` 组件会将其包裹的组件缓存在内存中，当组件被切换时，它会先检查缓存中是否有该组件实例，如果有，则直接从缓存中取出并渲染，否则再创建一个新的实例并缓存起来。使用 `<keep-alive>` 组件的步骤如下： 1. 在根组件中注册 `<keep-alive>` 组件 ``` <template> <div> <keep-alive> <router-view></router-view> </keep-alive> </div> </template> ``` 2. 在需要缓存的组件中设置 `name` 属性 ``` <template> <div> <h2>{{ count }}</h2> <button @click="increment">+1</button> </div> </template> <script> export default { name: 'CachedComponent', data() { return { count: 0, }; }, methods: { increment() { this.count++; }, }, }; </script> ``` 这样，在路由切换时，`CachedComponent` 组件会被缓存起来，下一次再进入该路由时，会直接从缓存中取出并渲染，而不是重新创建。需要注意的是，缓存的组件必须有一个唯一的 `name` 属性，以便 `<keep-alive>` 组件能够识别和缓存它们。

阅读全文