vue 对key属性的解析

爱学习小㿟

已于 2022-10-17 14:48:57 修改

阅读量519

点赞数

文章标签： vue.js 前端 javascript

于 2022-10-15 10:42:48 首次发布

本文链接：https://blog.csdn.net/weixin_46472711/article/details/127331947

版权

key是什么？

当我们在使用v-for时，需要给单元加上key.

key的作用是什么呢?

官方文档中说：

当 Vue.js 用v-for正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

接下来我们用一张图来说明一下

vue会根据初始数据生成一个虚拟DOM，并将虚拟DOM生成真实DOM渲染到页面，当我们插入新数据时，vue会根据key的属性值来比对新旧虚拟DOM，

张三和老刘的key值相同，input标签也相同，只有内容不同，vue只会修改内容，其余部分直接复用

初识数据

添加老刘后的数据

此时我们发现input框数据发生错乱，因为虚拟DOM中是看不到input的内容是什么的，vue只会帮我们比对标签.因此key的值一定要赋给一个能唯一标识这个数据的属性

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

爱学习小㿟

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 对key属性的解析

对key属性的解析
复制链接

扫一扫

vue 用key拿对象value_带你了解 vue-next（Vue 3.0）之初入茅庐【实践】

weixin_35886717的博客

12-30

645

作者：大转转FE转发链接：https://mp.weixin.qq.com/s/gZVn9eDruyv7G_UJFTPuGQ前言这几天，陆续学习了解了关于vue-next(Vue 3.0)(https://github.com/vuejs/vue-next)的一些新特性，尤其是新的 CompositionAPI的用法。这套新的API中最重要、最核心的部分，恐怕就是实现响应式功能的这一块了。而且，这...

关于实现Vue中对json数据进行查询

qq_63201883的博客

05-13

2662

最近在学Vue和javascript感觉js的好多方法都不太清楚，找了个朋友的代码，做一下模糊查询，在这里记录一下。

参与评论您还未登录，请先登录后发表或查看评论

【vue】对象根据key获取value以及根据value获取key

热门推荐

weixin_45785873的博客

01-13

2万+

准备数据 data(){ return { obj:{ '001':'a', '002':'b', '003':'c', '004':'d' } } }, 1、遍历对象获取所有的key和value for (let k in this.obj){ console.log(k

vue render函数_vue-toy: 200行代码模拟Vue实现

weixin_39854778的博客

11-20

108

200行左右代码模拟vue实现，视图渲染部分使用React来代替Snabbdom，欢迎Star。项目地址：https://github.com/bplok20010/vue-toycodesandbox示例已实现的参数:interface Options { el: HTMLElement | string; propsData?: Record<string, any&g...

vue 用key拿对象value_vue 中的key 的用法

weixin_39530288的博客

12-19

593

(Emitted value instead of an instance of Error) : component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info.我们有的时候会在npm run dev的时候发现会出现这样...

vue 用key拿对象value_利用 WeakMap 对 Vue 新建数组中的对象赋予 :key

weixin_39771987的博客

12-19

240

需求在 Vue 中，对组件进行循环都需要加入key以便“就地复用”，可是在某些情况下，我们需要新建多个对象，而这些对象不是从后端获取到的，而是前端生成的，没有唯一值，且 Vue 目前版本只允许字符串，数字作为组件的 key。方案简单的组件例如exportdefault{methods:{addSometing(){this.items.push({...

详解如何理解vue的key属性

12-29

如果没有这个属性的时候vue应用 in-place patch（就地复用）策略。列表里的顺序发生改变的时候比如shuffle（列表打乱）的时候，vue为了提升性能，不会移动dom元素，只是更新相应元素的内容节点。就地复用的弊端这...

对VUE中的对象添加属性

12-11

背景：在通过接口获取数据集对象后，根据业务场景需要在数据集对象上增加额外的属性 data中定义的数据集对象mindData格式示例如下 mindData: [ {label:'清醒',value:'清醒'}, {label:'朦胧',value:'朦胧'}, {label:...

vue源码解析.zip

05-13

vue源码解析

vue对象如何传变量进行取值

zxh7770的博客

04-25

3280

vue对象如何传变量进行取值阐述在开发的过程中，在使用key取值的时候，key 不一定要是一个固定的，也有可能是一个变量。案例代码如下： let key1 = 'name'; let objectList = { 'id': '1', [key1]: '李四' }; console.log(objectList['id']) // "1" console.log(objectList[key1]) // "李四" console.log(objectList.id) // '1' 根据k

基于vue–key值的特殊用处详解

11-19

数组的v-for item in items item of items item,index in items (item，index) in items 对象的v-for（键值，键名，索引） value in object (value, key) in object (value, key, index) in object v-for渲染的列表的结构采用“就地复用”的策略，也就说当数据重新排列数据时，会复用已在页面渲染好的元素，不会移动 DOM 元素来匹配数据项的顺序，这种模式是高效的，改变现有位置的结构的数据即可 eg：问题：点击翻转数组哦，高亮并没有跟随1 在最后，而是直

【学习前端第六十五课】vue框架中的key详解

最新发布

weixin_65729202的博客

01-21

949

我们的内部状态使用索引作为key，所以在变化之前，vue记住key为1的这一项是勾选的，然后下次再重新渲染的时候，vue记住的状态是索引值1，所以渲染出来的结果也就是勾选的key值为1的哪一项，但是实际渲染index对应的数据已经改变了。它在执行对比的时候，发现每个key都改变了，它就又重新渲染了4个，但是本来应该就渲染1个就够了，也就是说上面的代码极大的消耗了浏览器性能，所以如果要执行的是动态渲染，我们不推荐使用index作为key。这就是一个静态渲染，因为stuList数组在后面的操作种不会发生变化。

vue如何解析后台传回的文件流

qq_43610311的博客

11-27

1526

vue处理文件流

vue取通过key取value_实现一个简易的vue：响应式

weixin_39709674的博客

12-30

1244

使用vue时，在修改数据data的时候vue能自动更新视图，抱着这点好奇心，看了下源码，Vue通过设定对象属性的 setter/getter 方法来监听数据的变化，通过getter进行依赖收集，通过setter在数据变更的时候更新视图。现在实现一个简易版的 vue。为方便后面扩展，先写一个临时的V(题图)，代码如下:class V { constructor(options) { ...

vue function (i)第一次点击不执行_【Vue原理】Watch - 源码版

weixin_39615984的博客

12-12

282

专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 Vue版本2.5.17今天继续探索 Watch 源码，废话不多说了带着我的几个疑问开始1、什么时候初始化 2、怎么确定监听哪些值 3、深度监听怎么回事 4、怎么触发我的函数这些问题的答案会掺杂在源码的解析中，我发现这几篇的写作套路都差不多.....也可以看查一下我的白话...

vue遍历数组对象（key value）

weixin_38999134的博客

05-11

5673

Arr=[ { a:1 }, { b:2 }, ] <li v-for="(value, key, index) in Arr"> <div v-for="(txvalue, name, num) in value"> <span class="title">{{ name }}:</span> <span>{{ txvalue }}</span> </div> &lt

表格数据错乱 - 关于 vue2.0的 key 值

weixin_47353884的博客

07-13

1114

最近在项目中遇见一个bug - 关于key值表格一为模拟初始数据表格二为筛选后结果当筛选项的值为"路人甲"时表格会多一列 “city”关于是否有city这列是从筛选值获取这里我们可以通过计算属性给列添加v-if 来判断显示与隐藏（一开始尝试的v-show发现不生效，应该是组件库的原因）但是我在项目中遇见一个奇妙的bug在我切换表格列时可能会出现数据错乱错误示例：数据是从后端接口里直接拿的本地也打过断点调试是没问题的经过研究发现问题出现在key上解决办法是:key=Math.random()给列加

Vue 怎么遍历对象取出里面的键和值组成数组

qq_42753983的博客

09-19

404

遍历对象取出里面的键和值组成数组

【大前端03-02】Vue.js 源码分析（响应式、虚拟 DOM、模板编译和组件化）

时光海的博客

12-19

177

【作业】Vue.js 源码分析（响应式、虚拟 DOM、模板编译和组件化）【简答题】一、请简述 Vue 首次渲染的过程。【简答题】二、请简述 Vue 响应式原理。【简答题】三、请简述虚拟 DOM 中 Key 的作用和好处。【简答题】四、请简述 Vue 中模板编译的过程。【简答题】一、请简述 Vue 首次渲染的过程。【简答题】二、请简述 Vue 响应式原理。【简答题】三、请简述虚拟 DOM 中 Key 的作用和好处。【简答题】四、请简述 Vue 中模板编译的过程。 ...

vue解析excel

07-28

在Vue中解析Excel表格可以通过以下步骤实现。首先，你需要使用Excel解析库，比如XLSX，来读取Excel文件并将其转换为JavaScript对象。你可以使用以下代码来实现解析： ```javascript const workbook = XLSX.read(file, { type: 'array' }); const sheet = workbook.Sheets\[workbook.SheetNames\[0\]\]; const data = XLSX.utils.sheet_to_json(sheet, { header: 1 }); ``` 其中，`file`是你上传的Excel文件。这段代码将Excel文件读取为一个Workbook对象，然后从中获取第一个Sheet，并将其转换为JSON格式的数据。接下来，你可以将解析出来的数据在Vue组件中进行展示。你可以使用Vue的Table组件或其他适合的组件来展示数据。例如，你可以将解析出来的数据存储在Vue的data属性中，并在模板中使用v-for指令来遍历数据并展示在表格中。以下是一个简单的示例： ```html <template> <table> <thead> <tr> <th v-for="header in headers" :key="header">{{ header }}</th> </tr> </thead> <tbody> <tr v-for="row in data" :key="row"> <td v-for="cell in row" :key="cell">{{ cell }}</td> </tr> </tbody> </table> </template> <script> export default { data() { return { data: \[\], // 解析出来的数据 headers: \[\] // 表头 }; }, methods: { parseExcel(file) { const workbook = XLSX.read(file, { type: 'array' }); const sheet = workbook.Sheets\[workbook.SheetNames\[0\]\]; this.data = XLSX.utils.sheet_to_json(sheet, { header: 1 }); this.headers = this.data.shift(); // 将第一行作为表头并从数据中移除 } } }; </script> ``` 在这个示例中，我们使用了一个Table组件来展示解析出来的数据。通过遍历数据的行和列，我们将数据动态地展示在表格中。请注意，这只是一个简单的示例，你可以根据你的需求进行修改和扩展。同时，你需要在Vue组件中引入XLSX库，并确保你已经正确安装了相关的依赖。 #### 引用[.reference_title] - *1* *2* *3* [如何使用Vue实现Excel表格数据的导入，在前端实现Excel表格文件的上传和解析，并使用Table组件将解析出来的...](https://blog.csdn.net/qq_43320293/article/details/130542684)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交