使用Vue3.0，我收穫了哪些知識點（一）

前端發展百花放，一技未熟百技出。
茫然不知何下手，關注小編勝百書。

近期工作感覺很忙，都沒有多少時間去寫文章，今天這篇文章主要是將自己前期學習Vue3.0時候整理的一些筆記內容進行了彙總，通過對本文的閱讀，你將可以自己完成Vue3.0環境搭建，同時還會對Vue3.0的一些新的特性進行了解，方便自己進行Vue3.0的學習。本文首發於公眾號【前端有的玩】，關注===會了，還有更多面試題等你來刷哦。

本文所有的示例均使用ant design vue2.0實現，關於ant design vue2.0請參考 https://2x.antdv.com/docs/vue/introduce-cn/

初始化環境

在前面的文章中，我們通過vite搭建了一個開發環境，但是實際上現在vite並沒有完善到支撐一個完整專案的地步，所以本文我們依然選擇使用vue-cli腳手架進行環境搭建。

小編使用的vue-cli版本是4.5.4,如果您的版本比較舊可以通過npm update @vue/cli來升級腳手架版本，如果沒有安裝可以通過npm install @vue/cli -g進行安裝

使用腳手架新建專案

1. 在工作空間開啟終端(cmd),然後通過vue create my-vue3-test 命令初始化專案
2. 在第一步先選擇Manually select features，進行手動選擇功能

3. 然後通過Space和上下鍵依次選擇

   Choose Vue version
   Babel
   TypeScript
   Router
   Vuex
   CSS Pre-processors
   Linter/Formatter

   然後回車

   1. 然後提示選擇Vue版本，選擇3.x(Preview)
   2. Use class-style component syntax?選擇n,即輸入n然後回車
   3. 然後提示Use Babel alongside TypeScript,輸入y`
   4. Use history mode for router輸入n
   5. 然後css前處理器選擇Less
   6. eslint選擇ESLint + Prettier
   7. 然後是Lint on save和In dedicater config files
   8. 最後一路回車即可完成專案搭建

啟動專案

新建完專案之後，進入到專案中cd my-vue3-test,然後執行 yarn serve即可啟動專案

啟動之後即可通過訪問 http://localhost:8080/ 訪問專案

配置ant design vue

在當前Vue3.0正式版還未釋出之際，國內比較出名的前端UI庫中率先將Vue3.0整合到自家的UI庫中的，PC端主要是ant-design-vue，移動端主要是vant, 本文所有示例程式碼都會基於ant-design-vue來進行，首先我們先安裝ant-design-vue

1. 安裝依賴

   yarn add ant-design-vue@2.0.0-beta.6
   yarn add babel-plugin-import -D

2. 配置ant-design-vue按需載入

   進入專案根目錄，然後開啟babel.config.js檔案，將裡面的內容修改為

   module.exports = {
     presets: ["@vue/cli-plugin-babel/preset"],
     plugins: [
       // 按需載入
       [
         "import",
         // style 為 true 載入 less檔案
         { libraryName: "ant-design-vue", libraryDirectory: "es", style: "css" }
       ]
     ]
   };

3. 嘗試使用vue3 + antdv來新增一個小頁面, 我們直接將views/Home.vue檔案裡面的程式碼替換為

<template>
  <a-form layout="inline" :model="state.form">
    <a-form-item>
      <a-input v-model:value="state.form.user" placeholder="Username">
        <template v-slot:prefix
          ><UserOutlined style="color:rgba(0,0,0,.25)"
        /></template>
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-input
        v-model:value="state.form.password"
        type="password"
        placeholder="Password"
      >
        <template v-slot:prefix
          ><LockOutlined style="color:rgba(0,0,0,.25)"
        /></template>
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-button
        type="primary"
        :disabled="state.form.user === '' || state.form.password === ''"
        @click="handleSubmit"
      >
        登入
      </a-button>
    </a-form-item>
  </a-form>
</template>
<script>
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { Form, Input, Button } from "ant-design-vue";
import { reactive } from "vue";

export default {
  components: {
    UserOutlined,
    LockOutlined,
    [Form.name]: Form,
    [Form.Item.name]: Form.Item,
    [Input.name]: Input,
    [Button.name]: Button
  },
  setup() {
    const state = reactive({
      form: {
        user: "",
        password: ""
      }
    });

    function handleSubmit() {
      console.log(state.form);
    }

    return {
      state,
      handleSubmit
    };
  }
};
</script>

然後重啟一下專案，就可以發現已經可以正常使用ant-design-vue了。

Vue3.0新體驗之setup

對於Vue3.0的問世，最吸引大家注意力的便是Vue3.0的Composition API，對於Componsition API，可以說是兩極分化特別嚴重，一部分人特別喜歡這個新的設計與開發方式，而另一部分人則感覺使用Composition API很容易寫出來義大利麵式的程式碼（可能這部分人不知道蘭州拉麵吧）。到底Composition API是好是壞，小編不做評論，反正我只是一個搬磚的。而本小節介紹的setup就是Composition API的入口。

setup介紹

setup是Vue3.0提供的一個新的屬性，可以在setup中使用Composition API,在上面的示例程式碼中我們已經使用到了setup，在上文程式碼中我們在setup中通過reactive初始化了一個響應式資料，然後通過return返回了一個物件，物件中包含了宣告的響應式資料和一個方法，而這些資料就可以直接使用到了template中了,就像上文程式碼中的那樣。關於reactive，我將會在下一小節為你帶來說明。

setup 的引數說明

setup函式有兩個引數，分別是props和context。

1. props

   props是setup函式的第一個引數，是元件外部傳入進來的屬性，與vue2.0的props基本是一致的，比如下面程式碼

   export default {
     props: {
       value: {
         type: String,
         default: ""
       }
     },
     setup(props) {
       console.log(props.value)
     }
   }

   但是需要注意的是，在setup中，props是不能使用解構的，即不能將上面的程式碼改寫成

   setup({value}) {
       console.log(value)
    }

   雖然template中使用的是setup返回的物件，但是對於props，我們不需要在setup中返回，而是直接可以在template使用，比如上面的value，可以直接在template寫成

   <custom-component :value="value"></custom-component>

2. context

   context是setup函式的第二個引數，context是一個物件，裡面包含了三個屬性，分別是

   • attrs

     attrs與Vue2.0的this.$attrs是一樣的，即外部傳入的未在props中定義的屬性。對於attrs與props一樣，我們不能對attrs使用es6的解構，必須使用attrs.name的寫法

   • slots

     slots對應的是元件的插槽，與Vue2.0的this.$slots是對應的,與props和attrs一樣，slots也是不能解構的。

   • emit

     emit對應的是Vue2.0的this.$emit, 即對外暴露事件。

setup 返回值

setup函式一般會返回一個物件，這個物件裡面包含了元件模板裡面要使用到的data與一些函式或者事件，但是setup也可以返回一個函式，這個函式對應的就是Vue2.0的render函式，可以在這個函式裡面使用JSX，對於Vue3.0中使用JSX，小編將在後面的系列文章中為您帶來更多說明。

最後需要注意的是，不要在setup中使用this，在setup中的this和你真正要用到的this是不同的，通過props和context基本是可以滿足我們的開發需求的。

瞭解Composition API，先從reactive和ref開始

在使用Vue2.0的時候，我們一般宣告元件的屬性都會像下面的程式碼一樣

export default {
  data() {
    return {
      name: '子君',
      sex: '男'
    }
  }
}

然後就可以在需要用到的地方比如computed,watch,methods,template等地方使用，但是這樣存在一個比較明顯的問題，即我宣告data的地方與使用data的地方在程式碼結構中可能相距很遠，有一種君住長江頭，我住長江尾，日日思君不見君，共飲一江水的感覺。而Composition API的誕生的一個很重要的原因就是解決這個問題。在尤大大在關於Composition API的動機中是這樣描述解決的問題的:

1. 隨著功能的增長，複雜元件的程式碼變得越來越難以閱讀和理解。這種情況在開發人員閱讀他人編寫的程式碼時尤為常見。根本原因是 Vue 現有的 API 迫使我們通過選項組織程式碼，但是有的時候通過邏輯關係組織程式碼更有意義。
2. 目前缺少一種簡潔且低成本的機制來提取和重用多個元件之間的邏輯。

現在我們先了解一下Compositon API中的reactive和ref

介紹reactive

在Vue2.6中， 出現了一個新的api,Vue.observer,通過這個api可以建立一個響應式的物件，而reactive就和Vue.ovserver的功能基本是一致的。首先我們先來看一個例子

<template>
  <!--在模板中通過state.name使用setup中返回的資料-->
  <div>{{ state.name }}</div>
</template>
<script>
import { reactive } from "vue";
export default {
  setup() {
    // 通過reactive宣告一個可響應式的物件
    const state = reactive({
      name: "子君"
    });
    // 5秒後將子君修改為 前端有的玩
    setTimeout(() => {
      state.name = "前端有的玩";
    }, 1000 * 5);
    // 將state新增到一個物件中然後返回
    return {
      state
    };
  }
};
</script>

上面的例子就是reactive的一個基本的用法，我們通過上面的程式碼可以看到reactive和Vue.observer宣告可響應式物件的方法是很像的，但是他們之間還是存在一些差別的。我們在使用vue2.0的時候，最常見的一個問題就是經常會遇到一些資料明明修改了值，但是介面卻並沒有重新整理，這時候就需要使用Vue.set來解決，這個問題是因為Vue2.0使用的Object.defineProperty無法監聽到某些場景比如新增屬性，但是到了Vue3.0中通過Proxy將這個問題解決了，所以我們可以直接在reactive宣告的物件上面新增新的屬性，一起看看下面的例子

<template>
  <div>
    <div>姓名:{{ state.name }}</div>
    <div>公眾號：{{ state.gzh }}</div>
  </div>
</template>
<script>
import { reactive } from "vue";
export default {
  setup() {
    const state = reactive({
      name: "子君"
    });
    // 5秒後新增屬性gzh 前端有的玩
    setTimeout(() => {
      state.gzh = "前端有的玩";
    }, 1000 * 5);
    return {
      state
    };
  }
};
</script>

上面的例子雖然在state中並沒有宣告gzh屬性，但是在5s後我們可以直接給state新增gzh屬性，這時候並不需要使用Vue.set來解決新增屬性無法響應的問題。

在上面的程式碼中，reactive通過傳入一個物件然後返回了一個state,需要注意的是state與傳入的物件是不用的，reactive對原始的物件並沒有進行修改，而是返回了一個全新的物件，返回的物件是Proxy的例項。需要注意的是在專案中儘量去使用reactive返回的響應式物件，而不是原始物件。

const obj = {}
const state = reactive(obj)
// 輸出false
console.log(obj === state)

介紹ref

假如現在我們需要在一個函式裡面宣告使用者的資訊，那麼我們可能會有兩種不一樣的寫法

// 寫法1
let name = '子君'
let gzh = '前端有的玩'
// 寫法2
let userInfo = {
  name: '子君',
  gzh: '前端有的玩'
}

上面兩種不同的宣告方式，我們使用的時候也是不同的，對於寫法1我們直接使用變數就可以了，而對於寫法2，我們需要寫成userInfo.name的方式。我們可以發現userInfo的寫法與reactive是比較相似的，而Vue3.0也提供了另一種寫法，就像寫法1一樣，即ref。先來看一個例子。

<template>
  <div>
    <div>姓名:{{ name }}</div>
  </div>
</template>
<script>
import { ref } from "vue";
export default {
  setup() {
    const name = ref("子君");
    console.log('姓名',name.value)
    // 5秒後修改name為 前端有的玩
    setTimeout(() => {
      name.value = "前端有的玩";
    }, 1000 * 5);
    return {
      name
    };
  }
};
</script>

通過上面的程式碼，可以對比出來reactive與ref的區別

1. reactive傳入的是一個物件，返回的是一個響應式物件，而ref傳入的是一個基本資料型別（其實引用型別也可以），返回的是傳入值的響應式值
2. reactive獲取或修改屬性可以直接通過state.prop來操作，而ref返回值需要通過name.value的方式來修改或者讀取資料。但是需要注意的是，在template中並不需要通過.value來獲取值，這是因為template中已經做了解套。

在Vue3.0優雅的使用v-model

v-model並不是vue3.0新推出的新特性，在Vue2.0中我們已經大量的到了v-model,但是V3和V2還是有很大的區別的。本節我們將主要為大家帶來如何在Vue3.0中使用v-model,Vue3.0中的v-model提供了哪些驚喜以及如何在Vue3.0中自定義v-model。

在Vue2.0和Vue3.0中使用v-model

在Vue2.0中如何實現雙向資料繫結呢？常用的方式又兩種，一種是v-model，另一種是.sync,為什麼會有兩種呢？這是因為一個元件只能用於一個v-model，但是有的元件需要有多個可以雙向響應的資料，所以就出現了.sync。在Vue3.0中為了實現統一，實現了讓一個元件可以擁有多個v-model，同時刪除掉了.sync。如下面的程式碼，分別是Vue2.0與Vue3.0使用v-model的區別。

1. 在Vue2.0中使用v-model

   <template>
     <a-input v-model="value" placeholder="Basic usage" />
   </template>
   <script>
   export default {
     data() {
       return {
         value: '',
       };
     },
   };
   </script>

2. 在Vue3.0中使用v-model

   <template>
     <!--在vue3.0中，v-model後面需要跟一個modelValue，即要雙向繫結的屬性名-->
     <a-input v-model:value="value" placeholder="Basic usage" />
   </template>
   <script>
   export default {
     // 在Vue3.0中也可以繼續使用`Vue2.0`的寫法
     data() {
       return {
         value: '',
       };
     },
   };
   </script>

   在vue3.0中，v-model後面需要跟一個modelValue，即要雙向繫結的屬性名，Vue3.0就是通過給不同的v-model指定不同的modelValue來實現多個v-model。對於v-model的原理，下文將通過自定義v-model來說明。

自定義v-model

使用Vue2.0自定義一個v-model示例

1. 元件程式碼

<template>
  <div class="custom-input">
    <input :value="value" @input="$_handleChange" />
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  methods: {
    $_handleChange(e) {
      this.$emit('input', e.target.value)
    }
  }
}
</script>

1. 在程式碼中使用元件

   <template>
       <custom-input v-model="value"></custom-input>
   </template>
   <script>
       export default {
       data() {
         return {
           value: ''
         }
       }
     }
   </script>

   在Vue2.0中我們通過為元件設定名為value屬性同時觸發名為input的事件來實現的v-model，當然也可以通過model來修改屬性名和事件名，可以看我以前的文章中有詳解。

使用Vue3.0自定義一個v-model示例

1. 元件程式碼

   <template>
     <div class="custom-input">
       <input :value="value" @input="_handleChangeValue" />
     </div>
   </template>
   <script>
   export default {
     props: {
       value: {
         type: String,
         default: ""
       }
     },
     name: "CustomInput",
     setup(props, { emit }) {
       function _handleChangeValue(e) {
         // vue3.0 是通過emit事件名為 update:modelValue來更新v-model的
         emit("update:value", e.target.value);
       }
       return {
         _handleChangeValue
       };
     }
   };
   </script>
   

   1. 在程式碼中使用元件

      <template>
        <!--在使用v-model需要指定modelValue-->
        <custom-input v-model:value="state.inputValue"></custom-input>
      </template>
      <script>
      import { reactive } from "vue";
      import CustomInput from "../components/custom-input";
      export default {
        name: "Home",
        components: {
          CustomInput
        },
        setup() {
          const state = reactive({
            inputValue: ""
          });
          return {
            state
          };
        }
      };
      </script>

到了Vue3.0中，因為一個元件支援多個v-model，所以v-model的實現方式有了新的改變。首先我們不需要使用固定的屬性名和事件名了，在上例中因為是input輸入框，屬性名我們依然使用的是value，但是也可以是其他任何的比如name,data,val等等，而在值發生變化後對外暴露的事件名變成了update:value，即update:屬性名。而在呼叫元件的地方也就使用了v-model:屬性名來區分不同的v-model。

總結

在本文中我們主要講解了開發環境的搭建，setup,reactive,ref,v-model等的介紹，同時通過對比Vue3.0與Vue2.0的不同，讓大家對Vue3.0有了一定的瞭解，在下文中我們將為大家帶來更多的介紹，比如技術屬性，watch,生命週期等等，敬請期待。本文首發於公眾號【前端有的玩】，學習Vue,面試刷題，盡在【前端有的玩】，`乘興裸辭心甚爽，面試工作屢遭難。
幸得每日一題伴，點選關注莫偷懶。`，下週一新文推送，不見不散。

結語

不要吹滅你的靈感和你的想象力; 不要成為你的模型的奴隸。 ——文森特・梵高