第一版單個(gè)表單實(shí)現(xiàn)功能并一步步優(yōu)化

通過一步步代碼的優(yōu)化，實(shí)現(xiàn)清空重置功能，盡量做到抽離后，可以直接復(fù)用，不需要修改任何變量名

先實(shí)現(xiàn)一版，單個(gè)表單組件的清空和重置功能，此時(shí) form1 組件可以實(shí)現(xiàn)parent.vue父組件中調(diào)用 form1 和 form2

<template>
  <div>
    <form1 />
    <hr />
    <form2 />
  </div>
</template>
<script>
  import form1 from "@/components/form1.vue";
  import form2 from "@/components/form2.vue";
  export default {
    components: {
      form1,
      form2,
    },
  };
</script>

form1.vue

<template>
  <div>
    用戶名：<input type="text" v-model="form1.username" /> 昵稱：<input
      type="text"
      v-model="form1.nickname"
    />
    <button @click="clean">清空</button>
    <button @click="recover">重置</button>
  </div>
</template>
<script>
  export default {
    created() {
      // 模擬發(fā)送請求 更改數(shù)據(jù)
      setTimeout(() => {
        this.form1 = { username: "admin", nickname: "echo" };
        this.original = JSON.parse(JSON.stringify(this.$data)); // 備份數(shù)據(jù)
      }, 1000);
    },
    data() {
      return {
        form1: { username: "", nickname: "" },
      };
    },
    methods: {
      clean() {
        // 最容易想到的實(shí)現(xiàn) 1. 屬性名固定不利于復(fù)用和維護(hù)
        //   this.form1 = {
        //     username: "",
        //     nickname: "",
        //   };

        //   框架提供了this.$option 可以獲取到data中定義的屬性
        //   this.form1 = this.$options.data().form1; // 進(jìn)階：2. 可以做到清空，但不建議，避免直接操作自定義的屬性，便于方法抽離和復(fù)用

        //   this.$data = this.$options.data(); // 報(bào)錯(cuò)：避免修改根實(shí)例的data屬性的指向，可以通過覆蓋屬性來替換
        Object.assign(this.$data, this.$options.data()); // 最終 3. 使用覆蓋屬性，而不是直接改變對象的指向
      },
      recover() {
        //   this.form1 = JSON.parse(JSON.stringify(this.original)); // 最容易想到的實(shí)現(xiàn) 1. 避免直接操作自定義的屬性
        //   this.$data = JSON.parse(JSON.stringify(this.original)); // error 不能修改根實(shí)例的data屬性的指向
        Object.assign(this.$data, JSON.parse(JSON.stringify(this.original))); // 最終 2. 使用覆蓋屬性，
      },
    },
  };
</script>

公共方法抽離 mixins 混入

如果 form2 中，同樣想要實(shí)現(xiàn) form1 中的清空和重置功能，就可以將公共的部分抽取成mixins進(jìn)行混入

抽離的公共方法文件formOperation.js,(此文件中取消了優(yōu)化過程和注釋)

export default {
  methods: {
    save() {
      this.original = JSON.parse(JSON.stringify(this.$data));
    },
    clean() {
      Object.assign(this.$data, this.$options.data());
    },
    recover() {
      Object.assign(this.$data, JSON.parse(JSON.stringify(this.original)));
    },
  },
};

終版 form1 和 form2 組件實(shí)現(xiàn)

此時(shí) form1 中的代碼簡化為：

<template>
  <div>
    用戶名：<input type="text" v-model="form1.username" /> 昵稱：<input
      type="text"
      v-model="form1.nickname"
    />
    <button @click="clean">清空</button>
    <button @click="recover">重置</button>
  </div>
</template>
<script>
  import formOperation from "../mixins/formOperation";
  export default {
    mixins: [formOperation],
    created() {
      setTimeout(() => {
        this.form1 = { username: "admin", nickname: "echo" };
        this.save();
      }, 1000);
    },
    data() {
      return {
        form1: { username: "", nickname: "" },
      };
    },
  };
</script>

此時(shí) form2 中的代碼簡化為：其中表單數(shù)據(jù)中的屬性名可以隨意定義，而抽取的公共方法，不需要進(jìn)行任務(wù)的修改，同樣可以實(shí)現(xiàn)上述功能文章來源地址http://www.zghlxwxcb.cn/news/detail-691050.html

<template>
  <div>
    用戶名：<input type="text" v-model="form2.a" /> 昵稱：<input
      type="text"
      v-model="form2.b"
    />
    <button @click="clean">清空</button>
    <button @click="recover">重置</button>
  </div>
</template>
<script>
  import formOperation from "../mixins/formOperation";
  export default {
    mixins: [formOperation],
    created() {
      setTimeout(() => {
        this.form2 = { a: "test", b: "yya" };
        this.save();
      }, 1000);
    },
    data() {
      return {
        form2: { a: "", b: "" },
      };
    },
  };
</script>