Now you can provide attr "wx:key" for a "wx:for" to improve performance.

素颜马尾好姑娘i 2022-05-17 00:15 95阅读 0赞

![70][]

微信小程序

Now you can provide attr "wx:key" for a "wx:for" to improve performance.

上文为警告，不处理不影响程序运行。

在wx:for后面添加wx:key="key" 可消除警告。

其实不只是vue，react中在执行列表渲染时也会要求给每个组件添加上key这个属性。

要解释key的作用，不得不先介绍一下虚拟DOM的Diff算法了。

我们知道，vue和react都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。

vue和react的虚拟DOM的Diff算法大致相同，其核心是基于两个简单的假设：

**1. 两个相同的组件产生类似的DOM结构，不同的组件产生不同的DOM结构。**

**2. 同一层级的一组节点，他们可以通过唯一的id进行区分。**

基于以上这两点假设，使得虚拟DOM的Diff算法的复杂度从**O(n^3)**降到了**O(n)**。

这里我们借用[React’s diff algorithm][React_s diff algorithm]中的一张图来简单说明一下：

![1170024-20171018191016162-1229549117.png][]

当页面的数据发生变化时，Diff算法只会比较同一层级的节点：

**如果节点类型不同，直接干掉前面的节点，再创建并插入新的节点，不会再比较这个节点以后的子节点了。**

**如果节点类型相同，则会重新设置该节点的属性，从而实现节点的更新。**

当某一层有很多相同的节点时，也就是列表节点时，Diff算法的更新过程默认情况下也是遵循以上原则。

比如一下这个情况：

![1170024-20171018191056146-436654927.png][]

我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的：

![1170024-20171018191119318-368188268.png][]

即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？

所以我们**需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。**

![1170024-20171018191142334-13876328.png][]

所以一句话，**key的作用主要是为了高效的更新虚拟DOM**。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，

否则vue只会替换其内部属性而不会触发过渡效果。

[70]: /images/20220517/dae504d76932463c8515e63915dae8a8.png
[React_s diff algorithm]: https://link.zhihu.com/?target=https%3A//calendar.perfplanet.com/2013/diff/
[1170024-20171018191016162-1229549117.png]: /images/20220517/3e0e60e107634972879d6fd1286f3195.png
[1170024-20171018191056146-436654927.png]: /images/20220517/c0ffb31512fc4883ad25108e36fd2c63.png
[1170024-20171018191119318-368188268.png]: /images/20220517/8599b3eb86c940f2ac8353ce082a7511.png
[1170024-20171018191142334-13876328.png]: /images/20220517/87af6dfc3fdc48faa8bcc79906735c61.png

发表评论取消回复

表情：

评论列表（有 0 条评论，95人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序工具报错：Now you can provide attr `wx:key` for a `wx:for` to improve performance 解决方法

微信小程序工具报错：Now you can provide attr \`wx:key\` for a \`wx:for\` to improve performance 解

悠悠/ 2022年09月13日 15:29/ 0 赞/ 71 阅读

相关 Five Invaluable Techniques to Improve Regex Performance

Regular expressions are powerful, but with great power comes great responsibility. Becau

墨蓝/ 2022年08月02日 06:04/ 0 赞/ 136 阅读

相关 Performing a deep fetch of the `master` specs repo to improve future performance

更新cocoapod的时候会出现 Performing a deep fetch of the \`master\` specs repo to imp

雨点打透心脏的1/2处/ 2022年07月13日 03:24/ 0 赞/ 19 阅读

相关 Now you can provide attr "wx:key" for a "wx:for" to improve performance.

在创建一个新的微信小程序项目会生成一个默认的helloword，点击头像后，进入一个日志页面，然后在控制台中出现下面提示： Now you can provide attr

Myth丶恋晨/ 2022年06月09日 11:09/ 0 赞/ 79 阅读

相关 Now you can provide attr "wx:key" for a "wx:for" to improve performance.

今天的微信小程序开发过程中遇到了Now you can provide attr "wx:key" for a "wx:for" to improve performance.

旧城等待，/ 2022年05月28日 09:40/ 0 赞/ 100 阅读

相关 Now you can provide attr "wx:key" for a "wx:for" to improve performance.

![70][] 微信小程序 Now you can provide attr "wx:key" for a "wx:for" to improve performan

素颜马尾好姑娘i/ 2022年05月17日 00:15/ 0 赞/ 96 阅读

相关小程序-Now you can provide attr "wx:key" for a "wx:for" to improve performance

小程序开发-Now you can provide attr “wx:key” for a “wx:for” to improve performance 当我们开发微信

偏执的太偏执、/ 2022年05月15日 16:20/ 0 赞/ 160 阅读

相关 Now you can provide attr "wx:key" for a "wx:for" to improve performance

小程序开发中遍历列表时，出现警告`Now you can provide attr "wx:key" for a "wx:for" to improve performance

不念不忘少年蓝@/ 2022年05月12日 01:18/ 0 赞/ 79 阅读

相关小程序-Now you can provide attr "wx:key" for a "wx:for" to improve performance

转自：https://www.cnblogs.com/xpwi/p/9878871.html 小程序开发-Now you can provide attr "wx:key"

左手的ㄟ右手/ 2021年12月23日 09:41/ 0 赞/ 149 阅读

相关 you need to be root to perform this command

在linux命令行运行命令的时候，出现： > you need to be root to perform this command 这里是要告诉我们，我们没有权限进行命令

痛定思痛。/ 2021年06月24日 15:58/ 0 赞/ 396 阅读