Vue.js中在方法内使用props出现异常的原因咨询

嘿，我来帮你捋捋日常开发里遇到这种情况的几个高频原因，都是实打实踩过的坑：

• Props传递时的命名或遗漏问题
  这绝对是Top1的坑！比如父组件传的是userNickname，子组件却定义成user_nickname或者usernickname（大小写、分隔符搞错）；要么就是父组件压根没传这个prop，你却在方法里直接调用，自然拿不到预期值。要是用Vue的话还要注意：驼峰命名的prop在HTML模板里得改成短横线分隔（比如user-nickname），不然组件根本接收不到。

• Props的类型校验或默认值错误
  比如你给prop定义的类型是Array，默认值却写成了{}，或者父组件传过来的是字符串，方法里却按数组去遍历，肯定出问题。还有如果默认值是引用类型（对象、数组），得用工厂函数返回（比如default: () => []），不然所有组件实例会共享同一个默认值，修改时会影响其他实例的状态。

• 异步Props还未完成加载
  很多时候props是从接口请求来的数据，组件初始化时（比如created/mounted阶段）这个prop还是undefined或者默认值，你直接在方法里用它，结果自然不符合预期。这时候要么给方法加个值的判断，要么监听props的变化，等数据到位了再执行逻辑。

• 违反单向数据流，直接修改Props
  不管是React还是Vue，props都是单向流动的。你要是在子组件方法里直接改props（比如this.props.userName = '新名字'），不仅不会生效，还会触发警告甚至报错。真要改的话，得通过父组件传过来的回调函数，让父组件去更新数据源。

• 解构Props时丢失响应式
  比如在Vue的setup里直接解构props，没用到toRefs/toRef，那当props更新时，解构出来的变量不会同步更新，方法里用的还是旧值；React里如果把props赋值给组件内部变量，之后props更新了，这个变量也不会自动同步，方法里拿的还是旧数据。

• 修改Props深层属性未触发响应
  如果props是对象或数组，你在方法里修改它的深层属性（比如this.props.user.age = 25），Vue里不用Vue.set或者展开运算符生成新对象的话，响应式系统检测不到变化；React里因为引用没变，组件不会重新渲染，方法里拿到的还是旧状态。

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