記錄--【vue3】寫hook三天，治好了我的組件封裝強迫癥。

這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

前言

我以前很喜歡封裝組件，什么東西不喜歡別人的，總喜歡自己搞搞，這讓人很有成就感，雖然是重復造輪子，但是能從無聊的crud業務中暫時解脫出來，對我來說也算是一種休息，相信有很多人跟我一樣有這個習慣， 這種習慣在獨立開發時無所謂，畢竟沒人會關心你咋實作的，但是在跟人合作時就給別人造成了很大的困擾了，畢竟每個人封裝的東西都是根據自己習慣來的，別人看著多少會有點不順眼，而且自己封裝的組件大概率也是沒有寫檔案和注釋的，所以專案其他成員的使用率也不會太高，所以今天，我試著解決這個問題， 另外，我還在一些群里看到有人抱怨vue3不如vue2好用，主要是適應不了setup寫法，希望這篇博客能改變你的看法，

怎么用hook改造我的組件

關于hook是什么之類的介紹，我這就不贅述了，請看這篇文章淺談：為啥vue和react都選擇了Hooks??？， 前言中說到重復造輪子的組件，除開一些毫無必要的重復以外，有一些功能組件確實需要封裝一下，比如說，一些需要請求后端字典到前端展示的下來選擇框，點擊之后要展示loading狀態的按鈕，帶有查詢條件的表單，這些非常常用的業務場景，我們就可以封裝成組件，但是封裝成組件就會遇到前面說的問題，每個人的使用習慣和封裝習慣不一樣，很難讓每個人都滿意，這種場景，就可以讓hook來解決，

普通實作

就拿字典選擇下拉框來說，如果不做封裝，我們是這樣寫的 （這里拿ant-design-vue組件庫來做示例）

<script setup name="DDemo" lang="ts">
  import { onMounted, ref } from 'vue';

  //   模擬呼叫介面
  function getRemoteData() {
    return new Promise<any[]>((resolve) => {
      setTimeout(() => {
        resolve([
          {
            key: 1,
            name: '蘋果',
            value: 1,
          },
          {
            key: 2,
            name: '香蕉',
            value: 2,
          },
          {
            key: 3,
            name: '橘子',
            value: 3,
          },
        ]);
      }, 3000);
    });
  }
  
  const optionsArr = ref<any[]>([]);

  onMounted(() => {
    getRemoteData().then((data) => {
      optionsArr.value = https://www.cnblogs.com/smileZAZ/archive/2023/02/08/data;
    });
  });
</script>