Vue 3-数字0增加(++)不是1而是模板中的101，为什么

Question

Vue.createApp({
data() {
return {
counter: 0
}
},
template: '<div>{{counter++}}</div>'
}).mount('#root')

最后，此代码在页面上显示101。有人知道这件事的细节吗？

Answer 1

1. counter变量被渲染为101而不是1的原因是因为模板中存在副作用。当模板正在渲染counter时，Vue会注册更改并再次触发渲染。。。它只是一个无限循环

2. 这个无限循环不是无限的，而是在101次迭代后停止的原因在于Vue内部检查这种情况并抛出错误(您应该在浏览器开发工具控制台中看到(。抛出错误的条件是number_of_iterations > RECURSION_LIMIT，其中RECURSION_LIMIT设置为100

错误：

超过了最大递归更新数。这意味着你有一个反应效应，它改变了自己的依赖关系，从而递归地触发自己。可能的来源包括组件模板、呈现函数、更新的钩子或观察者源函数。