Vue中v-model绑定新增published属性失效问题排查与解决

嘿，这个问题我太熟了——本质上是Vue的响应式系统机制在搞事情！

为什么绑定失效？ #

在Vue 2中，响应式系统是通过Object.defineProperty实现的。当组件初始化时，Vue会遍历data中的对象，把所有已存在的属性转换成响应式的。但你在created钩子中直接给用户对象新增published属性时，这个属性并没有经过Vue的响应式转换流程，所以Vue无法追踪它的变化，自然v-model绑定的复选框就不会和这个属性联动。

怎么解决（不用修改添加属性的逻辑框架）？ #

你可以用Vue提供的$set方法（全局的Vue.set也适用）来添加这个属性，它会帮我们把新属性纳入响应式系统的追踪范围。

举个具体的代码例子：
原来的代码可能是这样的：

created() {
  this.users.forEach(user => {
    user.published = false; // 直接新增属性，非响应式
  })
}

改成下面这样就行：

created() {
  this.users.forEach(user => {
    this.$set(user, 'published', false); // 用$set确保属性响应式
  })
}

额外说明（如果是Vue 3的情况） #

要是你用的是Vue 3，那直接新增属性本来就是响应式的——因为Vue 3用Proxy替代了Object.defineProperty，它能拦截对象的所有属性操作，包括新增属性。但从你的问题来看，大概率是Vue 2的场景，所以上面的$set方案就足够解决问题了。

这样调整之后，你的复选框应该就能和published属性正常双向绑定，状态变化也能实时同步啦～

内容的提问来源于stack exchange，提问作者panthro