vue 之 key
key 的特殊属性主要用在 Vue的虚拟DOM算法,在新旧nodes对比时辨识VNodes。如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用key,它会基于key的变化重新排列元素顺序,并且会移除key不存在的元素。
有相同父元素的子元素必须有独特的key。重复的key会造成渲染错误。
最常见的用例是结合 v-for:
<ul>
<li v-for="item in items" :key="item.id">...</li>
</ul>
它也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用:
完整地触发组件的生命周期钩子
触发过渡
<transition>
<span :key="text">{{ text }}</span>
</transition>
当 text 发生改变时,<span> 会随时被更新,因此会触发过渡。
vue 之 key的更多相关文章
- (转)Vue种key的作用
https://blog.csdn.net/qq_41861679/article/details/80659278 https://cn.vuejs.org/v2/api/#key 其实不只是vue ...
- vue中key的作用 v-for里警告 v-if的复用
vue总是会复用页面上已经存在的dom,区别的方法是加上key就可以,还设有v-for时候的警告也是如此key的作用是区别这条跟那条的.<body> <div id="ap ...
- Vue: 用 key 管理可复用的元素
<div id="login"> <template v-if="loginType === 'username'"> <labe ...
- 关于Vue中:key="index"的console警告
在写vue项目时,浏览器的console出现如下警告信息: [Vue warn]: Property or method "index" is not defined on the ...
- Vue中 key keep-alive
keep-alive key <!DOCTYPE html> <html> <head> <title></title> <scrip ...
- vue 使用key唯一令牌解决表单值混乱
vue在渲染元素时,出于效率考虑,会尽可能地复用已有元素的而非重新渲染,如果你不希望这样可以使用Vue中提供的key属性,它可以让你决定是否要复用元素,key值必须是唯一的 代码: <!doct ...
- VUE router-view key 属性解释
router-view 作用, 你可以 router-view 当做是一个容器,它渲染的组件是你使用 vue-router 指定的. <template> <section clas ...
- Vue的Key属性,v-for和v-if,v-if/v-show,v-pre不渲染,v-once只渲染一次
key属性为什么要加 key -- api 解释 key的特殊属性主要用在vue的虚拟dom算法,如果不适用key,vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法. ...
- vue中 key 值的作用
原文地址 我们知道,vue和react都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面.而隐藏在背后的原理便是其高效的Diff算法. vue和react的虚拟DOM ...
随机推荐
- python-day97--django-ModelForm
Model Form :直接利用你的models里的字段 应用场景: - ModelForm - 中小型应用程序(model是你自己写的) - Form - 大型应用程序 注意事项: - 1. 类 f ...
- json字符串转Map、json数组
json数组转map public static void main(String[] args){ String strArr = "[{\"0\":\"zh ...
- POJ2393奶酪工厂
Yogurt factory Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 14771 Accepted: 7437 D ...
- 自定义putty主题
PuTTY很早之前就没有更新了(0.62),因为都是开源的所以有人branch出来做了增强,如这个PuTTY tray,增加了超链等功能: https://puttytray.goeswhere.co ...
- python3+pyshark读取wireshark数据包并追踪telnet数据流
一.程序说明 本程序有两个要点,第一个要点是读取wireshark数据包(当然也可以从网卡直接捕获改个函数就行),这个使用pyshark实现.pyshark是tshark的一个python封装,至于t ...
- java基础语法运算符
1.1 算数运算符++.--的使用 在一般情况下,算数运算符不会改变参与计算的变量值.而是在原有变量值不变的情况下,计算出新的值.但是有些操作符会改变参与计算的变量的值, ...
- vue cli搭建的vue项目 不小心开了eslint 一直报黄色的警告
报错必须处理,警告也忍不了,发现在bulid -webpack.base.config.js 里找到 const createLintingRule = () => ({ /*test: /\. ...
- mac nginx+php-fpm配置(安装过后nginx后访问php文件下载,访问php文件请求200显示空白页面)
访问php文件下载是因为没配置php-fpm 两个问题主要都是nginx.conf配置的问题: /usr/local/etc/nginx/nginx.conf server { listen 8 ...
- MakeFile中export的使用
在shell中,可以使用export修改当前进程的环境变量. 例如:export PATH=.:$PATH 将当前路径加入可执行文件查找路径(PATH)中,这样你就不要敲“./excutable” 来 ...
- Mac上搭建nginx教程
1.安装Homebrew ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/in ...