快捷導(dǎo)航

詳解Vue3.0 + TypeScript + Vite初體驗(yàn)

更新時(shí)間：2021年02月22日 09:39:45 作者：未來(lái)的程序喵

這篇文章主要介紹了詳解Vue3.0 + TypeScript + Vite初體驗(yàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

項(xiàng)目創(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

項(xiàng)目結(jié)構(gòu)

在這里插入圖片描述

main.js

main.ts

在個(gè)人想法上，我覺(jué)得createApp()是vue應(yīng)用的實(shí)例，createApp支持鏈?zhǔn)秸{(diào)用

App.vue：

在這里插入圖片描述

這是兼容vue2.0的語(yǔ)法，下面是vue3.0 rfc寫(xiě)法（還處于實(shí)驗(yàn)性階段）。
rfc官方說(shuō)明

setup

data

在這里插入圖片描述

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

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

在這里插入圖片描述

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

methods

在這里插入圖片描述

methods也是跟data一樣，直接export

效果：

在這里插入圖片描述

Composition API

ref

聲明：

在這里插入圖片描述

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

在這里插入圖片描述

reactive

在這里插入圖片描述

上圖是reactive和ref混合使用，至于效果，請(qǐng)各自復(fù)制下方代碼體驗(yàn)

<template>
 <div id="app">
 <div v-for="(item, index) in state.persons" :key="index">
  {{ item.name }}是{{ item.age }}歲
 </div>
 <div>
  <h3>修改zhangsan的年齡</h3>
  <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)

全局注冊(cè)

App.vue

在這里插入圖片描述

main.js

在這里插入圖片描述

局部注冊(cè)

App.vue

在這里插入圖片描述

setup

props

在這里插入圖片描述

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

context

在這里插入圖片描述

組件上下文

emit

在這里插入圖片描述

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

在這里插入圖片描述

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

attrs

研究ing…

slots

研究ing…

vue指令

重點(diǎn)講v-model，其他vue指令與2.0一樣

v-model

在這里插入圖片描述

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

更多的用法參考官方的文檔：https://github.com/vuejs/rfcs/blob/sfc-improvements/active-rfcs/0000-sfc-script-setup.md

到此這篇關(guān)于詳解Vue3.0 + TypeScript + Vite初體驗(yàn)的文章就介紹到這了,更多相關(guān)Vue3.0 TypeScript Vite內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: