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. 【2017.12.18】Dijkstra专题

    先友情提示一下,作者很早就会这个算法了,只不过这么久以来没怎么写过博客.现在正在学习它的拓展,干脆就把这个算法相关的内容整个敲一遍吧!本章把迪杰斯特拉从基础到拓展全都说一遍咯. 下面是优先队列(堆)优 ...

  2. C Looooops（poj 2115）

    大致题意: 对于C的for(i=A ; i!=B ;i +=C)循环语句,问在k位存储系统中循环几次才会结束. 若在有限次内结束,则输出循环次数. 否则输出死循环. 解题思路: 题意不难理解,只是利用 ...

  3. Tarjan 算法 自学整理

    算法介绍 如果两个顶点可以相互通达,则称两个顶点强连通(strongly connected).如果有向图G的每两个顶点都强连通,称G是一个强连通图.非强连通图有向图的极大强连通子图,称为强连通分量( ...

  4. 【BZOJ2002】弹飞绵羊（LCT）

    题意:给定一棵树,要求维护以下操作: 1.删除连接(x,y)的边 2.将(x,y)之间连边 3.询问某点子树大小 对于100%的数据n<=200000,m<=100000 思路:第一道有加 ...

  5. html-Span 指定宽度

    html-Span 指定宽度 css: span{ display:-moz-inline-box; display:inline-block; width:150px; } 链接:如何设置HTML ...

  6. Bayan 2015 Contest Warm Up D. CGCDSSQ （math，pair，map，暴力）

    哎,只能转题解了,,, 8165031                 2014-10-10 15:53:42     njczy2010     D - CGCDSSQ             GN ...

  7. 使用<sstream> 替代<stdio.h>

    c++ 字符串流 sstream(常用于格式转换)   使用stringstream对象简化类型转换C++标准库中的<sstream>提供了比ANSI C的<stdio.h>更 ...

  8. T1077 多源最短路 codevs

    http://codevs.cn/problem/1077/ 时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题目描述 Description 已知n个点(n&l ...

  9. codeforces edu40

    H(dp计数) 题意: 有一颗树,最深的点的深度是n,每个深度为i的点都有ai个孩子. 对于1<=k<=2n-2,回答树上有多少点对之间的距离是k,答案对1e9+7取模 n<=500 ...

  10. seo优化入门教程：认识搜索引擎

    对于从来没有学过seo或者零基础的人来说,搜索引擎可能都不太了解.所以我们先来认识搜索引擎有哪些,同时为什么我们要学习搜索引擎优化. 从目前全球的一个搜索引擎来说的话,他的分支是非常多的,甚至可以讲, ...