面试题：Vue中如何实现表单重置并设置初始值

Question

在Vue项目中，给定一个包含多个输入框（文本框、单选框、复选框等）的表单，使用Vue的双向数据绑定已经实现了数据与表单的关联。请描述如何实现表单重置功能，使其恢复到初始值状态，并且阐述设置初始值的几种常见方式。

Answer 1

实现表单重置功能使其恢复到初始值状态的方法

1. 利用data中的初始数据重置：
   • 在Vue实例的data中，已经定义了与表单绑定的数据。例如：

   data() {
       return {
           username: '',
           password: '',
           gender: 'male',
           hobbies: []
       };
   }
   

   • 可以在重置按钮的点击事件中，将表单数据重新赋值为data中的初始值。假设模板中有一个重置按钮：

   <template>
       <form>
           <input v - model="username" type="text">
           <input v - model="password" type="password">
           <input type="radio" v - model="gender" value="male">Male
           <input type="radio" v - model="gender" value="female">Female
           <input type="checkbox" v - model="hobbies" value="reading">Reading
           <input type="checkbox" v - model="hobbies" value="swimming">Swimming
           <button @click="resetForm">Reset</button>
       </form>
   </template>
   <script>
   export default {
       data() {
           return {
               username: '',
               password: '',
               gender: 'male',
               hobbies: []
           };
       },
       methods: {
           resetForm() {
               this.username = '';
               this.password = '';
               this.gender ='male';
               this.hobbies = [];
           }
       }
   };
   </script>
   

2. 使用Object.assign()方法：
   • 先在data中定义一个备份的初始数据对象。例如：

   data() {
       return {
           formData: {
               username: '',
               password: '',
               gender:'male',
               hobbies: []
           },
           initialFormData: {
               username: '',
               password: '',
               gender:'male',
               hobbies: []
           }
       };
   }
   

   • 在重置方法中使用Object.assign()将备份数据复制回formData：

   methods: {
       resetForm() {
           Object.assign(this.formData, this.initialFormData);
       }
   }
   

3. 使用$set和$options.data()：
   • 可以通过this.$options.data()获取Vue实例data函数返回的初始数据对象，然后使用this.$set来更新数据。例如：

   methods: {
       resetForm() {
           const initialData = this.$options.data();
           Object.keys(initialData).forEach(key => {
               this.$set(this, key, initialData[key]);
           });
       }
   }
   

设置初始值的几种常见方式

1. 在data中直接定义：
   • 这是最常见的方式，在data函数返回的对象中直接为表单绑定的数据设置初始值。如上面例子中的username、password等初始值设置：

   data() {
       return {
           username: '',
           password: '',
           gender:'male',
           hobbies: []
       };
   }
   

2. 从父组件传递：
   • 如果该表单是一个子组件，父组件可以通过props向子组件传递初始值。
   • 子组件定义props接收初始值：

   export default {
       props: {
           initialUsername: {
               type: String,
               default: ''
           }
       },
       data() {
           return {
               username: this.initialUsername
           };
       }
   };
   

   • 父组件在使用子组件时传递初始值：

   <template>
       <child - component :initial - username="parentUsername"></child - component>
   </template>
   <script>
   import ChildComponent from './ChildComponent.vue';
   export default {
       components: {
           ChildComponent
       },
       data() {
           return {
               parentUsername: 'defaultUsername'
           };
       }
   };
   </script>
   

3. 从本地存储或后端获取：
   • 从本地存储获取：在created钩子函数中，从本地存储读取数据并设置为初始值。例如：

   created() {
       const storedUsername = localStorage.getItem('username');
       this.username = storedUsername || '';
   }
   

   • 从后端获取：在created或mounted钩子函数中，通过API调用获取后端数据并设置为初始值。例如，使用axios：

   import axios from 'axios';
   export default {
       data() {
           return {
               userInfo: {}
           };
       },
       mounted() {
           axios.get('/api/userInfo')
              .then(response => {
                   this.userInfo = response.data;
               });
       }
   };