简单Vue插值语法求讲解
请教 这里的a++为什么是121 ? 不要在{{}}里面运算就可以了 我去,我用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次
是的 用watch监视后 发现确实如此循环被vue限制为100次 所以最后报错了 vue是数据响应式的.
首先render渲染执行a++, 然后数据响应,而数据响应之后又会通知render渲染,如此循环.
尤大对此必然要实现一种保护,即MAX_UPDATE_COUNT,到达此阈值即警告并退出当前调度.
之前看过一个别人讲的视频,说过此问题。参考:https://www。bilibili。com/video/BV1ep4y1s7w5?p=2 长知识了
页:
[1]
2