文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在 Vue 中为什么不推荐用 index 做 key

本文首发于政采云前端团队博客：在 Vue 中为什么不推荐用 index 做 key https://zoo.team/article/vue-index 前言 前端开发中，只要涉及到列表渲染，那么无论是...下面我们就以 Vue3.0 diff 算法为切入点，剖析 key 在 diff 算法中的作用 具体 diff 流程如下 Vue3.0 中 在 patchChildren 方法中有这么一段源码 if (...那接下来看看，Vue3 是怎么做的。...那接下来的思路是：如果能找到老节点在新节点序列中顺序不变的节点们，就知道，哪一些节点不需要移动，然后只需要把不在这里的节点插入进来就可以了。...其实这就是 diff 移动的思路了 为什么不要用 index 性能消耗 使用 index 做 key，破坏顺序操作的时候， 因为每一个节点都找不到对应的 key，导致部分节点不能复用,所有的新 vnode

1.2K20

Vue.js系列之四计算属性和观察者

在模版中放入太多的逻辑运算会让模版过重且难以维护,例如如下代码: {{ message.split('').reverse().join('') }} 在这个地方,模版不在是简单的声明式逻辑...,你必须看一段时间才能意识到,这里是想要显示变量message的翻转字符串,当你想要在模版中多次引用此处的翻转字符串时,就会更加难以处理....代码如下: computed: { now: function () { return Date.now() } } 相比之下,每当触发重新渲染,调用方法总会再次执行函数. 3、计算属性为什么需要缓存...>{{fullName}} var currentPage=new Vue({.... 6、watch侦听器 虽然计算属性在大多数情况下更合适,但是有时需要一个自定义的侦听器,这就是为什么Vue通过watch选项提供了一个更通用的方法,来响应数据的变化。

94460
您找到你想要的搜索结果了吗？
是的
没有找到

vue3的composition-api实践总结

因为向往已久vue3的开发方式，但是组内有很多历史项目，并且我们受制于ie的支持，所以我们决定在vue2中引入composition-api，来使用他的新特性。...computed、watch，provide、inject不用怀疑和vue2中做的是一样的事情。 你一定注意到下面这些加了on开头的生命周期钩子函数，没错在组合式api中，这就是他们注册的方式。...但是为什么不见了beforeCreate和created呢？因为setup就是在这个阶段执行的，而setup就是打开组合式api世界的大门。...那为什么会有这种差异呢？在vue3当中响应式是基于proxy实现的，而proxy的target必须是复杂数据类型，也就是存放在堆内存中，通过指针引用的对象。...由于composition-api中的响应式虽然底层原理与vue相同都是通过object.defineproperty改写属性实现的，但是具体实现方式存在差异，所以在setup当中与vue原生的响应式并不互通

80220

Vue.js系列之一初识Vue

在看vue.js之前,可以先看这两篇文章,对于为什么要使用vue会有一定帮助 1、 Vue.js !important 2、界面之下：还原真实的MV*模式 !... var currentPage=new Vue({ el:"#tDiv", //指定绑定的目标...同样的,通过控制台修改数据的时候,dom元素也会发生相应的改变.自行实现 二、条件与循环(if语句和for语句在Vue中的使用方式) 1、使用vue的类if语句功能 通过v-if条件指令控制元素的显示隐藏...v-on:click="resetPContent" value="点我有惊喜"> var currentPage=new Vue({...注意在resetPContent方法中,更改了数据,相当于改变了应用程序的状态,但是注意这里没有任何操作dom元素的代码,因为所有的dom操作都由vue来进行,这里我们主需要关心数据源.更新dom的操作都由

1.1K50

vue- Vue-Cli脚手架工具安装 -创建项目-页面开发流程-组件生命周期- -03

main.js 解析（项目入口） vue 项目启动生命周期 加载 mian.js 启动项目 加载 router.js 文件 监测路由变化来做处理 参与文件 main.js 入口文件 App.vue 项目根组件...为什么页面上会有 Home | About 呢？我们刚刚又没写 为什么页面上会有 Home | About 呢？... 监测路由变化来做处理 vue 发生页面跳转的原理 如果请求链接改变（路由改变），router 里匹配到了，会把路由对应的 组件 拿出来，然后把根组件里的...就会被重置， // 1）在点击跳转事件中，将跳转的页面用 数据库 保存，在钩子函数中对 currentPage 进行数据更新 // currentPage...localStorage.currentPage: '' // 2）直接在 created 钩子函数中，获取当前的 url 路径，根据路径更新 currentPage

1.2K30

使用Vue 3构建更好的高阶组件

HOC始终无法充分发挥其功能的全部功能，并且由于它们在大多数Vue应用程序中并不常见，因此它们的设计通常很差，可能会带来限制。这是因为模板就是这样-模板或一种您表达某种逻辑的受约束的语言。...我在为各种逻辑（如网络，动画，UI和样式，实用程序和开源库）构建的应用程序中积极使用HOC。我有一些技巧可以分享如何构建HOC，尤其是即将发布的Vue 3 Composition API。...JavaScript 有了模板，第一个天真的实现将在一个setup函数中： import { ref, onMounted } from 'vue'; export default { props...但是，此HOC组件与Vue 2中的组件相似。您只能使用composition API重新编写它，尽管它很简洁，但几乎没有用。...} return { endpoint: paginatedEndpoint, nextPage, prevPage }; } 这样做的好处是我们隐藏了currentPage

1.7K50

Vue 中 data 为什么必须是一个函数

为什么 Vue 中的 data 必须是个函数？ 官方文档的解释如下： ? ? 为什么会出现上述“影响到其它所有实例”的情况呢？...其实这个问题取决于 JS 原型链知识，而非 Vue 我们先来看不是函数的情况： function Component() { } Component.prototype.data = { name...= new Component() componentA.data.age = 40 console.log(componentA, componentB) // 40 14 这就很好的解释了为什么...Vue 组件中的 data 需要用函数了，当 data 是函数的时候，每一个实例的 data 属性都是独立的，互不影响 总结 Vue 中的 data 必须是个函数，因为当 data 是函数时，组件实例化的时候这个函数将会被调用...，返回一个对象，计算机会给这个对象分配一个内存地址，实例化几次就分配几个内存地址，他们的地址都不一样，所以每个组件中的数据不会相互干扰，改变其中一个组件的状态，其它组件不变 简单来说，就是为了保证组件的独立性和可复用性

1.2K20

三问数据中台：是什么？怎么做？为什么要做？

自从阿里提出了“大中台，小前台”概念之后，这几年数据中台这个概念火了起来，互联网巨头们纷纷搭建起了自家的数据中台，究竟数据中台有什么魅力，能让企业如此重视？ ? 一 什么是数据中台？...很多人会问，到底什么是数据中台？ 通俗地讲，数据中台就是一个在数据层面上为企业业务提供帮助、决策的一个工具。...例如“数码产品订单”、“生鲜订单”、“服装订单”等等将不同的数据表进行组织； 04 冗余性不同 数据仓库往往是高冗余的，因为数据仓库希望借助更多重复类型的数据去分析整个产品的运营走势，为下一步的运营决策做依据...二 如何搭建最合适自己的数据中台？ 为什么要说是“最适合”自己的数据中台呢？ 数据中台无论是功能、逻辑都是非常的复杂，其中涉及到的字段、维度非常的多，那如何打造最适合自己的数据中台呢？...三 为什么大公司需要自建数据中台 据调研发现，其实市面上已经存在不少如“神策数据”、“BDP”、“帆软”等等的第三方智能数据平台，企业购买即可使用，那相当于已经有现成的了，为什么还要大费周章去自己开发呢

55710

为什么 Vue 中不要用 index 作为 key？（diff 算法详解）

前言 Vue 中的 key 是用来做什么的？为什么不推荐使用 index 作为 key？常常听说这样的问题，本篇文章带你从原理来一探究竟。...这也解释了为什么 diff 是同层对比。 2. 是相同节点，要尽可能的做节点的复用（都是 ul，进入 会调用src/core/vdom/patch.js下的patchVNode方法。...但是在进行子节点的 diff 过程中，会在 旧首节点和新首节点用sameNode对比。...为什么不要用随机数作为key？...如果你的列表顺序会改变，别用 index 作为 key，和没写基本上没区别，因为不管你数组的顺序怎么颠倒，index 都是 0, 1, 2 这样排列，导致 Vue 会复用错误的旧子节点，做很多额外的工作

59710

为什么 Vue 中不要用 index 作为 key？（diff 算法详解）

前言 Vue 中的 key 是用来做什么的？为什么不推荐使用 index 作为 key？常常听说这样的问题，本篇文章带你从原理来一探究竟。...这也解释了为什么 diff 是同层对比。 2. 是相同节点，要尽可能的做节点的复用（都是 ul，进入?）。 会调用src/core/vdom/patch.js下的patchVNode方法。...但是在进行子节点的 diff 过程中，会在 旧首节点和新首节点用sameNode对比。...为什么不要用随机数作为key？...如果你的列表顺序会改变，别用 index 作为 key，和没写基本上没区别，因为不管你数组的顺序怎么颠倒，index 都是 0, 1, 2 这样排列，导致 Vue 会复用错误的旧子节点，做很多额外的工作

83340

在vue的v-for中，key为什么不能用index？

相关的操作都是由我们自己编写（当然博主是没有写过 jQuery 滴，可能因为博主太年轻了吧，错过了 jQuery 大法的时代），如何操作 DOM, 操作 DOM 的时机应该如何安排成了决定性能的关键，而到了 Vue...面试题解答参见 前端vue面试题详细解答虚拟 DOM 的作用当我们能够在 JS 中模拟出 DOM 结构后，我们就可以通过 JS 来对 DOM 操作进行优化了，怎么优化呢，这个时候 diff 算法就该登场了...对 DOM 进行修改后，并不会直接触发 DOM 更新，而是会先生成一个新的虚拟 DOM，然后利用 diff 算法与修改前生成的虚拟 DOM 进行比较，找出需要修改的点，最后进行真正的 DOM 更新操作Vue...源码中的 diff 算法patch.js 路径Vue 中的 diff 算法相关代码主要在 patch.js 文件中，路径如下图图片patch 函数图片1、如果新节点不存在(vnode is undefined...，也能够从更加底层的角度理解为什么不推荐使用 index 作为 key 这个 Best Practices！

1K10

Vue.js系列之二Vue实例

它向Vue的响应式系统中加入了其参数对象的data属性中所有的属性,当data属性中的属性发生改变时,视图会随之产生改变,根据新的属性值更新视图.代码如下: ...但是,这里需要注意的是只有哪些在实例被创建时就已经注册到data属性中的属性是响应式的,也就是说如果你后期向data属性中追加了属性,并且修改了该属性值,属兔是不会发生任何改变的....$data); console.log(currentPage.$el); currentPage....,可以通过这些事件来影响整个Vue实例生成的过程.例如: 可以通过注册一个created事件,该事件会在Vue实例被创建之后执行,代码如下: <div id="<em>currentPage</em>...注:created事件<em>中</em>的this指向当前<em>Vue</em>实例.

77980

Vue.js系列之三模板语法

一、插值 1、通过Vue向dom中插入文本 (1)、常用的数据绑定 数据绑定最常见的形式就是使用"Mustache"语法(双大括号)的文本插值: Message: {{ msg }} Mustache标签会被替代为数据对象中的msg属性,无论何时,绑定的数据对象上的msg发生了改变,插值处的内容都会被更新. (2)、只绑定一次的Vue指令 通过使用v-once指令,可以执行一次插值...> var page=new Vue({ el:"#currentPage", data...2、通过Vue向dom中插入原始html代码 Vue会将双大括号中的数据渲染未纯文本,而非html代码,为了能输出html,Vue提供了v-html指令来输出html代码,代码如下: 这个div的内容将会被替换成属性值rawHtml,注:当属性值被渲染成html的时候,会忽略属性值中其他的数据绑定,Vue 不是基于字符串的模板引擎.

2.2K100

Vue+ElementUI 搭建后台管理系统（实战系列六）

关于开发过程中，确实使用到很大一部分的文档，都说前端开发离不开文档，重要的话说三遍，一定要多看文档。...管理后台解决方案 vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。.../vue-element-admin/#/dashboard 官方文档：https://panjiachen.github.io/vue-element-admin-site/zh/ 使用建议 本项目的定位是后台集成方案...---- Vue+ElementUI 搭建后台管理系统（实战系列六） - 表格分页 前面有提到在vue里面，对于表格的使用：vue2.0 + element-ui 实战项目-渲染表格系列文章，在实战的过程中...) { this.currentPage = currentPage; console.log(this.currentPage); //点击第几页 }, 3：对表格中获取到的

40220
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券