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. 【二叉树】hdu 1622 Trees on the level

    [题意] 给定一棵树每个结点的权重和路径(路径用LR串表示),输出这棵树的层次遍历 [思路] 注意输入输出,sscanf用来格式化地截取需要的数据,strchr来在字符串中查找字符的位置 [Accep ...

  2. gcc/g++ 编译时出现：“对’xxxx’未定义的引用，collect2: error: ld returned 1 exit status” 的错误

    出现的问题: 在使用 make 编译实现一个程序时,出现了下面的错误.查看程序源文件所在的目录时发现程序已经完成了编译,并生成了 list_repo.o 的文件,说明是在程序链接生成可执行文件时发生了 ...

  3. 标准C程序设计七---27

    Linux应用             编程深入            语言编程 标准C程序设计七---经典C11程序设计    以下内容为阅读:    <标准C程序设计>(第7版) 作者 ...

  4. 你需要的130个vim命令

    参考文章:http://www.oschina.net/news/43167/130-essential-vim-commands,其中有些我以为需要补充的及时补充或修改 从 1970 年开始,vi ...

  5. objective-c中#import和@class的区别

    在Objective-C中,可以使用#import和@class来引用别的类型, 但是你知道两者有什么区别吗? @class叫做forward-class,  你经常会在头文件的定义中看到通过@cla ...

  6. codeforces 1041 e 构造

    Codeforces 1041 E 构造题. 给出一种操作,对于一棵树,去掉它的一条边.那么这颗树被分成两个部分,两个部分的分别的最大值就是这次操作的答案. 现在给出一棵树所有操作的结果,问能不能构造 ...

  7. 关于css虚线

    今天遇到几个虚线效果,不能一下子反应过来具体属性. 一.dashed和dotted的区别 首先是dashed和dotted都是指“虚线”,但是两者显示的效果不尽相同. 从字面意思来看, dashed: ...

  8. 升级python2至python3解决依赖关系

    1.最小化安装centos7,在升级python3的时候会出现很多包未安装,为解决依赖关系: yum -y install gcc gcc-c++ zlib zlib-devel libffi-dev ...

  9. CS Academy #32 G

    题意: 分析: 考虑如何求方案数 dp[i][j]表示i个数字的和为j的方案数,这是个经典问题,转移有两种,一个是填一个数字1,一个是整体加1 然后这个问题并不是求方案数,而是求对应的权值和 我们很容 ...

  10. Java中的网络基础

    先来一张图记录一下大概思路,之后再更新具体的代码实现.基本上来说,前半部分自己会编写一个基于socket编程的多客户端dos聊天服务器,后半部分可以实现与已有的一些服务器(比如www.google.c ...