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. URI和URL对比

    URL是Uniform Resoure Locator(统一资源定位器)的缩写.就是WWW页的地址. 其URL地址格式排列为:scheme://host:Port/path --Internet资源类 ...

  2. JavaScript设计模式一：工厂模式和构造器模式

    转自:http://segmentfault.com/a/1190000002525792 什么是模式 前阵子准备期末考试,挺累也挺忙的,实在闲不得空来更新文章,今天和大家说说javascript中的 ...

  3. [洛谷P4299] 首都

    题目传送门 还是维护子树信息. 但是这里多了一个找重心的操作. 这里有一个关于树重心的结论,据说可以用反证法证明.反正我不会证 就是:新的重心一定在原来两个重心之间的那条树链上. 这样我们逐步缩小搜索 ...

  4. HexoC++第04课 构造析构.md

    C++第04课 构造析构.mdhtml {overflow-x: initial !important;}#write, body { height: auto; } #write, #write h ...

  5. Vacant Seat（Atcoder-C-交互式题目）

    C - Vacant Seat Time limit : 2sec / Memory limit : 256MB Score : 500 points Problem Statement This i ...

  6. Hexo+Git一个小时快速搭建个人博客

    搭建本地环境:Hexo框架 Hexo为何物 Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用Markdown解析文章,并瞬间利用靓丽的主题生成静态网页.其中,Markdown是一个用于将普通 ...

  7. Vue1.0用法详解

    Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能实现的 ECMAScript 5 特性. 开发环境部署 可参考使用 vue+webpack. 基本用法 1 2 3 ...

  8. 从VR泛滥到倒闭看热门投机的山寨创业心态

    相对国外来说,国人的从众心理非常严重.无数的段子和"名人名言"都在反复向我们传递出一个信息:国人在做事的时候,总是随大流,趋向热点.而从行业角度来看,结果就会造成行业中良莠不齐.鱼 ...

  9. Tian Tian 菾菾 导游 陪同

    自画像系列是梵高的代表作之一,他是一位自学成才的画家,下笔完全自由,主观提取了当时印象派画家学到的技巧,在这幅画中,我们可以看到,颜色在画中的堆叠,色彩与笔在画中表现的形态,都表现出,梵高在他作画中内 ...

  10. 【快速上手】Git的使用教程

    创建Git仓库 git init 查看当前仓库情况 git status 添加修改 git add (file) or git add . 查看未提交的修改 git diff 撤销提交操作 git r ...