VueJS中如何用常量复用表单默认值？现有方案失效求解决

我来帮你搞定这个表单重置的问题——你之前的方案失效，核心原因是JavaScript对象是引用类型：当你直接把DEFAULT_FORM_STATE赋值给this.form时，两者指向的是内存里的同一个对象。用户修改表单输入时，DEFAULT_FORM_STATE会被悄悄修改，等到重置时再赋值这个对象，自然看不到预期的重置效果。

下面是几个简单可行的方案，任选其一都能解决你的问题：

方案一：使用展开运算符创建对象副本 #

通过ES6的展开运算符...，每次都生成一个新的对象实例，避免引用同一内存地址：

const DEFAULT_FORM_STATE = {
  isbn: '',
  title: '',
  author: '',
  description: '',
  creationDate: ''
};

export default {
  data () {
    return {
      // 展开默认对象，创建新的表单对象
      form: { ...DEFAULT_FORM_STATE }
    }
  },
  methods: {
    onReset (evt) {
      evt.preventDefault();
      // 重置时同样生成新副本
      this.form = { ...DEFAULT_FORM_STATE };
    }
  }
}

方案二：用Object.assign创建新对象 #

原理和展开运算符一致，通过Object.assign把默认对象的属性拷贝到新的空对象中：

const DEFAULT_FORM_STATE = {
  isbn: '',
  title: '',
  author: '',
  description: '',
  creationDate: ''
};

export default {
  data () {
    return {
      form: Object.assign({}, DEFAULT_FORM_STATE)
    }
  },
  methods: {
    onReset (evt) {
      evt.preventDefault();
      this.form = Object.assign({}, DEFAULT_FORM_STATE);
    }
  }
}

方案三：封装成函数返回默认值（推荐） #

把默认值定义成一个函数，每次调用都返回全新的对象实例，逻辑更直观：

// 定义返回默认表单对象的函数
const getDefaultFormState = () => ({
  isbn: '',
  title: '',
  author: '',
  description: '',
  creationDate: ''
});

export default {
  data () {
    return {
      form: getDefaultFormState()
    }
  },
  methods: {
    onReset (evt) {
      evt.preventDefault();
      this.form = getDefaultFormState();
    }
  }
}

补充说明 #

如果你的表单对象包含嵌套对象（比如user: { name: '', age: '' }），上面的浅拷贝就不够用了，这时可以用JSON.parse(JSON.stringify(DEFAULT_FORM_STATE))来实现深拷贝。不过你的场景里都是简单字符串类型，浅拷贝完全能满足需求。

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