專案建立

npm:

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

or yarn:

$ yarn create vite-app <pro程式設計客棧ject-name>
$ cd <project-name>
$ yarn
$ yarn dev

專案結構

main.js

在個人想法上，我覺得createApp()是vue應用的例項，createApp支援鏈式呼叫

App.vue：

這是相容vue2.0的語法，下面是vue3.0 rfc寫法（還處於實驗性階段）。

setup

data

setup是結合了vue2.0的created生命週期函式和data還有methods(後面會提到)

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

可以看出現在的name不是響應式的，後面會介紹響應式

methods

methods也是跟data一樣，直接export

效果：

Composition API

ref

宣告：

Ref可將一些基本屬性變成響應式

reactive

上圖是程式設計客棧reactive和ref混合使用，至於效果，請各自複製下方程式碼體驗

<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 } fro
 
程式設計客棧m 'vue'
export const zAge = ref(12)
export const state = reactive({
 persons: [
 {
  name: 'zhangsan',age: zAge
 },{
  name: 'lisi',age: 20
 }
 ]
})
</script>

computed

宣告：

效果：

watchEffect

宣告：

效果：

元件系統

全域性註冊

App.vue

main.js

區域性註冊

App.vue

setup

props

宣告props物件，在watchEffect中，console.log(props.msg)是可以看到父元件傳的值。props的預設值和過濾在研究中。具體作用參考vue2.0 props作用

context

元件上下文

emit

宣告emit函式，在setup="props,{ emit }"要寫上emit，不然會報錯，具體作用參考vue2.0 emit作用。

這是使用emit函式的一些例子。

attrs

研究ing…

slots

研究ing…

vue指令

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

v-model

vue3.0開始支援多個雙向繫結的引數，這是vue2.0沒有的，v-model後面沒有跟其他屬性的話，那麼在這個元件內部它的預設值是modelValue，如果想更新v-model，那麼就需要emit('update:modelValue',data)去更新v-model的預設值modehttp://www.cppcns.comlValue。那麼v-model後面有屬性的話(dragValue)，那麼在這個元件內部它的值就是這個屬性名(dragValue)，如果想更新v-model:dragValue的值，就需要emit('update:dragValue',data)去更新vRboqGZzX-model自定義的值。

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

到此這篇關於詳解Vue3.0 + TypeScript + Vite初體驗的文章就介紹到這了,更多相關Vue3.0 TypeScript Vite內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！