使用Vue3.0實例分析

本篇內容介紹了“使用Vue3.0實例分析”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

初始化環境

在前面的文章中，我們通過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命令初始化項目

1. 在第一步先選擇Manually select features，進行手動選擇功能

1. 然后通過Space和上下鍵依次選擇

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

4.然后回車

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

安裝依賴

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

配置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" }
       ]
     ]
   };

嘗試使用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 
        /></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 
        /></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。

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>

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秒后將億速云修改為 W3Cschool
    setTimeout(() => {
      state.name = "W3Cschool";
    }, 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.wz }}</div>
  </div>
</template>
<script>
import { reactive } from "vue";
export default {
  setup() {
    const state = reactive({
      name: "億速云"
    });
    // 5秒后新增屬性wz W3Cschool.cn
    setTimeout(() => {
      state.wz = "W3Cschool.cn";
    }, 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 wz = 'W3Cschool.cn'
// 寫法2
let userInfo = {
  name: '億速云',
  wz: 'W3Cschool.cn'
}

上面兩種不同的聲明方式，我們使用的時候也是不同的，對于寫法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為 W3Cschool
    setTimeout(() => {
      name.value = "W3Cschool";
    }, 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的區別。

在Vue2.0中使用v-model

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

在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>

2 . 在代碼中使用組件

<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示例

組件代碼

   <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>

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

在代碼中使用組件

<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實例分析”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！