Vue
An interesting question about setup syntax sugar(一个关于setup语法糖的有意思的问题) #7845
-
|
When the ref object r changes, the component regenerates the virtual dom for update. Why is c of type number updated, but objects rmb and data are not updated, but data.name.city is updated. |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 5 replies
-
|
还有 如果把 number类型的c和data对象放到一个元素中，那么data又会更新了 And if you put the c and data objects of type number into one element, the data will be updated again |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
仔细看生成的 render 函数就能明白了 return (_ctx, _cache) => {
return (_openBlock(), _createElementBlock(_Fragment, null, [
_createElementVNode("h1", null, _toDisplayString(r.value), 1 /* TEXT */),
_createElementVNode("h1", null, _toDisplayString(rmb)),
_createElementVNode("h2", null, _toDisplayString(_unref(c)), 1 /* TEXT */),
_createElementVNode("h1", null, _toDisplayString(data)),
_createElementVNode("h1", null, _toDisplayString(data.name.city), 1 /* TEXT */)
], 64 /* STABLE_FRAGMENT */))
}
感兴趣的话可以看一下我之前的一个分享 |
Beta Was this translation helpful? Give feedback.
-
|
@edison1105 ohhhhhhhh, 谢谢大佬的解答，vue3还真是精妙， i follow you |
Beta Was this translation helpful? Give feedback.
-
|
恍然大悟 |
Beta Was this translation helpful? Give feedback.
-
|
真衰，分享国内还打不开，以后有机会在研究吧 |
Beta Was this translation helpful? Give feedback.
-
|
B站有视频，你搜 vueshenzhen 试试 |
Beta Was this translation helpful? Give feedback.
-
|
找到了 谢谢 |
Beta Was this translation helpful? Give feedback.
render 函数重新执行，拿到了最新的 vnode 是肯定的，但是这个最新的 vnode 并没有全部 patch。 因为 vue3 内部做了优化：
理解了这个优化后，就能解决你的疑惑了，当 r.value 发生变化时：
仔细看生成的 render 函数就能明白了