看 vue 源码时看到了这么一段

2020-08-25 14:21:18 +08:00
 Hoshinokozo
 /*两个 VNode 节点相同则直接返回*/
    if (oldVnode === vnode) {
      return
    }

没记错的话,oldVnode 和 vnode 都是对象,这样的对比有什么意义呢,难道是判断这两个是同一个对象吗?

实在是没弄明白,求解答

3422 次点击
所在节点    JavaScript
8 条回复
nnnToTnnn
2020-08-25 14:31:58 +08:00
单看这段代码,脑残的写法。 但是如果结合上下文看就不一定了。

const oldVnode = {'test': 1}
const vnode = oldVnode

if (oldVnode === vnode) {
return
}
nnnToTnnn
2020-08-25 14:32:51 +08:00
根据这个逻辑,可以简单判断到底是新创建的对象,还是旧的对象。
optional
2020-08-25 14:34:44 +08:00
vue 3? vue3 里有静态 node 提升的特性,对于静态的 node,每次渲染的对象是同一个。
nnnToTnnn
2020-08-25 14:34:58 +08:00
const oldVnode = {'test': 1}
let vnode = oldVnode

if (oldVnode.test === 2) {
vnode = {'test': 3}
}

if (oldVnode === vnode) {
return
}

你在看这个比较,是不是就存在很大的意义了? 看代码要结合上下文来看,单给一段代码,看个寂寞啊?
Hoshinokozo
2020-08-25 14:48:06 +08:00
@optional vue2
blindie
2020-08-25 15:14:55 +08:00
浅比较常用写法
akatquas
2020-08-25 17:50:07 +08:00
大概是如果重新执行 render,会得到新的一个对象。
那么反推,如果不是新的对象,则不需要比较。
JayLin1011
2020-08-28 15:46:28 +08:00
如果是移动虚拟节点,那么节点就没必要比较和打补丁更新,可以复用,直接 return 跳出比较 patchVode() 方法。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/701275

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX