如何在Vue3.0 項目中使用TypeScript 和 Vite

如何在Vue3.0 項目中使用TypeScript 和 Vite？針對這個問題，這篇文章詳細介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

Vue的優(yōu)點

Vue具體輕量級框架、簡單易學、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗。

項目創(chuàng)建

npm:

$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

or yarn:

$ yarn create vite-app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev

項目結(jié)構(gòu)

main.js

在個人想法上，我覺得createApp()是vue應(yīng)用的實例，createApp支持鏈式調(diào)用

App.vue：

這是兼容vue2.0的語法，下面是vue3.0 rfc寫法（還處于實驗性階段）。
rfc官方說明

setup

data

setup是結(jié)合了vue2.0的created生命周期函數(shù)和data還有methods(后面會提到)

可直接 export 屬性(data)和方法(methods)

可以看出現(xiàn)在的name不是響應(yīng)式的，后面會介紹響應(yīng)式

methods

methods也是跟data一樣，直接export

效果：

Composition API

ref

聲明：

Ref可將一些基本屬性變成響應(yīng)式

reactive

上圖是reactive和ref混合使用，至于效果，請各自復制下方代碼體驗

<template>
 <div id="app">
 <div v-for="(item, index) in state.persons" :key="index">
  {{ item.name }}是{{ item.age }}歲
 </div>
 <div>
  <h4>修改zhangsan的年齡</h4>
  <input type="text" v-model="zAge" />
 </div>
 </div>
</template>

<script lang="ts" setup="props, {emit}">
import { reactive, ref } from 'vue'
export const zAge = ref(12)
export const state = reactive({
 persons: [
 {
  name: 'zhangsan',
  age: zAge
 },
 {
  name: 'lisi',
  age: 20
 }
 ]
})
</script>

computed

聲明：

效果：

watchEffect

聲明：

效果：

組件系統(tǒng)

全局注冊

App.vue

main.js

局部注冊

App.vue

setup

props

聲明props對象，在watchEffect中，console.log(props.msg)是可以看到父組件傳的值。props的默認值和過濾在研究中。具體作用參考vue2.0 props作用

context

組件上下文

emit

聲明emit函數(shù)，在setup="props, { emit }"要寫上emit，不然會報錯，具體作用參考vue2.0 emit作用。

這是使用emit函數(shù)的一些例子。

attrs

研究ing…

slots

研究ing…

vue指令

重點講v-model，其他vue指令與2.0一樣

v-model

vue3.0開始支持多個雙向綁定的參數(shù)，這是vue2.0沒有的，v-model后面沒有跟其他屬性的話，那么在這個組件內(nèi)部它的默認值是modelValue，如果想更新v-model，那么就需要emit('update:modelValue', data)去更新v-model的默認值modelValue。那么v-model后面有屬性的話(dragValue)，那么在這個組件內(nèi)部它的值就是這個屬性名(dragValue)，如果想更新v-model:dragValue的值，就需要emit('update:dragValue', data)去更新v-model自定義的值。

關(guān)于如何在Vue3.0 項目中使用TypeScript 和 Vite問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識。