CodeSky 代码之空

之前其实谈到了双向同步在 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 都无关，倒不如说双向绑定时特别需要注意这个情况，避免「无法更新」。