Vue3 + TypeScript 開發(fā)總結(jié)
Vue3 + TypeScript 學(xué)習(xí)
一， 環(huán)境配置
1.1 安裝最新 Vue 腳手架
npm install -g @vue/cli yarn global add @vue/cli
1.2 創(chuàng)建Vue3 項(xiàng)目
vue create projectName
1.3 現(xiàn)有Vue 2 項(xiàng)目 升級到 Vue3
vue add typescript
二， 進(jìn)擊Vue3
2. 1 Vue 2 局限性
- 隨著組件與組件依賴之間不斷變大，組件很難讀取和維護(hù)
- 沒有完美的方法解決跨組件代碼重用
2.2 Vue 3 如何解決Vue 2 局限
- 組件難以維護(hù)管理
【在Vue3 中 編寫組合函數(shù)，使用 Compositon Api setUp 來解決】
- 沒有完美的方法解決跨組件代碼重用
三，Vue3 Composition Ap i
3.1 關(guān)于 Composition Api
在Vue3中，也可以不使用 Composition Api 來編寫組件，它只是在Vue3 中編寫組件中的另一種方法，內(nèi)部簡化了好多操作。
所以你還可以繼續(xù)使用 Vue2 的方式來 編寫 組件。
3.2 什么時候使用Composition Api
TypeScript` 的支持
編寫大型組件時，可以使用 Composition Api 組合函數(shù)很好的管理狀態(tài)
跨組件重用代碼時
四，Composition Api 必備基礎(chǔ)
4.1 什么是 setup
setup 是用來配置組件狀態(tài)的另一種實(shí)現(xiàn)。
在setup 中定義的狀態(tài)，方法要想在模板中使用，必須 return
注意：
- setup 方法是在 components , props data Methods Computed Lifecycle methods 之前執(zhí)行
- 同時在 setup 中是不能訪問 this
4.2 ref 創(chuàng)建響應(yīng)式變量
在 Vue2 中，我們定義一個響應(yīng)式變量可以直接在 data 中 定義并且在模板中使用該變量。 如果 使用的 composition api 的話，我們得在 setup 中 使用 ref 來創(chuàng)建 響應(yīng)式變量，并且得將它返回，才能在頁面中使用。
使用：
- 引入 ref import { ref } from 'vue'
- 初始變量 const name = ref('指定默認(rèn)值')
- 返回變量 return { name } 在return中還可以返回方法
- 在 setup 中 訪問 定義的變量值，不能直接通過變量名來獲取， 必須通過 變量名.value 來獲取到該對象 、 值
這樣的好處：
- 狀態(tài)好管理，可以劃分好幾個 setup 狀態(tài)管理，最后在一個 文件導(dǎo)入所有，并且使用。
<template>
<div>
<h1>{{title}}</h1>
</div>
</template>
<script>
import {ref,defineComponent} from 'vue'
export default defineComponent({
setup () {
// 定義響應(yīng)式變量
const title = ref('前端自學(xué)社區(qū)')
// 訪問該變量
console.log(title.value)
// 返回變量
return {title}
}
})
</script>
4.3 生命周期
Composition Api 生命周期鉤子 和 Vue 2 選項(xiàng)式 生命周期 鉤子名稱一樣，只是在使用 組合式API 時，前綴為 on , onMounted`
下面代碼中有兩個 mounted 生命鉤子，你猜哪個會先執(zhí)行？
setup 會先執(zhí)行
setup () {
// 定義響應(yīng)式變量
const title = ref('前端自學(xué)社區(qū)')
console.log(title)
// 返回變量
function getTitle(){
console.log(title.value)
}
// 頁面在加載
onMounted(getTitle)
return {title}
},
mounted() {
console.log('測試 mounted 執(zhí)行順序')
},
4.4 watch
在 setup 中使用 watch響應(yīng)式更改
1.引入 watch， import { watch } from 'vue'
2.直接使用watch，watch 接受 3 個參數(shù)
- 要監(jiān)聽更新的 響應(yīng)式引用或者 getter 函數(shù)
- 一個回調(diào)用來做更新后的操作
- 可選配置項(xiàng)
import {wathc} from 'vue'
// 定義響應(yīng)式變量
const num = ref(0)
// 更新響應(yīng)式變量
function changeNum(){
num.value++
}
// wathc 監(jiān)聽響應(yīng)式變量
watch(
num,(newValue, oldValue) => {
console.log(`newValue為：${newValue},--------oldValue為：${oldValue}`)
}
)
4.5 computed
它也是 從 vue 導(dǎo)入，computed 函數(shù)返回一個作為 computed 的第一個參數(shù)傳遞的 getter 類回調(diào)的輸出的一個只讀的響應(yīng)式引用。為了訪問新創(chuàng)建的計算變量的 value，我們需要像使用 ref 一樣使用 .value property。
當(dāng)num值變化時，nums 的值會 *3
import {ref,computed} from 'vue';
const num = ref(0)
//更新num
function changeNum(){
num.value++
}
//監(jiān)聽num變化
const nums = computed(() =>{
return num.value * 3
})
五，setup
5.1 接受兩個參數(shù)
props : 父組件傳遞過來的屬性, setup` 函數(shù)中 props 是響應(yīng)式的，它會隨著數(shù)據(jù)更新而更新，并且不能使用 ES6 解構(gòu)，因?yàn)樗鼤荒苁?props 為響應(yīng)式。
context : 它是一個普通的 對象，它暴露3個組件的· property
- Attribute
- 插槽
- 觸發(fā)事件
context 不是 響應(yīng)式的，所以可以使用ES6 解構(gòu)來簡便寫法。
props:{
obj:{
type:Object
}
},
setup (props,{attrs,slots,emit}) {
console.log(attrs)
console.log(slots)
console.log(emit)
console.log(props.obj)
}
5.2 組件加載 setup 時注意
在組件執(zhí)行 setup 時， 組件實(shí)例沒有被創(chuàng)建，因此就無法訪問以下屬性
- data
- computed
- methods
六，生命周期
在 setup 中使用 生命周期時，前綴必須加 on.
七， 跨組件之間傳值
在 Vue 2 中，我們可以使用 Provide/Inject 跨組件傳值，在 Vue 3 中也可以。
在 setup 中 使用，必須從 vue 中導(dǎo)入使用。
使用 Provide 時，一般設(shè)置為 響應(yīng)式更新的，這樣的話，父組件變更，子組件，子孫組件也跟著更新。
怎么設(shè)置為響應(yīng)式更新呢？
- 使用 ref / reactive 創(chuàng)建響應(yīng)式變量
- 使用 provide('name', '要傳遞的響應(yīng)式變量')
- 最后添加一個更新 響應(yīng)式變量的事件，這樣響應(yīng)式變量更新， provide 中的變量也跟著更新。
父組件:
import { provide, defineComponent, ref, reactive } from "vue";
<template>
<Son/>
</template>
<script>
import { provide, defineComponent, ref, reactive } from "vue";
export default defineComponent({
setup() {
const father = ref("我父組件");
const info = reactive({
id: 23,
message: "前端自學(xué)社區(qū)",
});
function changeProvide(){
info.message = '測試'
}
provide('father',father)
provide('info',info)
return {changeProvide};
}
})
</script>
子組件：
<template>
<div>
<h1>{{info.message}}</h1>
<h1>{{fatherData}}</h1>
</div>
</template>
<script>
import {provide, defineComponent,ref,reactive, inject} from 'vue'
export default defineComponent({
setup () {
const fatherData = inject('father')
const info = inject('info')
return {fatherData,info}
}
})
</script>
八， 在Vue 中 使用 TypeScirpt 技巧
8.1 接口約束約束屬性
采用 TypeScirpt 的特性， 類型斷言 + 接口 完美的對 屬性進(jìn)行了 約束
interface
分頁查詢 字段屬性類型驗(yàn)證：
export default interface queryType{
page: Number,
size: Number,
name: String,
age: Number
}
組件中使用：
import queryType from '../interface/Home'
data() {
return {
query:{
page:0,
size:10,
name:'測試',
age: 2
} as queryType
}
},
8.2 組件使用 來 defineComponent 定義
這樣 TypeScript 正確推斷 Vue 組件選項(xiàng)中的類型
import { defineComponent } from 'vue'
export default defineComponent({
setup(){
return{ }
}
})
8.3 類型聲明 reactive
export default interface Product {
name:String,
price:Number,
address:String
}
import Product from '@/interface/Product'
import {reactive} from 'vue'
const product = reactive({name:'xiaomi 11',price:5999,address:'北京'}) as Product
return {fatherData,info,product}
以上就是Vue3 + TypeScript 開發(fā)總結(jié)的詳細(xì)內(nèi)容，更多關(guān)于Vue3 + TypeScript的資料請關(guān)注腳本之家其它相關(guān)文章！
- 詳解Vue3.0 前的 TypeScript 最佳入門實(shí)踐
- 淺談Vue3.0之前你必須知道的TypeScript實(shí)戰(zhàn)技巧
- Vue3結(jié)合TypeScript項(xiàng)目開發(fā)實(shí)戰(zhàn)記錄
- 基于Vue3+TypeScript實(shí)現(xiàn)圖片預(yù)覽組件
- 關(guān)于Vue3&TypeScript的踩坑匯總
- Vue3項(xiàng)目中配置TypeScript和JavaScript的兼容
- Vue3+TypeScript封裝axios并進(jìn)行請求調(diào)用的實(shí)現(xiàn)
- 基于vue3+TypeScript實(shí)現(xiàn)一個簡易的Calendar組件
- TypeScript基礎(chǔ)知識和在Vue3中的應(yīng)用（簡單上手，快速入門教程）
相關(guān)文章
vue 倒計時結(jié)束跳轉(zhuǎn)頁面實(shí)現(xiàn)代碼
在商場大家經(jīng)?？吹酵＼囀召M(fèi)倒計時支付頁面,今天小編通過本文給大家分享vue 倒計時結(jié)束跳轉(zhuǎn)頁面功能,感興趣的朋友一起看看吧2023-10-10
element?plus如何為表格某列數(shù)據(jù)文字設(shè)置顏色樣式
實(shí)習(xí)工作需要根據(jù)表格的狀態(tài)字段來設(shè)置列的樣式,所以這篇文章主要給大家介紹了關(guān)于element?plus如何為表格某列數(shù)據(jù)文字設(shè)置顏色樣式的相關(guān)資料,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了vue-cli3添加模式配置多環(huán)境變量的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
vue如何實(shí)現(xiàn)pc和移動端布局詳細(xì)代碼
這篇文章主要給大家介紹了關(guān)于vue如何實(shí)現(xiàn)pc和移動端布局的相關(guān)資料, Vue響應(yīng)式布局適配是一種根據(jù)設(shè)備特性自動調(diào)整布局的方法,文中通過代碼以及圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
在本篇文章里小編給大家分享了關(guān)于vue中各種通信傳值方式的相關(guān)知識點(diǎn)，有興趣的朋友們學(xué)習(xí)下。2019-02-02
利用Vue.js+Node.js+MongoDB實(shí)現(xiàn)一個博客系統(tǒng)（附源碼）
本文主要介紹了利用Vue.js+Node.js+MongoDB實(shí)現(xiàn)一個博客系統(tǒng)，這個博客使用Vue做前端框架，Node+express做后端，數(shù)據(jù)庫使用的是MongoDB。實(shí)現(xiàn)了用戶注冊、用戶登錄、博客管理、文章編輯、標(biāo)簽分類等功能，需要的朋友可以參考學(xué)習(xí)。2017-04-04
對Vue- 動態(tài)元素屬性及v-bind和v-model的區(qū)別詳解
今天小編就為大家分享一篇對Vue- 動態(tài)元素屬性及v-bind和v-model的區(qū)別詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue js格式化數(shù)字為金額格式代碼，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue實(shí)現(xiàn)預(yù)覽docx/xlsx/pdf等類型文件功能
這篇文章主要介紹了如何在Vue中實(shí)現(xiàn)docx/xlsx/pdf等類型文件預(yù)覽功能,在實(shí)現(xiàn)過程中，需要注意文件的格式和轉(zhuǎn)換方式，以及插件和組件的使用方法和注意事項(xiàng)，需要的朋友可以參考下2023-05-05
這篇文章主要介紹了vue中的虛擬dom知識點(diǎn)總結(jié)，文章圍繞主題內(nèi)容展開詳細(xì)介紹，需要的小伙伴可以參考一下，希望對你的學(xué)習(xí)有所幫助2022-04-04