Vue3無廢話，快速上手

認識Vue3

1. Vue2 選項式 API vs Vue3 組合式API

<script>
export default {data(){return {count:0}},methods:{addCount(){this.count++}}
}
</script>

<script setup>
import { ref } from 'vue'
const count = ref(0)
const addCount = ()=> count.value++
</script>

特點：

1. 代碼量變少
2. 分散式維護變成集中式維護

2. Vue3的優勢

使用create-vue搭建Vue3項目

1. 認識create-vue

create-vue是Vue官方新的腳手架工具，底層切換到了 vite （下一代前端工具鏈），為開發提供極速響應

2. 使用create-vue創建項目

前置條件 - 已安裝16.0或更高版本的Node.js

執行如下命令，這一指令將會安裝并執行 create-vue

npm init vue@latest

熟悉項目和關鍵文件

組合式API - setup選項

1. setup選項的寫法和執行時機

寫法

<script>export default {setup(){},beforeCreate(){}}
</script>

執行時機

在beforeCreate鉤子之前執行

2. setup中寫代碼的特點

在setup函數中寫的數據和方法需要在末尾以對象的方式return，才能給模版使用

<script>export default {setup(){const message = 'this is message'const logMessage = ()=>{console.log(message)}// 必須return才可以return {message,logMessage}}}
</script>

3.

script標簽添加 setup標記，不需要再寫導出語句，默認會添加導出語句

<script setup>const message = 'this is message'const logMessage = ()=>{console.log(message)}
</script>

組合式API - reactive和ref函數

1. reactive

接受對象類型數據的參數傳入并返回一個響應式的對象

<script setup>// 導入import { reactive } from 'vue'// 執行函數 傳入參數 變量接收const state = reactive({msg:'this is msg'})const setSate = ()=>{// 修改數據更新視圖state.msg = 'this is new msg'}
</script><template>{{ state.msg }}<button @click="setState">change msg</button>
</template>

2. ref

接收簡單類型或者對象類型的數據傳入并返回一個響應式的對象

<script setup>// 導入import { ref } from 'vue'// 執行函數 傳入參數 變量接收const count = ref(0)const setCount = ()=>{// 修改數據更新視圖必須加上.valuecount.value++}
</script><template><button @click="setCount">{{count}}</button>
</template>

3. reactive 對比 ref

1. 都是用來生成響應式數據
2. 不同點
   1. reactive不能處理簡單類型的數據
   2. ref參數類型支持更好，但是必須通過.value做訪問修改
   3. ref函數內部的實現依賴于reactive函數
3. 在實際工作中的推薦
   1. 推薦使用ref函數，減少記憶負擔，小兔鮮項目都使用ref

組合式API - computed

計算屬性基本思想和Vue2保持一致，組合式API下的計算屬性只是修改了API寫法

<script setup>
// 導入
import {ref, computed } from 'vue'
// 原始數據
const count = ref(0)
// 計算屬性
const doubleCount = computed(()=>count.value * 2)// 原始數據
const list = ref([1,2,3,4,5,6,7,8])
// 計算屬性list
const filterList = computed(item=>item > 2)
</script>

組合式API - watch

偵聽一個或者多個數據的變化，數據變化時執行回調函數，倆個額外參數 immediate控制立刻執行，deep開啟深度偵聽

1. 偵聽單個數據

<script setup>// 1. 導入watchimport { ref, watch } from 'vue'const count = ref(0)// 2. 調用watch 偵聽變化watch(count, (newValue, oldValue)=>{console.log(`count發生了變化，老值為${oldValue},新值為${newValue}`)})
</script>

2. 偵聽多個數據

偵聽多個數據，第一個參數可以改寫成數組的寫法

<script setup>// 1. 導入watchimport { ref, watch } from 'vue'const count = ref(0)const name = ref('cp')// 2. 調用watch 偵聽變化watch([count, name], ([newCount, newName],[oldCount,oldName])=>{console.log(`count或者name變化了，[newCount, newName],[oldCount,oldName])})
</script>

3. immediate

在偵聽器創建時立即出發回調，響應式數據變化之后繼續執行回調

<script setup>// 1. 導入watchimport { ref, watch } from 'vue'const count = ref(0)// 2. 調用watch 偵聽變化watch(count, (newValue, oldValue)=>{console.log(`count發生了變化，老值為${oldValue},新值為${newValue}`)},{immediate: true})
</script>

4. deep

通過watch監聽的ref對象默認是淺層偵聽的，直接修改嵌套的對象屬性不會觸發回調執行，需要開啟deep

<script setup>// 1. 導入watchimport { ref, watch } from 'vue'const state = ref({ count: 0 })// 2. 監聽對象statewatch(state, ()=>{console.log('數據變化了')})const changeStateByCount = ()=>{// 直接修改不會引發回調執行state.value.count++}
</script><script setup>// 1. 導入watchimport { ref, watch } from 'vue'const state = ref({ count: 0 })// 2. 監聽對象state 并開啟deepwatch(state, ()=>{console.log('數據變化了')},{deep:true})const changeStateByCount = ()=>{// 此時修改可以觸發回調state.value.count++}
</script>

組合式API - 生命周期函數

1. 選項式對比組合式

2. 生命周期函數基本使用

1. 導入生命周期函數
2. 執行生命周期函數，傳入回調

<scirpt setup>
import { onMounted } from 'vue'
onMounted(()=>{// 自定義邏輯
})
</script>

3. 執行多次

生命周期函數執行多次的時候，會按照順序依次執行

<scirpt setup>
import { onMounted } from 'vue'
onMounted(()=>{// 自定義邏輯
})onMounted(()=>{// 自定義邏輯
})
</script>

組合式API - 父子通信

1. 父傳子

基本思想

1. 父組件中給子組件綁定屬性
2. 子組件內部通過props選項接收數據

2. 子傳父

基本思想

1. 父組件中給子組件標簽通過@綁定事件
2. 子組件內部通過 emit 方法觸發事件

組合式API - 模版引用

概念：通過 ref標識 獲取真實的 dom對象或者組件實例對象

1. 基本使用

實現步驟：

1. 調用ref函數生成一個ref對象
2. 通過ref標識綁定ref對象到標簽

2. defineExpose

默認情況下在

組合式API - provide和inject

1. 作用和場景

頂層組件向任意的底層組件傳遞數據和方法，實現跨層組件通信

2. 跨層傳遞普通數據

實現步驟

1. 頂層組件通過 provide 函數提供數據
2. 底層組件通過 inject 函數提供數據

3. 跨層傳遞響應式數據

在調用provide函數時，第二個參數設置為ref對象

4. 跨層傳遞方法

頂層組件可以向底層組件傳遞方法，底層組件調用方法修改頂層組件的數據

Vue3.3 新特性-defineOptions

背景說明：

有

但是用了

---

為了解決這一問題，引入了 defineProps 與 defineEmits 這兩個宏。但這只解決了 props 與 emits 這兩個屬性。

如果我們要定義組件的 name 或其他自定義的屬性，還是得回到最原始的用法——再添加一個普通的

這樣就會存在兩個

---

所以在 Vue 3.3 中新引入了 defineOptions 宏。顧名思義，主要是用來定義 Options API 的選項。可以用 defineOptions 定義任意的選項， props, emits, expose, slots 除外（因為這些可以使用 defineXXX 來做到）

Vue3.3新特性-defineModel

在Vue3中，自定義組件上使用v-model, 相當于傳遞一個modelValue屬性，同時觸發 update:modelValue 事件

我們需要先定義 props，再定義 emits 。其中有許多重復的代碼。如果需要修改此值，還需要手動調用 emit 函數。

于是乎 defineModel 誕生了。

生效需要配置 vite.config.js

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue({script: {defineModel: true}}),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})