keep-alive key

<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="./vue.js"></script> </head> <body> <div id="app"> <keep-alive> <child-component key="1" v-if="seen" name="1"></child-component> <child-component key="2" v-if="!seen" name="2"></child-component> </keep-alive> <button @click="toggle">toggle</button> </div> <script type="text/javascript"> Vue.component('child-component', { template: `<input type="text" placeholder="enter">`, data() { return {} }, props: ["name"], mounted() { console.log(`${this.name} mounted`) } }) const vm = new Vue({ el: "#app", data: { seen: true }, methods: { toggle() { this.seen = !this.seen; } } }) </script> </body> </html>

key是标识元素不再被复用，注意key是Vue中的一个保留的属性，不能作为prop传递给子组件，否则会在控制台看到Vue的报错

但是keep-alive标识不重复创建组件实例，也就是只会触发一次created mounted事件，

利用两者可以对组件的复用进行比较精细的管理

来源：https://segmentfault.com/a/1190000016432362

Vue中 key keep-alive的更多相关文章

  1. vue中 key 值的作用

    原文地址 我们知道,vue和react都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面.而隐藏在背后的原理便是其高效的Diff算法. vue和react的虚拟DOM ...

  2. vue中key的作用

    1.v-if中用key管理可复用的元素  Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染.这么做,除了使 Vue 变得非常快之外,还有一些有用的好处.例如,如果你允许用户在不同的 ...

  3. vue中key的作用 v-for里警告 v-if的复用

    vue总是会复用页面上已经存在的dom,区别的方法是加上key就可以,还设有v-for时候的警告也是如此key的作用是区别这条跟那条的.<body> <div id="ap ...

  4. 关于Vue中:key="index"的console警告

    在写vue项目时,浏览器的console出现如下警告信息: [Vue warn]: Property or method "index" is not defined on the ...

  5. 图解vue中 v-for 的 :key 的作用，虚拟dom Diff算法

    其实不只是vue,react中在执行列表渲染时也会要求给每个组件添加上key这个属性. 要解释key的作用,不得不先介绍一下虚拟DOM的Diff算法了. 我们知道,vue和react都实现了一套虚拟D ...

  6. vue中使用key管理可复用的元素

    1.概述 Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染. key解决上述问题之外的情景:这两个元素是完全独立的,不要复用它们. 2.示例 <!DOCTYPE html&g ...

  7. Vue中使用key的作用

    key的作用是为了在diff算法执行时更快的找到对应的节点,提高diff速度 key具有唯一性 vue中循环需加 :key=“唯一标识” ,唯一标识可以使item里面id index 等,因为vue组 ...

  8. Vue中的key到底有什么用？

    key是为Vue中的vnode标记的唯一id,通过这个key,我们的diff操作可以更准确.更快速 diff算法的过程中,先会进行新旧节点的首尾交叉对比,当无法匹配的时候会用新节点的key与旧节点进行 ...

  9. vue中：key 和react 中key={} 的作用，以及ref的特性？

    vue中:key 和react 中key={} 为了给 vue 或者react 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性 一句话概括就是 ...

随机推荐

  1. Garbage First介绍

    本文摘自<构建高性能的大型分布式Java应用>一书,Garbage First简称G1,它的目标是要做到尽量减少GC所导致的应用暂停的时间,让应用达到准实时的效果,同时保持JVM堆空间的利 ...

  2. iOS APP 架构漫谈[转]

      Mark  一下 很不错的文章   最近看了一些有关server的东西,一些很简单的东西,不外乎是一些文档规范,另外结合最近看的wwdc的一些video,觉得对软件架构(software arch ...

  3. Scrapy学习-7-数据存储至数据库

    使用MySQL数据库存储 安装mysql模块包 pip install mysqlclient 相关库文件 sudo apt-get install libmysqlclient-devel sudo ...

  4. hdu4848 求到达每个点总时间最短（sum[d[i]]）。

    开始的时候是暴力dfs+剪枝,怎么也不行.后来参考他人思想: 先求出每个点之间的最短路(这样预处理之后的搜索就可以判重返回了),截肢还是关键:1最优性剪枝(尽量最优:目前的状态+预计还有的最小时间&g ...

  5. LeetCode OJ--Search in Rotated Sorted Array II

    http://oj.leetcode.com/problems/search-in-rotated-sorted-array-ii/ 如果在数组中有重复的元素,则不一定说必定前面或者后面的一半是有序的 ...

  6. 每日记录 2016-4-29 HTML5本地存储

    HTML5本地存储 一.HTML5 localStorage 在HTML5中,本地存储是一个window的属性,包括localStorage和 sessionStorage,从名字应该可以很清楚的辨认 ...

  7. Codeforces 848B Rooter's Song（分类+模拟）

    题目链接 Rooter's Song 题意  有n个舞者站在x轴上或y轴上,每个人有不同的出发时间.x轴上的舞者垂直x轴正方向移动,y轴上的舞者垂直y轴正方向移动. 当x轴的舞者和y轴的舞者相遇时,他 ...

  8. 快速掌握RabbitMQ(四)——两种消费模式和QOS的C#实现

    本篇介绍一下RabbitMQ中的消费模式,在前边的所有栗子中我们采用的消费者都是EventingBasicConsumer,其实RabbitMQ中还有其他两种消费模式:BasicGet和QueueBa ...

  9. Netty入门教程：Netty拆包粘包技术讲解

    Netty编解码技术是什么意思呢?所谓的编解码技术,说白了就是java序列化技术.序列化有两个目的: 1.进行网络传输2.对象持久化 虽然我们可以使用java进行序列化,Netty去传输.但是java ...

  10. Centos7 下的防火墙端口配置

    如果外部不能访问,需要查看防火墙以及服务器的端口安全设置. 防火墙的操作 查看所有打开的端口: firewall-cmd --zone=public --list-ports 添加 firewall- ...