Vue3 + TypeScript 開發總結

阿新 • • 發佈：2021-08-26

Vue3 + TypeScript 學習

一，環境配置

1.1 安裝最新 Vue 腳手架

npm install -g @vue/cli
yarn global add @vue/cli

1.2 建立Vue3 專案

vue create projectName

1.3 現有Vue 2 專案升級到 Vue3

vue add typescript

二，進擊Vue3

2. 1 Vue 2 侷限性

隨著元件與元件依賴之間不斷變大，元件很難讀取和維護
沒有完美的方法解決跨元件程式碼重用

2.2 Vue 3 如何解決Vue 2 侷限

元件難以維護管理

【在Vue3 中編寫組合函式，使用 Compositon Api setUp 來解決】

沒有完美的方法解決跨元件程式碼重用

三，Vue3 Composition Ap i

3.1 關於 Composition Api

在Vue3中，也可以不使用 Composition Api 來編寫元件，它只是在Vue3 中編寫元件中的另一種方法，內部簡化了好多操作。

所以你還可以繼續使用 Vue2 的方式來編寫元件。

3.2 什麼時候使用Composition Api

TypeScript` 的支援
編寫大型元件時，可以使用 Composition Api

組合函式很好的管理狀態
跨元件重用程式碼時

四，Composition Api 必備基礎

4.1 什麼是 setup

setup 是用來配置元件狀態的另一種實現。

在setup 中定義的狀態，方法要想在模板中使用，必須 return

注意：

setup 方法是在 components,props data Methods Computed Lifecycle methods 之前執行
同時在 setup 中是不能訪問 this

4.2 ref 建立響應式變數

在 Vue2 中，我們定義一個響應式變數可以直接在 data 中定義並且在模板中使用該變數。如果使用的 composition api 的話，我們得在 setup 中使用 ref 來建立響應式變數，並且得將它返回，才能在頁面中使用。

使用：

引入 ref import { ref } from 'vue'
初始變數 const name = ref('指定預設值')
返回變數 return { name } 在return中還可以返回方法
在 setup 中訪問定義的變數值，不能直接通過變數名來獲取，必須通過變數名.value 來獲取到該物件、值

這樣的好處：

狀態好管理，可以劃分好幾個 setup 狀態管理，最後在一個檔案匯入所有，並且使用。

<template>
    <div>
        <h1>{{title}}</h1>
    </div>
</template>

<script>
import {ref,defineComponent} from 'vue'
export default defineComponent({
    setup () {
        // 定義響應式變數
        const title = ref('前端自學社群')
        
          // 訪問該變數
        console.log(title.value)
        // 返回變數
        return {title}
    }
})
</script>

4.3 生命週期

Composition Api 生命週期鉤子和 Vue 2 選項式生命週期鉤子名稱一樣，只是在使用組合式API 時，字首為 on,onMounted`

下面程式碼中有兩個 mounted 生命鉤子，你猜哪個會先執行？

setup 會先執行

setup () {
        // 定義響應式變數
        const title = ref('前端自學社群')
        console.log(title)
        // 返回變數
        function getTitle(){
            console.log(title.value)
        }
        // 頁面在載入
        onMounted(getTitle)
        return {title}
    },mounted() {
        console.log('測試 mounted 執行順序')
    },

4.4 watch

在 setup 中使用 watch響應式更改

1.引入 watch， import { watch } from 'vue'

2.直接使用watch，watch 接受 3 個引數

要監聽更新的響應式引用或者 getter 函式
一個回撥用來做更新後的操作
可選配置項

import {wathc} from 'vue'

// 定義響應式變數
const num = ref(0)
// 更新響應式變數
function  changeNum(){
            n客棧um.value++
}

// wathc 監聽響應式變數
watch(
 num,(newValue,oldValue) => {
 console.log(`newValue為：${newValue},--------oldValue為：${oldValue}`)
   }
 )

4.5 computed

它也是從 vue 匯入，computed 函式返回一個作為 computed 的第一個引數傳遞的 getter 類回撥的輸出的一個只讀的響應式引用。為了訪問新建立的計算變數的 value，我們需要像使用 ref 一樣使用 .value property。

當num值變化時，nums 的值會 *3

import {ref,computed} from 'vue';

const num = ref(0)

//更新num
function  changeNum(){http://www.cppcns.com
   num.value++
 }
//監聽num變化
 const nums = computed(() =>{
  return num.value * 3
 })

五，setup

5.1 接受兩個引數

props : 父元件傳遞過來的屬性,setup` 函式中 props 是響應式的，它會隨著資料更新而更新，並且不能使用 ES6 解構，因為它會不能使 props 為響應式。

context : 它是一個普通的物件，它暴露3個元件的 property

Attribute
插槽
觸發事件

context 不是響應式的，所以可以使用ES6 解構來簡便寫法。

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 時注意

在元件執行 setup 時，元件例項沒有被建立，因此就無法訪問以下屬性

data
computed
methods

六，生命週期

在 setup 中使用生命週期時，字首必須加 on.

Vue3 + TypeScript 開發總結

七，跨元件之間傳值

在 Vue 2 中，我們可以使用 Provide/Inject 跨元件傳值，在 Vue 3 中也可以。

在 setup 中使用，必須從 vue 中匯入使用。

使用 Provide 時，一般設定為響應式更新的，這樣的話，父元件變更，子元件，子孫元件也跟著更新。

怎麼設定為響應式更新呢？

使用 ref / reactive 建立響應式變數
使用 provide('name','要傳遞的響應式變數')
最後新增一個更新響應式變數的事件，這樣響應式變數更新， provide 中的變數也跟著更新。

父元件:

import { provide,defineComponent,ref,reactive } from "vue";

<template>
  
  <Son/>
  
</template>


<script>
    import { provide,reactive } from "vue";
    export default defineComponent({
    setup() {
            const father = ref("我父元件");
    const info = reactive({
      id: 23,message: "前端自學社群",});
    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,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 的特性，型別斷言 + 介面完美的對屬性進行了約束

interface

分頁查詢欄位屬性型別驗證：

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 元件選項中的型別

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 開發總結的詳細內容，更多關於Vue3 + TypeScript的資料請關注我們其它相關文章！

Vue3 + TypeScript 開發總結

目錄

Vue3 + TypeScript 學習

一， 環境配置

1.1 安裝最新 Vue 腳手架

1.2 建立Vue3 專案

二， 進擊Vue3

2. 1 Vue 2 侷限性

2.2 Vue 3 如何解決Vue 2 侷限

三，Vue3 Composition Ap i

3.1 關於 Composition Api

3.2 什麼時候使用Composition Api

四，Composition Api 必備基礎

4.2 ref 建立響應式變數

4.3 生命週期

4.4 watch

4.5 computed

五，setup

5.1 接受兩個引數

六，生命週期

七， 跨元件之間傳值

八， 在Vue 中 使用 TypeScirpt 技巧

8.1 介面約束約束屬性

8.2 元件使用 來 defineComponent 定義

相關推薦

一，環境配置

二，進擊Vue3

七，跨元件之間傳值

八，在Vue 中使用 TypeScirpt 技巧

8.2 元件使用來 defineComponent 定義