使用Vue3.0實(shí)例分析

本篇內(nèi)容介紹了“使用Vue3.0實(shí)例分析”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

初始化環(huán)境

在前面的文章中，我們通過vite搭建了一個開發(fā)環(huán)境，但是實(shí)際上現(xiàn)在vite并沒有完善到支撐一個完整項(xiàng)目的地步，所以本文我們依然選擇使用vue-cli腳手架進(jìn)行環(huán)境搭建。

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

使用腳手架新建項(xiàng)目

1. 在工作空間打開終端(cmd),然后通過vue create my-vue3-test命令初始化項(xiàng)目

1. 在第一步先選擇Manually select features，進(jìn)行手動選擇功能

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預(yù)處理器選擇Less

6. eslint選擇ESLint + Prettier

7. 然后是Lint on save和In dedicater config files

8. 最后一路回車即可完成項(xiàng)目搭建

啟動項(xiàng)目

新建完項(xiàng)目之后，進(jìn)入到項(xiàng)目中cd my-vue3-test,然后執(zhí)行 yarn serve即可啟動項(xiàng)目

啟動之后即可通過訪問http://localhost:8080/訪問項(xiàng)目

配置ant design vue

在當(dāng)前Vue3.0正式版還未發(fā)布之際，國內(nèi)比較出名的前端UI庫中率先將Vue3.0繼承到自家的UI庫中的，PC端主要是ant-design-vue，移動端主要是vant, 本文所有示例代碼都會基于ant-design-vue來進(jìn)行，首先我們先安裝ant-design-vue

安裝依賴

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

配置ant-design-vue按需加載

進(jìn)入項(xiàng)目根目錄，然后打開babel.config.js文件，將里面的內(nèi)容修改為

   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>

然后重啟一下項(xiàng)目，就可以發(fā)現(xiàn)已經(jīng)可以正常使用ant-design-vue了。

Vue3.0新體驗(yàn)之setup

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

setup介紹

setup是Vue3.0提供的一個新的屬性，可以在setup中使用Composition API,在上面的示例代碼中我們已經(jīng)使用到了setup，在上文代碼中我們在setup中通過reactive初始化了一個響應(yīng)式數(shù)據(jù)，然后通過return返回了一個對象，對象中包含了聲明的響應(yīng)式數(shù)據(jù)和一個方法，而這些數(shù)據(jù)就可以直接使用到了template中了,就像上文代碼中的那樣。關(guān)于reactive，我將會在下一小節(jié)為你帶來說明。

setup 的參數(shù)說明

setup函數(shù)有兩個參數(shù)，分別是props和context。

props

props是setup函數(shù)的第一個參數(shù)，是組件外部傳入進(jìn)來的屬性，與vue2.0的props基本是一致的，比如下面代碼

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

但是需要注意的是，在setup中，props是不能使用解構(gòu)的，即不能將上面的代碼改寫成

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

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

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

context

context是setup函數(shù)的第二個參數(shù)，context是一個對象，里面包含了三個屬性，分別是

• attrs

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

• slots

slots對應(yīng)的是組件的插槽，與Vue2.0的this.$slots是對應(yīng)的,與props和attrs一樣，slots也是不能解構(gòu)的。

• emit

emit對應(yīng)的是Vue2.0的this.$emit, 即對外暴露事件。

setup 返回值

setup函數(shù)一般會返回一個對象，這個對象里面包含了組件模板里面要使用到的data與一些函數(shù)或者事件，但是setup也可以返回一個函數(shù)，這個函數(shù)對應(yīng)的就是Vue2.0的render函數(shù)，可以在這個函數(shù)里面使用JSX，對于Vue3.0中使用JSX，小編將在后面的系列文章中為您帶來更多說明。

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

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

在使用Vue2.0的時候，我們一般聲明組件的屬性都會像下面的代碼一樣

export  default {
  data() {
    return {
      name: '億速云',
      sex: '男'
    }
  }
}

然后就可以在需要用到的地方比如computed,watch,methods,template等地方使用，但是這樣存在一個比較明顯的問題，即我聲明data的地方與使用data的地方在代碼結(jié)構(gòu)中可能相距很遠(yuǎn)，有一種君住長江頭，我住長江尾，日日思君不見君，共飲一江水的感覺。而Composition API的誕生的一個很重要的原因就是解決這個問題。在尤大大在關(guān)于Composition API的動機(jī)中是這樣描述解決的問題的:

1. 隨著功能的增長，復(fù)雜組件的代碼變得越來越難以閱讀和理解。這種情況在開發(fā)人員閱讀他人編寫的代碼時尤為常見。根本原因是 Vue 現(xiàn)有的 API 迫使我們通過選項(xiàng)組織代碼，但是有的時候通過邏輯關(guān)系組織代碼更有意義。

2. 目前缺少一種簡潔且低成本的機(jī)制來提取和重用多個組件之間的邏輯。

現(xiàn)在我們先了解一下Compositon API中的reactive和ref

介紹reactive

在Vue2.6中， 出現(xiàn)了一個新的api,Vue.observer,通過這個api可以創(chuàng)建一個響應(yīng)式的對象，而reactive就和Vue.ovserver的功能基本是一致的。首先我們先來看一個例子

<template>
  <!--在模板中通過state.name使用setup中返回的數(shù)據(jù)-->
  <div>{{ state.name }}</div>
</template>
<script>
import { reactive } from "vue";
export default {
  setup() {
    // 通過reactive聲明一個可響應(yīng)式的對象
    const state = reactive({
      name: "億速云"
    });
    // 5秒后將億速云修改為 W3Cschool
    setTimeout(() => {
      state.name = "W3Cschool";
    }, 1000 * 5);
    // 將state添加到一個對象中然后返回
    return {
      state
    };
  }
};
</script>

上面的例子就是reactive的一個基本的用法，我們通過上面的代碼可以看到reactive和Vue.observer聲明可響應(yīng)式對象的方法是很像的，但是他們之間還是存在一些差別的。我們在使用vue2.0的時候，最常見的一個問題就是經(jīng)常會遇到一些數(shù)據(jù)明明修改了值，但是界面卻并沒有刷新，這時候就需要使用Vue.set來解決，這個問題是因?yàn)?code>Vue2.0使用的Object.defineProperty無法監(jiān)聽到某些場景比如新增屬性，但是到了Vue3.0中通過Proxy將這個問題解決了，所以我們可以直接在reactive聲明的對象上面添加新的屬性，一起看看下面的例子

<template>
  <div>
    <div>姓名:{{ state.name }}</div>
    <div>網(wǎng)站：{{ 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來解決新增屬性無法響應(yīng)的問題。

在上面的代碼中，reactive通過傳入一個對象然后返回了一個state,需要注意的是state與傳入的對象是不用的，reactive對原始的對象并沒有進(jìn)行修改，而是返回了一個全新的對象，返回的對象是Proxy的實(shí)例。需要注意的是在項(xiàng)目中盡量去使用reactive返回的響應(yīng)式對象，而不是原始對象。

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

介紹ref

假如現(xiàn)在我們需要在一個函數(shù)里面聲明用戶的信息，那么我們可能會有兩種不一樣的寫法

// 寫法1
let name = '億速云'
let wz = 'W3Cschool.cn'
// 寫法2
let userInfo = {
  name: '億速云',
  wz: 'W3Cschool.cn'
}

上面兩種不同的聲明方式，我們使用的時候也是不同的，對于寫法1我們直接使用變量就可以了，而對于寫法2，我們需要寫成userInfo.name的方式。我們可以發(fā)現(xiàn)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的區(qū)別

1. reactive傳入的是一個對象，返回的是一個響應(yīng)式對象，而ref傳入的是一個基本數(shù)據(jù)類型（其實(shí)引用類型也可以），返回的是傳入值的響應(yīng)式值

2. reactive獲取或修改屬性可以直接通過state.prop來操作，而ref返回值需要通過name.value的方式來修改或者讀取數(shù)據(jù)。但是需要注意的是，在template中并不需要通過.value來獲取值，這是因?yàn)?code>template中已經(jīng)做了解套。

在Vue3.0優(yōu)雅的使用v-model

v-model并不是vue3.0新推出的新特性，在Vue2.0中我們已經(jīng)大量的到了v-model,但是V3和V2還是有很大的區(qū)別的。本節(jié)我們將主要為大家?guī)砣绾卧?code>Vue3.0中使用v-model,Vue3.0中的v-model提供了哪些驚喜以及如何在Vue3.0中自定義v-model。

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

在Vue2.0中如何實(shí)現(xiàn)雙向數(shù)據(jù)綁定呢？常用的方式又兩種，一種是v-model，另一種是.sync,為什么會有兩種呢？這是因?yàn)橐粋€組件只能用于一個v-model，但是有的組件需要有多個可以雙向響應(yīng)的數(shù)據(jù)，所以就出現(xiàn)了.sync。在Vue3.0中為了實(shí)現(xiàn)統(tǒng)一，實(shí)現(xiàn)了讓一個組件可以擁有多個v-model，同時刪除掉了.sync。如下面的代碼，分別是Vue2.0與Vue3.0使用v-model的區(qū)別。

在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中也可以繼續(xù)使用`Vue2.0`的寫法
     data() {
       return {
         value: '',
       };
     },
   };
   </script>

在vue3.0中，v-model后面需要跟一個modelValue，即要雙向綁定的屬性名，Vue3.0就是通過給不同的v-model指定不同的modelValue來實(shí)現(xiàn)多個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中我們通過為組件設(shè)置名為value屬性同時觸發(fā)名為input的事件來實(shí)現(xiàn)的v-model，當(dāng)然也可以通過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中，因?yàn)橐粋€組件支持多個v-model，所以v-model的實(shí)現(xiàn)方式有了新的改變。首先我們不需要使用固定的屬性名和事件名了，在上例中因?yàn)槭?code>input輸入框，屬性名我們依然使用的是value，但是也可以是其他任何的比如name,data,val等等，而在值發(fā)生變化后對外暴露的事件名變成了update:value，即update:屬性名。而在調(diào)用組件的地方也就使用了v-model:屬性名來區(qū)分不同的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實(shí)例分析”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！