form操作清空

以下是vue2的写法
mixins/clean.js文件下

let clean = {
    data(){
        return{
            originalData:{},// 存起来的数据
            second:false,// 是否第二次
        }
    },
    // 异步数据获取后，将获取的数据存起来，updated生命周期可以保证拿到的是最新的数据
    updated(){
        // 如果是第一次进入而且已经在调用的组件created生命周期获取到了后端数据
        if(!this.second && this.$options.created) {
            this.second = true;// 确认更新后只走这次
            this.originalData = JSON.parse(JSON.stringify(this.$data))// 将获取的数据进行深拷贝存在originalData，深拷贝防止引用关系
        }
    },
    methods:{
        // 重置数据为初始状态
        clean(){
            // this.form = this.$options.data().form // form被固定，不通用
            Object.assign(this.$data,this.$options.data())// 将数据data重置
        },
        recover(){
            // this.form = JSON.parse(JSON.stringify(this.originalData)) // form被固定，不通用
            Object.assign(this.$data,JSON.parse(JSON.stringify(this.originalData)))// 将form数据返回到获取 后端数据的状态
        }
    }
}
export default clean;

调用的vue文件：

<template>
  <h1>{{ msg }}</h1>
  <button @click="count++">count is: {{ count }}</button>
  用户：<input type="text" v-model="form.username"/>
  密码：<input type="text" v-model="form.password"/>
  <hr/>
  <button @click="clean">清空</button>
  <button @click="recover">恢复返回的数据</button>
</template>

<script>
import clean from '../mixin/clean'
export default {
  name: 'HelloWorld',
  mixin:[clean],
  props: {
    msg: String
  },
  data() {
    return {
      count: 0,
      form:{
        username:'',
        password:'',
      }
    }
  },
  created(){
    setTimeout(()=>{
      this.form={
        username:'小郑',
        password:'123456'
      }
    },1000)
  },
  methods:{
  }
}
</script>

不过Object.assign(this.$data,this.$options.data())这种方式直接复原了整个data，比如这里的count，累加后还是被清除了0，所以这个只适合用在data只有form的情况，
不过我们在开发中，还是可以广泛用下面这句重置form

this.form = this.$options.data().form