Vue2自定义Radio组件异步修改绑定数据后选中状态未同步更新问题

解答 #

1. 最小可复现示例的直接问题
   示例代码中setTimeout使用普通函数声明导致this指向丢失，实际赋值的是全局作用域下的type属性，并非组件实例的响应式数据，因此视图不会触发更新。修改为箭头函数即可修复this指向问题：

created() {
  setTimeout(() => {
    this.type = "article";
    console.log(this.type);
  }, 800);
}

2. 业务代码问题排查方案
   如果你确认this.type的值已经正确变更，但Radio组件没有同步更新选中状态，核心问题基本出在自定义Radio组件的v-model实现上：
   Vue2中v-model默认会给子组件传递名为value的prop，子组件需要主动监听该prop的变化，在外部传入的value更新时同步修改自身的选中状态。很多自定义Radio组件只会在初始化时读取一次value值，后续没有监听prop变更，就会出现数据更新视图不变的问题。
   除此之外可以额外排查两个常见问题：

• 检查blog.info.editorial是否是响应式属性：如果该字段是接口返回后动态添加到blog.info对象上的，没有使用Vue.set赋值的话不会触发响应式更新，也不会触发watch回调执行。
• 如果你需要组件初始化时就执行一次watch逻辑，需要给watch配置immediate: true，否则只有blog后续发生变更时才会触发回调：

watch: {
  blog: {
    immediate: true,
    handler() {
      this.type = this.blog.info.editorial ? 'article' : 'blog';
    }
  }
}

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