Special Attributes

包括以下:key ref slot v-*

key

https://vuejs.org/v2/api/#key

The key special attribute is primarily used as a hint for Vue’s virtual DOM algorithm to identify VNodes when diffing the new list of nodes against the old list. Without keys, Vue uses an algorithm that minimizes element movement and tries to patch/reuse elements of the same type in-place as much as possible. With keys, it will reorder elements based on the order change of keys, and elements with keys that are no longer present will always be removed/destroyed.

Children of the same common parent must have unique keys. Duplicate keys will cause render errors.

源码

src/compiler/parser/index.js

function processKey (el) {const exp = getBindingAttr(el, 'key')if (exp) {if (process.env.NODE_ENV !== 'production' && el.tag === 'template') {warn(`<template> cannot be keyed. Place the key on real elements instead.`)}el.key = exp}
}
parseHTML(template, {warn,expectHTML: options.expectHTML,isUnaryTag: options.isUnaryTag,shouldDecodeNewlines: options.shouldDecodeNewlines,start (tag, attrs, unary) {...if (inVPre) {processRawAttrs(element)} else {processFor(element)processIf(element)processOnce(element)processKey(element)// determine whether this is a plain element after// removing structural attributeselement.plain = !element.key && !attrs.lengthprocessRef(element)processSlot(element)processComponent(element)for (let i = 0; i < transforms.length; i++) {transforms[i](element, options)}processAttrs(element)}...}
)

如何获取key

{mounted() {const key = this.vnode.key}
}

Vue 源码阅读(三)Special Attributes相关推荐

  1. Vue 源码阅读学习(三)

    第三节:函数柯里化与渲染模型 嘿,朋友们,本节是 Vue 源码阅读的第三讲.Vue 源码阅读系列得到了赞赏,我很高兴,同时希望大家可以给予反馈!我虚心接纳您的意见! 如果没有看之前的第一讲和第二讲的内 ...

  2. mybatis源码阅读(三):mybatis初始化(下)mapper解析

    转载自 mybatis源码阅读(三):mybatis初始化(下)mapper解析 MyBatis 的真正强大在于它的映射语句,也是它的魔力所在.由于它的异常强大,映射器的 XML 文件就显得相对简单. ...

  3. 24 UsageEnvironment使用环境抽象基类——Live555源码阅读(三)UsageEnvironment

    24 UsageEnvironment使用环境抽象基类--Live555源码阅读(三)UsageEnvironment 24 UsageEnvironment使用环境抽象基类--Live555源码阅读 ...

  4. 【Vue原理】Vue源码阅读总结大会 - 序

    [Vue原理]Vue源码阅读总结大会 - 序 阅读源码准备了什么 1.掌握 Vue 所有API 2.JavaScript 扎实基础 3.看完 JavaScript 设计模式 4.学会调试 Vue 源码 ...

  5. 【Vue原理】Vue源码阅读总结大会

    专注 Vue 源码分享,为了方便大家理解,分为了白话版和 源码版,白话版可以轻松理解工作原理和设计思想,源码版可以更清楚内部操作和 Vue的美,喜欢我就关注我的公众号,好吧兄弟,不会让你失望的 阅读源 ...

  6. Vue源码阅读(12):解析器

    今天聊聊解析器,解析器的作用是将程序员编写的模板字符串解析成抽象语法树,抽象语法树可以理解成模板字符串的对象表示形式,其本质并没有什么神奇的,只不过是 JS 中最为常见的对象字面量. 通过抽象语法树, ...

  7. 推荐一本Vue源码阅读书籍《Vue.js技术内.幕》

    1. 概述 这幅图大家应该都很清楚: 但这个过程在Vue框架中是如何实现的呢? 是否考虑过如果是自己,该如何设计呢?而这本<Vue.js技术内幕>就是一本非常好的关于Vue框架源码学习的书 ...

  8. Vue源码阅读一:说说vue.nextTick实现

    用法: 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 疑惑: 怎么实现的延迟回调 原理: JavaScript语言的一大特点就是单线程,同一个时 ...

  9. SDWebImage源码阅读(三)UIImage+GIF

    UIImage+GIF 是UIImage 类的一个GIF 分类,在之前的版本里面这个分类是用了处理GIF 动态图片的但是会有内存暴增的bug.在当前 '4.0.0-beta2' 的版本里GIF 动态图 ...

最新文章

  1. C#调用非托管代码找不到入口点解决办法
  2. ARM入门笔记(9)
  3. Firefox无法加载12306自家证书
  4. 函数-模块化程序设计
  5. 对比学习可以使用梯度累积吗?
  6. linux adb工具_这是一个可以显示Linux命令的工具
  7. echarts饼状图mysql_echarts饼状图位置设置
  8. matlab几种循环,Matlab for 多个变量循环能不能这样啊 ,求教高手!!!!
  9. pthread_cond_t
  10. sharepoint数据库连接
  11. 哪些深度相机有python接口_用树莓派和YOLO打造一个深度学习照相机
  12. 重新想象 Windows 8.1 Store Apps (91) - 后台任务的新特性: 下载和上传的新特性, 程序启动前预下载网络资源, 后台任务的其它新特性...
  13. SaaS软件服务优点全解析
  14. C语言学习——bsmap-2.74_main.cpp
  15. (人脸)目标检测指标-FDDB
  16. Java中SpringBoot项目集成Easy版支付宝支付
  17. 钉钉机器人关键字自动回复_【原创新软件】办公引流机器人个人微信企业微信QQ通用的自动回复,群发助手...
  18. linux 命令修改uid,修改Linux用户的UID、GID
  19. 怎么安装redhat linux操作系统,Linux操作系统RedHat6.5安装
  20. 数据库sql课后总结

热门文章

  1. 远程服务器端口怎么修改,如何修改远程服务器端口号
  2. python接收输入的一行字符只统计数字的个数,Python(统计字符),python实例,输入一行字符,分别统计出其中英文字母、空格、数字和其它字符的个数...
  3. 鸿蒙就是安卓换皮_被喷换皮安卓?华为手机鸿蒙OS Beta版今日上线
  4. 功率曲线k值_分布式光伏:如何用“小时功率曲线”估算自用容量比例
  5. Mybatis入门:3(动态sql)
  6. 【java】兴唐第二十四节课
  7. 数据库表(字段类型、约束、截断表、修改表字段、重命名表)
  8. 加载服务器版本信息,传奇服务器端启动加载错误的解决方法
  9. 三极管在ad中的原理图库_555时基电路内部结构及其工作原理
  10. 微信小程序多项选择器_微信小程序三级联动之多列选择器