简单Vue插值语法求讲解

RS水果

请教 这里的a++为什么是121 ?

零下八度

不要在{{}}里面运算就可以了

E式丶男孩

我去,我用vue这么久,都没发现这个问题
在我亲手试了试发现确实有这个问题
但是这不是个bug,我只知道为什么不对,但是却不知道为什么是这个值
如果有大佬知道还请说一下
我在仔细查看官网文档后发现
插值的时候是只能插单个表达式的
在js中,
i++ <=> i= i + 1
这是取值加赋值两个过程,且不是一个表达式
原文是这样的

---

使用 JavaScript 表达式

迄今为止，在我们的模板中，我们一直都只绑定简单的 property 键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

轩宸

个人理解，你这属于使用 JavaScript 表达式，响应式数据a一直在自增，最后可能是自增到某个阈值就停止了，或者可能是某方面的限制停止。
我用多个数字试了应该是只能自增101次，具体原因等其他人解答

泪鱼无梦

应该是vue执行的时候发现你这里++了，重新渲染了，第二遍渲染的时候又发现了++，又重新渲染了，以此无限循环，才导致了121这个结果，vue作者应该考虑到这种无限循环的情况了，所以最多应该就会重复执行101次

RS水果

是的 用watch监视后 发现确实如此  循环被vue限制为100次 所以最后报错了

cube

vue是数据响应式的.
首先render渲染执行a++, 然后数据响应,而数据响应之后又会通知render渲染,如此循环.
尤大对此必然要实现一种保护,即MAX_UPDATE_COUNT,到达此阈值即警告并退出当前调度.

侠骨留香喵

之前看过一个别人讲的视频，说过此问题。参考：https://www。bilibili。com/video/BV1ep4y1s7w5?p=2

fankangfan

长知识了