Vue组件根据view prop映射赋值currentView不生效如何解决

你的代码无法正常运行的核心问题是：Vue的watch默认仅在被监听的值发生后续变更时才会触发回调，组件初始化阶段不会自动执行。如果组件首次挂载时父组件传入的view prop初始值就是people或者robots，你写在watch里的赋值逻辑根本不会运行，currentView会一直保持初始的空对象状态。
另外你把视图映射表写在watch回调内部，每次触发监听都会重复创建相同对象，存在不必要的性能浪费。

方法1：给watch添加immediate配置 #

给view的监听加上immediate: true，让回调在组件初始化时就立即执行一次，覆盖初始赋值场景：

export default {
  props: {
    view: {
      type: String,
      required: true,
    },
  },
  watch: {
    view: {
      immediate: true, // 初始化时立即执行一次回调
      handler(val) {
        const viewOptions = {
          people: {
            array: this.peopleArray,
            name: 'People world',
          },
          robots: {
            array: this.robotArray,
            name: 'Robot world',
          },
        };
        this.currentView = viewOptions[val];
        console.log(this.currentView.array)
      },
    },
  },
  data(){
    return{
     peopleArray: ['Sam', 'Rob'],
     robotArray: ['Wall-E', 'R2D2'],
     currentView: {}
   }
 }
}

方法2：用计算属性替代watch存储派生状态（推荐） #

currentView是完全依赖view prop生成的派生状态，没必要单独放在data里维护，用计算属性实现更简洁，会自动响应依赖更新，完全不存在初始化漏执行的问题：

export default {
  props: {
    view: {
      type: String,
      required: true,
    },
  },
  data(){
    return{
     peopleArray: ['Sam', 'Rob'],
     robotArray: ['Wall-E', 'R2D2'],
   }
 },
 computed: {
   currentView() {
     const viewOptions = {
       people: {
         array: this.peopleArray,
         name: 'People world',
       },
       robots: {
         array: this.robotArray,
         name: 'Robot world',
       },
     };
     // 加兜底避免传入非法view值时报错
     return viewOptions[this.view] || {};
   }
 }
}

修复后，当view prop值为people时，currentView.array就能正确取到peopleArray，对应的name属性就是预期的People world。

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