Vue.js中同时使用created和watch处理同一份数据是否冗余，有更优实现方案吗？

你的代码确实存在重复逻辑：created钩子和watch监听中都写了regionList存在时给regions赋值的同一段逻辑，属于可合并的重复代码。

方案1：给watch添加immediate属性（最通用） #

利用Vue watch的immediate: true配置，让监听回调在组件初始化阶段就自动执行一次，直接替代created里的赋值逻辑，改写后代码如下：

props: {  
  regionList: {
    type: Array,
  },
},
data() {
  return {
    regions: [],
  };
},
watch: {
  regionList: {
    immediate: true,
    handler(newVal) {
      if (newVal) {
        this.regions = newVal;
      } else {
        this.getApi();
      }
    }
  }
},
// 可以完全删掉原来的created钩子逻辑

这种写法不管是props初始传值还是后续props更新，都能自动触发逻辑，不用两边重复写。

方案2：用计算属性简化（适用只读场景） #

如果你的regions只需要同步regionList的值，不会在组件内部被修改，那可以直接用计算属性替代本地data和watch，代码更精简：

props: {  
  regionList: {
    type: Array,
    default: () => []
  },
},
computed: {
  regions() {
    // 不需要额外赋值，直接返回props值即可
    return this.regionList
  }
},
created() {
  if (!this.regionList.length) {
    this.getApi()
  }
}

这种方案性能更好，不需要额外维护本地状态。

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