Vue 再来唠唠双向同步

之前其实谈到了双向同步在 Vue 中的实现方法,尽管 Vue 在 2.x 移除了 .sync,在 2.3.0+ 又重新引入。这一次也并不能简单归纳为「重新引入」,而和 v-model 一样,改为了一种语法糖。

先来重新看下 Vue 官方对于 .sync 的定义:

<comp :foo.sync="bar"></comp>
<!-- 会被扩展为 -->
<comp :foo="bar" @update:foo="val => bar = val"></comp>

当子组件需要更新 foo 的值时,它需要显式地触发一个更新事件:

this.$emit('update:foo', newValue)

这一点和 v-modelvalue <-> @change 一样,其实只是一个比较方便的语法糖。

不过当时一个同学遇到了一个问题:为什么我的 .sync 没有用了?

场景大概是一个数组遍历绑定每个值双向绑定给子组件,然后发现数组没有成功的被重新渲染,刚开始以为是在 .sync 上的问题,因为之前并不知道场景是在「数组」上,于是推测了半天都不对。

大家看我这么强调数组就知道了,在数组时一定要记得:不要直接覆盖数组的值:

arr[i] = xxx

这样赋值没有办法触发 Vue 的监听机制,这一点与你是否使用 v-model 或者 .sync 都无关,倒不如说双向绑定时特别需要注意这个情况,避免「无法更新」。

如果您觉得文章不错,可以通过赞助支持我

标签: 知识, Vue

添加新评论