(創(chuàng)作不易，感謝有你，你的支持，就是我前行的最大動力，如果看完對你有幫助，請留下您的足跡）
目錄
使用create-vue創(chuàng)建項目
熟悉項目目錄和關(guān)鍵文件?
組合式API?
setup選項
setup選項的寫法和執(zhí)行時機(jī)
script setup?語法糖
reactive和ref函數(shù)
reactive()
ref()
computed
watch
偵聽單個數(shù)據(jù)
偵聽多個數(shù)據(jù)?
immediate?
deep
精確偵聽對象的某個屬性?
生命周期函數(shù)
Vue3的生命周期API （選項式 VS 組合式）
父子通信?
組合式API下的父傳子
組合式API下的子傳父?
模版引用?
如何使用（以獲取dom為例 組件同理）
defineExpose()?
使用create-vue創(chuàng)建項目
1. 前提環(huán)境條件已安裝 16.0 或更高版本的 Node.jsnode -v2. 創(chuàng)建一個Vue應(yīng)用npm init vue@latest這一指令將會安裝并執(zhí)行 create-vue
熟悉項目目錄和關(guān)鍵文件?
關(guān)鍵文件：1. vite.config.js - 項目的配置文件 基于vite的配置2. package.json - 項目包文件 核心依賴項變成了 Vue3.x 和 vite3. main.js - 入口文件 createApp函數(shù)創(chuàng)建應(yīng)用實例4. app.vue - 根組件 SFC單文件組件 script - template - style????????變化一：腳本script和模板template順序調(diào)整????????變化二：模板template不再要求唯一根元素????????變化三：腳本script添加setup標(biāo)識支持組合式API5. index.html - 單頁入口 提供id為app的掛載點
組合式API?
setup選項
setup選項的寫法和執(zhí)行時機(jī)
? ??
1. 執(zhí)行時機(jī)，比beforeCreate還要早
2. setup函數(shù)中，獲取不到this (this是undefined)
<script>
// setup
// 1. 執(zhí)行時機(jī)，比beforeCreate還要早
// 2. setup函數(shù)中，獲取不到this (this是undefined)
export default {
setup () {
console.log('setup函數(shù)',this)
},
beforeCreate () {
console.log('beforeCreate函數(shù)')
}
}
</script>網(wǎng)頁顯示為：? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
3. 數(shù)據(jù) 和 函數(shù)，需要在 setup 最后 return，才能模板中應(yīng)用
<script>
export default {
setup () {
// 數(shù)據(jù)
const message = 'hello Vue3'
// 函數(shù)
const logMessage = () => {
console.log(message)
}
return {
message,
logMessage
}
}
}
</script>
<template>
<div>{{ message }}</div>
<button @click="logMessage">按鈕</button>
</template>
script setup?語法糖
問題：每次都要return，好麻煩？
4. 通過 setup 語法糖簡化代碼
<script setup>
const message = 'this is a message'
const logMessage = () => {
console.log(message)
}
</script>
<template>
<div>{{ message }}</div>
<button @click="logMessage">按鈕</button>
</template>reactive和ref函數(shù)
reactive()
作用： 接受 對象類型數(shù)據(jù)的參數(shù)傳入 并返回一個 響應(yīng)式的對象核心步驟：
1. 從 vue 包中 導(dǎo)入 reactive 函數(shù)2. 在 <script setup> 中 執(zhí)行 reactive 函數(shù) 并傳入 類型為對象 的初始值，并使用變量接收返回值
<script setup>
//1. reactive: 接收一個對象類型的數(shù)據(jù)，返回一個響應(yīng)式的對象
import { reactive } from 'vue'
const state = reactive({
count: 100
})
const setCount = () => {
state.count++
}
</script>
<template>
<div>
<div>{{ state.count }}</div>
<button @click="setCount">+1</button>
</div>
</template>ref()
作用： 接收 簡單類型或者對象類型的數(shù)據(jù) 傳入 并返回一個 響應(yīng)式的對象本質(zhì)：是在原有傳入數(shù)據(jù)的基礎(chǔ)上，外層包了一層對象，包成了復(fù)雜類型
? ?????????底層，包成復(fù)雜類型之后，再借助 reactive 實現(xiàn)的響應(yīng)式
注意點：
? ?????????1. 腳本中訪問數(shù)據(jù)，需要通過 .value
? ?????????2. 在template中，.value不需要加 (幫我們扒了一層)
核心步驟：
1. 從 vue 包中 導(dǎo)入 ref 函數(shù)2. 在 <script setup> 中 執(zhí)行 ref 函數(shù) 并傳入初始值，使用 變量接收 ref 函數(shù)的返回值
<script setup>
import { ref } from 'vue'
const count = ref(0)
const setCount = () => {
count.value++
}
</script>
<template>
<div>
<div>{{ count }}</div>
<button @click="setCount">+1</button>
</div>
</template>computed
計算屬性基本思想和Vue2的完全一致， 組合式API下的計算屬性 只是修改了寫法核心步驟：1. 導(dǎo)入 computed函數(shù)2. 執(zhí)行函數(shù) 在回調(diào)參數(shù)中 return基于響應(yīng)式數(shù)據(jù)做計算的值 ，用 變量接收
<script setup>
import{computed,ref}from 'vue'
const list=ref([1,2,3,4,5,6,7,8])
const computedList = computed(()=>{
return list.value.filter(item=>item>2)
})
</script>
<template>
<div>
<div>原始數(shù)據(jù): {{ list }}</div>
<div>計算后的數(shù)據(jù): {{ computedList }}</div>
</div>
</template>awatch
作用: 偵聽 一個或者多個數(shù)據(jù) 的變化，數(shù)據(jù)變化時執(zhí)行回調(diào)函數(shù)倆個額外參數(shù)：1. immediate（立即執(zhí)行） 2. deep（深度偵聽）
偵聽單個數(shù)據(jù)
1. 導(dǎo)入watch 函數(shù)2. 執(zhí)行watch函數(shù) 傳入要偵聽的響應(yīng)式數(shù)據(jù) (ref對象) 和回調(diào)函數(shù)
偵聽多個數(shù)據(jù)?
同時偵聽多個響應(yīng)式數(shù)據(jù)的變化， 不管哪個數(shù)據(jù)變化都需要執(zhí)行回調(diào)
immediate?
在偵聽器創(chuàng)建時立即觸發(fā)回調(diào), 響應(yīng)式數(shù)據(jù)變化之后繼續(xù)執(zhí)行回調(diào)
deep
通過watch監(jiān)聽的ref對象默認(rèn)是 淺層偵聽的，直接修改嵌套的對象屬性不會觸發(fā)回調(diào)執(zhí)行 ，需要開啟deep選項
<script setup>
import{watch,ref}from 'vue'
// 4. deep 深度監(jiān)視, 默認(rèn) watch 進(jìn)行的是 淺層監(jiān)視
// const ref1 = ref(簡單類型) 可以直接監(jiān)視
// const ref2 = ref(復(fù)雜類型) 監(jiān)視不到復(fù)雜類型內(nèi)部數(shù)據(jù)的變化
const userInfo = ref({
name: 'zs',
age: 18
})
const setUserInfo = () => {
// 修改了 userInfo.value 修改了對象的地址，才能監(jiān)視到
// userInfo.value = { name: 'ls', age: 50 }
userInfo.value.age++
}
// deep 深度監(jiān)視
watch(userInfo, (newValue) => {
console.log(newValue)
}, {
deep: true
})
</script>
<template>
<div>{{ userInfo }}</div>
<button @click="setUserInfo">修改userInfo</button>
</template>a精確偵聽對象的某個屬性?
在不開啟deep的前提下，偵聽age的變化，只有age變化時才執(zhí)行回調(diào)
<script setup>
import{watch,ref}from 'vue'
// 4. deep 深度監(jiān)視, 默認(rèn) watch 進(jìn)行的是 淺層監(jiān)視
// const ref1 = ref(簡單類型) 可以直接監(jiān)視
// const ref2 = ref(復(fù)雜類型) 監(jiān)視不到復(fù)雜類型內(nèi)部數(shù)據(jù)的變化
const userInfo = ref({
name: 'zs',
age: 18
})
const setUserInfo = () => {
// 修改了 userInfo.value 修改了對象的地址，才能監(jiān)視到
// userInfo.value = { name: 'ls', age: 50 }
userInfo.value.age++
}
// 5. 對于對象中的單個屬性，進(jìn)行監(jiān)視
watch(() => userInfo.value.age, (newValue, oldValue) => {
console.log(newValue, oldValue)
})
</script>
<template>
<div>{{ userInfo }}</div>
<button @click="setUserInfo">修改userInfo</button>
</template>生命周期函數(shù)
Vue3的生命周期API （選項式 VS 組合式）
文章來源：http://www.zghlxwxcb.cn/news/detail-650939.html
父子通信?
組合式API下的父傳子
基本思想1. 父組件中給 子組件綁定屬性2. 子組件內(nèi)部通過 props選項接收
defineProps 原理：就是編譯階段的一個標(biāo)識，實際編譯器解析時，遇到后會進(jìn)行編譯轉(zhuǎn)換
組合式API下的子傳父?
基本思想1. 父組件中給 子組件標(biāo)簽通過@綁定事件2. 子組件內(nèi)部通過 emit 方法觸發(fā)事件
模版引用?
如何使用（以獲取dom為例 組件同理）
通過ref標(biāo)識獲取真實的dom對象或者組件實例對象文章來源地址http://www.zghlxwxcb.cn/news/detail-650939.html
1. 調(diào)用ref函數(shù)生成一個ref對象2. 通過ref標(biāo)識綁定ref對象到標(biāo)簽
defineExpose()?
默認(rèn)情況下在<script setup>語法糖下 組件內(nèi)部的屬性和方法是不開放 給父組件訪問的，可以通過defineExpose編譯宏 指定哪些屬性和方法允許訪問
到了這里，關(guān)于快速入門vue3組合式API的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
