vue

VUE3-数字0增加(++)在模板中不是1而是101,为什么

发布于 2022-10-30 22:06:46
Vue.createApp({    data() {      return {        counter: 0
      }
    },    template: '<div>{{counter++}}</div>'
  }).mount('#root')

最后,这个代码在页面上显示101。有人知道这个细节吗?

答:

  1. counter变量呈现为101而不是1的原因是因为模板中有一个side-effect。当模板呈现counter递增时,Vue寄存器改变并再次触发呈现…它只是无限循环

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

Error:

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



关注公众号,了解更多it技术(it问答网

0 条评论

发布
问题