重启Vue组件时如何将Object类型的prop重置为默认值？

• 基础类型（字符串、数字等）是值传递，每次组件重新初始化时都会生成新的默认值，因此关闭再打开namey会自动重置。
• 对象/数组是引用类型，你当前直接给subject的default配置写死了对象字面量，这个对象只会在组件全局注册时创建1次，所有nameinput实例共享同一个引用，修改后的值会一直保存在这个对象里，就算组件销毁重建也不会恢复初始值。这是Vue官方明确提示的注意点，对象/数组类型的prop默认值必须用工厂函数返回。

方案1：修改prop默认值为工厂函数（最小改动修复） #

仅需修改subject的默认值写法，改为函数返回新对象，每次组件实例化都会生成独立的默认对象：

Vue.component('nameinput', {
  props: {
    subject:{
      type: Object,
      // 改为工厂函数返回新对象
      default: function () {
        return {
          name: 'homor'
        }
      }
    },
    namey: {
      type: String,
      default: 'homor'
    }
  },
  // 其余代码保持不变
  data: function (){
    return {
    }
  },
  template: '<div>subject.name<input v-model="subject.name" type="input" /><br/>namey<input v-model="namey" type="input" /></div>'
});

方案2：组件内部做状态中转（符合单向数据流规范，推荐生产环境使用） #

直接用v-model修改prop本身不符合Vue单向数据流设计原则，会有隐性的状态变更问题，建议组件内部维护本地状态，修改仅作用于本地变量：

Vue.component('nameinput', {
  props: {
    subject:{
      type: Object,
      default: function () {
        return {
          name: 'homor'
        }
      }
    },
    namey: {
      type: String,
      default: 'homor'
    }
  },
  data: function (){
    return {
      // 初始化时深拷贝prop的值到本地状态
      localSubject: JSON.parse(JSON.stringify(this.subject)),
      localNamey: this.namey
    }
  },
  template: '<div>subject.name<input v-model="localSubject.name" type="input" /><br/>namey<input v-model="localNamey" type="input" /></div>'
});

修复后每次关闭再打开组件，subject.name都会自动重置为默认值。

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