Vue 再来唠唠双向同步
之前其实谈到了双向同步在 Vue 中的实现方法,尽管 Vue 在 2.x 移除了
.sync
,在2.3.0+
又重新引入。这一次也并不能简单归纳为「重新引入」,而和v-model
一样,改为了一种语法糖。
先来重新看下 Vue 官方对于 .sync
的定义:
1<comp :foo.sync="bar"></comp>
2<!-- 会被扩展为 -->
3<comp :foo="bar" @update:foo="val => bar = val"></comp>
4
当子组件需要更新 foo
的值时,它需要显式地触发一个更新事件:
1this.$emit('update:foo', newValue)
2
这一点和 v-model
的 value
<-> @change
一样,其实只是一个比较方便的语法糖。
不过当时一个同学遇到了一个问题:为什么我的 .sync
没有用了?
场景大概是一个数组遍历绑定每个值双向绑定给子组件,然后发现数组没有成功的被重新渲染,刚开始以为是在 .sync
上的问题,因为之前并不知道场景是在「数组」上,于是推测了半天都不对。
大家看我这么强调数组就知道了,在数组时一定要记得:不要直接覆盖数组的值:
1arr[i] = xxx
2
这样赋值没有办法触发 Vue 的监听机制,这一点与你是否使用 v-model
或者 .sync
都无关,倒不如说双向绑定时特别需要注意这个情况,避免「无法更新」。
评论 (0)