Vue.js避免直接修改Props求助：created钩子修改props报错

嘿，这个坑我刚学Vue的时候也踩过！别慌，咱们一步步来搞定它～

首先得明白为什么会出现这个警告：Vue的Props是单向数据流设计——父组件把数据传给子组件，子组件只能读取，不能直接修改。如果你硬改，当父组件重新渲染时，这个props的值会被父组件的原始值覆盖，而且还会打乱组件间的数据流向，所以Vue会贴心地给你抛出警告。

针对你的场景，分两种情况来调整代码：

情况1：markets是子组件自己获取的，不需要父组件传递 #

如果这个数据完全是子组件通过Axios接口拉取的，那它根本不该放在Props里！直接把它改成子组件的内部状态（data属性）就行：

// 去掉props里的markets声明
export default {
  data() {
    return {
      markets: {} // 初始化一个空对象
    }
  },
  created() {
    axios.get('/你的接口地址')
      .then(res => {
        this.markets = res.data; // 直接赋值给data里的markets，完全没问题！
      })
  }
}

情况2：markets需要父组件传递初始值，子组件在其基础上更新 #

如果父组件确实要给子组件传初始的markets数据，子组件需要基于这个初始值修改或补充，那你得在子组件里创建一个本地副本，用data属性来存：

export default {
  props: {
    markets: {
      type: Object,
      default: () => ({}) // 给个默认空对象，避免父组件没传值时出现undefined
    }
  },
  data() {
    return {
      // 浅拷贝props的markets到本地变量
      localMarkets: { ...this.markets }
    }
  },
  created() {
    axios.get('/你的接口地址')
      .then(res => {
        // 赋值给本地的localMarkets，而不是props里的markets
        this.localMarkets = res.data;
      })
  },
  // 如果父组件会动态更新markets，加个watch同步到本地副本
  watch: {
    markets(newVal) {
      this.localMarkets = { ...newVal };
    }
  }
}

注意：如果markets是嵌套很深的复杂对象，浅拷贝（{ ...newVal }）可能不够，这时候可以用JSON.parse(JSON.stringify(newVal))做深拷贝，或者用lodash的cloneDeep方法（需要先安装lodash）。

最后再啰嗦一句：记住Props是“输入”，Data是子组件自己的“内部状态”，别搞混啦～这样调整后，那个烦人的警告就会消失啦！

内容的提问来源于stack exchange，提问作者Ângelo Rigo