“vue”:“^3.2.47”
最小复制链接 重现步骤无
预期是什么?希望不要无意递归导致页面死机
到底发生了什么?“vue”:“^3.2.47”
最小复制链接 重现步骤无
预期是什么?希望不要无意递归导致页面死机
到底发生了什么?这种写法是错误的,render 函数依赖于 count,而每次执行 render 函数时,都会运行 data.slot,而 data.slot 内部又改变了 count,导致 render 函数又要重新执行,从而造成死循环。
这段文字导致无限循环
因为场景是通过模板中的 v-for 循环进行渲染的,所以需要将每个子元素作为函数的参数动态渲染到模板中。有什么方法可以避免无限循环吗?类似于使用 markRaw api?感激不尽
不要在render函数中修改依赖于render函数的变量。
渲染函数返回的是一个简单的字符串,但是如果当前模板的其他依赖对象发生改变,也会触发渲染函数重新执行
我们知道,模板转换为dom需要compiler -> render -> patch-> dom
检查编译器代码
function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createElementBlock(_Fragment, null, [
_createTextVNode(_toDisplayString(_ctx.count) + " ", 1 /* TEXT */),
_createElementVNode("div", null, _toDisplayString(_ctx.data.slot()), 1 /* TEXT */)
], 64 /* STABLE_FRAGMENT */))
}
当invoke时_ctx.count
,触发getter,然后将render函数放到deps中,当count改变时,render函数再次执行。
所以。你改变了计数。vue 再次执行渲染。再次渲染执行。_ctx.data.slot()
再次执行(再次登录 11111)
虽然log 11111
执行了两次,但 patch 期间不会有额外的 dom 创建或销毁。因为<div>{{ data.slot() }}</div>
没有改变
@RayforReal