design php 如何使用ant_使用Vue3.0，我收穫了哪些知識點（一）
技術標籤：design php 如何使用ant
前端發展百花放，一技未熟百技出。 茫然不知何下手，關注小編勝百書。
近期工作感覺很忙，都沒有多少時間去寫文章，今天這篇文章主要是將自己前期學習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進行安裝
使用腳手架新建專案
在工作空間開啟終端(
cmd),然後通過vue create my-vue3-test命令初始化專案在第一步先選擇
Manually select features，進行手動選擇功能然後通過
Space和上下鍵依次選擇Choose Vue version
Babel
TypeScript
Router
Vuex
CSS Pre-processors
Linter/Formatter然後回車
- 然後提示選擇
Vue版本，選擇3.x(Preview) Use class-style component syntax?選擇n,即輸入n然後回車- 然後提示
Use Babel alongside TypeScript,輸入y` Use history mode for router輸入n- 然後
css前處理器選擇Less eslint選擇ESLint + Prettier- 然後是
Lint on save和In dedicater config files - 最後一路回車即可完成專案搭建
- 然後提示選擇
啟動專案
新建完專案之後，進入到專案中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 [email protected]
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 style="color:rgba(0,0,0,.25)"
/>template>
a-input>
a-form-item>
<a-form-item>
<a-inputv-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-buttontype="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。
propsprops是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>contextcontext是setup函式的第二個引數，context是一個物件，裡面包含了三個屬性，分別是
attrsattrs與Vue2.0的this.$attrs是一樣的，即外部傳入的未在props中定義的屬性。對於attrs與props一樣，我們不能對attrs使用es6的解構，必須使用attrs.name的寫法slotsslots對應的是元件的插槽，與Vue2.0的this.$slots是對應的,與props和attrs一樣，slots也是不能解構的。emitemit對應的是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的動機中是這樣描述解決的問題的:
- 隨著功能的增長，複雜元件的程式碼變得越來越難以閱讀和理解。這種情況在開發人員閱讀他人編寫的程式碼時尤為常見。根本原因是 Vue 現有的 API 迫使我們通過選項組織程式碼，但是有的時候通過邏輯關係組織程式碼更有意義。
- 目前缺少一種簡潔且低成本的機制來提取和重用多個元件之間的邏輯。
現在我們先了解一下Compositon API中的reactive和ref
介紹reactive
在Vue2.6中， 出現了一個新的api,Vue.observer,通過這個api可以建立一個響應式的物件，而reactive就和Vue.ovserver的功能基本是一致的。首先我們先來看一個例子
<template>
<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宣告的物件上面新增新的屬性，一起看看下面的例子
<div><div>姓名:{{ state.name }}div><div>公眾號：{{ state.gzh }}div>div>
</template>