1.key 在虚拟dom中 标记不同的结构，for循环中需要添加上

 <body>

     <div id="app">

         <div v-if="flag">

             <span>aaaa</span>

             <input type="text" key="1">

         </div>

         <div v-else>

             <span>bbb</span>

             <input type="text" key="2">

         </div>

     </div>

     <script src="./node_modules/vue/dist/vue.js"></script>

     <script>

         /*

          ①flag 改变虚拟dom 在渲染的时候 发现span 和input 结构都是一样的，只有span的内容不一样，

         所以重新渲染了了span,input没有渲染，想让input重新渲染 只需要添加一个key就可以了

          ② 一般循环添加key的时候不要添加索引，用后台传给前台唯一的id作为key

             原因：假如现在数据逆序后，0--->A 现在变成0---->B，内容改变，元素就会重新渲染

                   但是，如果用id元素只是改变了位置，并不需要重新渲染dom，提高性能

         */

         let vm = new Vue({

             data:{

                 flag:true

             },

             methods:{

             }

         }).$mount("#app");

     </script>

 </body>

vue基础----key的作用的更多相关文章

  1. （转）Vue种key的作用

    https://blog.csdn.net/qq_41861679/article/details/80659278 https://cn.vuejs.org/v2/api/#key 其实不只是vue ...

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

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

  3. vue中key的作用

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

  4. vue基础 ref的作用

    1.  ref 获取dom元素,除了能获取dom元素也能获取组件dom,   组件通信:        在父组件中直接调用ref定义的组件的数据或者方法 <div id="app&qu ...

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

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

  6. Vue中使用key的作用

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

  7. vue中 key 值的作用

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

  8. vue key的作用

    key的作用是什么? 简单来说: key是给每一个vnode的唯一id,可以依靠key,更准确, 更快的拿到oldVnode中对应的vnode节点. 1. 更准确 因为带key就不是就地复用了,在sa ...

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

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

随机推荐

  1. 牛客-Corn Fields

    题目传送门 sol:状压和动规,把每一行的m个01压缩成一个int 状压dp #include "bits/stdc++.h" using namespace std; ; con ...

  2. CF-1144F-Graph Without Long Directed Paths

    题意: 给出一个无向联通图,要求你给出每条边的方向,使得无论从哪个点出发最多只能走一条边: 思路: 对于每个点,要么出度为0,要么入度为0即可.所以这就是一个判断二分图. 二分图 #include & ...

  3. Eclipse创建java web工程

    Eclipse创建java web工程 eclipse版本:eclipse-jee-4.5-win32-x64 tomcat版本:apache-tomcat-7.0.63-windows-x64 jd ...

  4. Nuxt.js 踩坑笔记 - 缓存向

    零.前言 最近参与了一个立足 seo 的移动端项目,公司前端工程主栈 vue,所以理所当然的用上了 nuxt,UI 主要选择了 Vant.   一.公共列表页的缓存 公共列表页由于数据量较大,故需要滚 ...

  5. 吴裕雄--天生自然HTML学习笔记：HTML 元素

    HTML 文档由 HTML 元素定义. HTML 元素 开始标签 * 元素内容 结束标签 * <p> 这是一个段落 </p> <a href="default. ...

  6. MySQL性能优化最佳实践 - 05 MySQL核心参数优化

    back_log参数的作用 指定MySQL可能的TCP/IP的连接数量(一个TCP/IP连接占256k),默认是50.当MySQL主线程在很短的时间内得到非常多的连接请求,该参数就起作用,之后主线程花 ...

  7. 前端学习之路CSS基础学习二

    CSS属性相关 样式操作: (1)width:为元素设置宽度 (2)height:为元素设置高度 ps:块儿级标签才能设置长宽行内标签设置长宽没有任何影响 p{ width: 30px; height ...

  8. 猫头鹰的深夜翻译：核心JAVA并发一

    简介 从创建以来,JAVA就支持核心的并发概念如线程和锁.这篇文章会帮助从事多线程编程的JAVA开发人员理解核心的并发概念以及如何使用它们. (博主将在其中加上自己的理解以及自己想出的例子作为补充) ...

  9. 获取网站title的脚本

    脚本在此 公司的商城需要添加一个脚本,这个脚本就是观察首页页面是否正常,虽然已经配置了zabbix监控网站是否200,但是有一些特殊的情况,比如网页可以打开但是页面是"file not fo ...

  10. 这个黑科技iPhone8会用吗？人体传送密码解开锁屏

    ​ 随着现代化信息技术的发展,人们对信息安全也是愈发关注,数据安全始终是个热点和难点.通过WIFI或者蓝牙进行密码传输确实非常方便,但是它已经不再具备安全保障.因此为了解决信息安全的问题,华盛顿大学的 ...