開(kāi)篇：

從vue2升級(jí) vue3，vue3是可以兼容vue2。所以v3可以采用v2的選項(xiàng)式api，但是v2不能使用v3的組合式api，由于選項(xiàng)式api一個(gè)變量存在于多處，如果出現(xiàn)問(wèn)題，就需要去涵蓋多個(gè)函數(shù)。項(xiàng)目越大，排查的難度也就越大。

---

1.什么是setup

• setup用來(lái)寫(xiě)組合式api，從生命周期的角度，相當(dāng)于取代了beforeCreate()

2.setup怎么使用

1.setup() / {}  內(nèi)部的屬性和方法，必須使用return暴露出來(lái)。將屬性掛載到實(shí)例上，否則沒(méi)有辦法使用。
2.語(yǔ)法糖：寫(xiě)在script開(kāi)始標(biāo)簽中，內(nèi)部的屬性和方法，無(wú)需return暴露；無(wú)法和選項(xiàng)式api混用	
3. 鉤子函數(shù)可以和setup并列存在，	setup不能調(diào)用生命周期相關(guān)的函數(shù)。
生命周期相關(guān)函數(shù)可以調(diào)用setup相關(guān)的屬性和方法，可以使用this或者嵌套存在。

3.setup中包含的生命周期函數(shù)

onBeforeMount——掛載開(kāi)始前調(diào)用
onMounted——掛載后調(diào)用
onBeforeUpdate——當(dāng)響應(yīng)數(shù)據(jù)改變，且重新渲染前調(diào)用
onUpdated——重新渲染后調(diào)用
onBeforeUnmount——Vue實(shí)例銷(xiāo)毀前調(diào)用
onUnmounted——實(shí)例銷(xiāo)毀后調(diào)用
onActivated——當(dāng)keep-alive組件被激活時(shí)調(diào)用
onDeactivated——當(dāng)keep-alive組件取消激活時(shí)調(diào)用
onErrorCaptured——從子組件中捕獲錯(cuò)誤時(shí)調(diào)用

相關(guān)代碼：

//選項(xiàng)式寫(xiě)法
<script>
export default{props: ['subtitle'],data: () => ({age: 30}),methods: {showMessage() {console.log('函數(shù) HELLO');  }},// 組件實(shí)例話之前// 可以訪問(wèn) props 的數(shù)據(jù)的// 不能訪問(wèn)組件的實(shí)例 this 中的數(shù)據(jù)源和函數(shù)等// 不能訪問(wèn)組件中的視圖DOM元素beforeCreate() {console.log('----------------------------')console.log('beforeCreate 組件實(shí)例話之前')console.log(this.$props.subtitle)console.log('不能訪問(wèn)組件的實(shí)例 this 中的數(shù)據(jù)源和函數(shù)等');console.log('不能訪問(wèn)組件中的視圖DOM元素');// console.log(this.age)// this.showMessage()// console.log(document.getElementById('title').innerHTML)},// 組件實(shí)例話之后// 可以訪問(wèn)組件中的數(shù)據(jù)，函數(shù)，自定義的屬性等// 不能訪問(wèn)組件中的視圖DOM元素created() {console.log('----------------------------')console.log('created 組件實(shí)例話之后')console.log(this.$props.subtitle)console.log(this.age)this.showMessage()console.log('不能訪問(wèn)組件中的視圖DOM元素');// console.log(document.getElementById('title').innerHTML)},// 組件視圖渲染之前// 可以訪問(wèn)組件中的數(shù)據(jù)，函數(shù)，自定義的屬性等// 不能訪問(wèn)組件中的視圖DOM元素beforeMount() {console.log('----------------------------')console.log('beforeMount 組件視圖渲染之前')console.log(this.$props.subtitle)console.log(this.age)this.showMessage()console.log('不能訪問(wèn)組件中的視圖DOM元素');// console.log(document.getElementById('title').innerHTML)},// 組件視圖渲染之后// 可以訪問(wèn)組件中的數(shù)據(jù)，函數(shù)，自定義的屬性等// 不能訪問(wèn)組件中的視圖DOM元素mounted() {console.log('----------------------------')console.log('mounted 組件視圖渲染之后')console.log(this.$props.subtitle)console.log(this.age)this.showMessage()console.log(document.getElementById('title').innerHTML)},// 數(shù)據(jù)源發(fā)生改變，視圖重新渲染前// 可以訪問(wèn)組件中的數(shù)據(jù)，函數(shù)，自定義的屬性等// 可訪問(wèn)重新渲染的 DOM 元素之前的狀態(tài)beforeUpdate() {console.log('----------------------------')console.log('beforeUpdate 數(shù)據(jù)源發(fā)生改變，視圖重新渲染前')console.log(this.$props.subtitle)console.log(this.age)this.showMessage()console.log(document.getElementById('title').innerHTML)},// 數(shù)據(jù)源發(fā)生改變，視圖重新渲染后// 可以訪問(wèn)組件中的數(shù)據(jù)，函數(shù)，自定義的屬性等// 可訪問(wèn)重新渲染的 DOM 元素之后的狀態(tài)updated() {console.log('----------------------------')console.log('updated 數(shù)據(jù)源發(fā)生改變，視圖重新渲染后')console.log(this.$props.subtitle)console.log(this.age)this.showMessage()console.log(document.getElementById('title').innerHTML)},// 組件在卸載之前// 可以訪問(wèn)組件中的數(shù)據(jù)，函數(shù)，自定義的屬性等// 可訪組件視圖的 DOM 元素beforeUnmount() {console.log('----------------------------')console.log('beforeUnmount 組件在卸載之前')console.log(this.$props.subtitle)console.log(this.age)this.showMessage()console.log(document.getElementById('title').innerHTML)},// 組件已卸載// 可以訪問(wèn)組件中的數(shù)據(jù)，函數(shù)，自定義的屬性等// 不可訪組件視圖的 DOM 元素unmounted(){console.log('----------------------------')console.log('unmounted 組件已卸載')console.log(this.$props.subtitle)console.log(this.age)this.showMessage()console.log('不能訪問(wèn)組件中的視圖DOM元素');// console.log(document.getElementById('title').innerHTML)}
}
</script><template><h3 id="title"><i>年齡：{{ age }}</i></h3><button @click="(age = 70)">年齡改成 70</button><button @click="(age = 30)">年齡改成 30</button>
</template>

// 組合式寫(xiě)法
<script setup>
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from 'vue';let age = ref(30)function showMessage() {console.log('HELLO')
}// 組件視圖渲染之前
// 能訪問(wèn)組件實(shí)例的東西（數(shù)據(jù)源、函數(shù)等）
// 但是不能訪問(wèn)組件視圖中的 DOM 元素
onBeforeMount(() => {console.log('------------------------')console.log('onBeforeMount 組件視圖渲染之前（生命周期鉤子）')console.log(age.value)showMessage()console.log('不能訪問(wèn)組件視圖中的 DOM 元素');// console.log(document.getElementById('title').innerHTML)
})// 組件視圖渲染之后
// 能訪問(wèn)組件實(shí)例的東西（數(shù)據(jù)源、函數(shù)等）
// 可以訪問(wèn)組件視圖中的 DOM 元素
onMounted(() => {console.log('------------------------')console.log('onMounted 組件視圖渲染之后（生命周期鉤子）')console.log(age.value)showMessage()console.log(document.getElementById('title').innerHTML)
})// 數(shù)據(jù)源發(fā)生變化，組件視圖重新渲染之前
// 能訪問(wèn)組件實(shí)例的東西（數(shù)據(jù)源、函數(shù)等）
// 能訪問(wèn)組件視圖渲染之前的 DOM 元素
onBeforeUpdate(() => {console.log('------------------------')console.log('onBeforeUpdate 數(shù)據(jù)源發(fā)生變化，組件視圖重新渲染之前（生命周期鉤子）')console.log(age.value)showMessage()console.log(document.getElementById('title').innerHTML)
})// 數(shù)據(jù)源發(fā)生變化，組件視圖重新渲染之后
// 能訪問(wèn)組件實(shí)例的東西（數(shù)據(jù)源、函數(shù)等）
// 能訪問(wèn)組件視圖渲染之后的 DOM 元素
onUpdated(() => {console.log('------------------------')console.log('onUpdated 數(shù)據(jù)源發(fā)生變化，組件視圖重新渲染之后（生命周期鉤子）')console.log(age.value)showMessage()console.log(document.getElementById('title').innerHTML)
})// 組件卸載之前
// 能訪問(wèn)組件實(shí)例的東西（數(shù)據(jù)源、函數(shù)等）
// 能訪問(wèn)組件視圖 DOM 元素
onBeforeUnmount(() => {console.log('------------------------')console.log('onBeforeUnmount 組件卸載之前（生命周期鉤子）')console.log(age.value)showMessage()console.log(document.getElementById('title').innerHTML)
}) // 組件卸載之后
// 能訪問(wèn)組件實(shí)例的東西（數(shù)據(jù)源、函數(shù)等）
// 不能訪問(wèn)組件視圖 DOM 元素
onUnmounted(() => {console.log('------------------------')console.log('onUnmounted 組件卸載之后（生命周期鉤子）')console.log(age.value)showMessage()console.log('不能訪問(wèn)組件視圖中的 DOM 元素');// console.log(document.getElementById('title').innerHTML)
}) </script><template><h3 id="title"><i>年齡：{{ age }}</i></h3><button @click="(age = 70)">年齡改成 70</button><button @click="(age = 30)">年齡改成 30</button>
</template>

3.setup相關(guān)參數(shù)

• 使用setup時(shí)，她講接受兩個(gè)參數(shù)：props和context
  • props：
    1. 表示父組件給子組件傳的數(shù)據(jù)；
    2. props是響應(yīng)式的，當(dāng)數(shù)據(jù)發(fā)送改變時(shí)，自動(dòng)更新
    3. 因?yàn)閜rops是響應(yīng)式的，不能使用es6的解構(gòu)，會(huì)消除響應(yīng)式特性(使用toRefs)
  • context：
    1. context 上下文環(huán)境。其中包括了屬性，插槽，自定義事件三部分
    2. attrs：是一個(gè)非響應(yīng)式對(duì)象，只要接受no-props屬性。經(jīng)常用來(lái)傳遞一些樣式/標(biāo)簽特有屬性
    3. solts：是一個(gè)Proxy對(duì)象，其中slots.default()獲取到一個(gè)數(shù)組。數(shù)組長(zhǎng)度表示插槽的數(shù)量，
       數(shù)組中的元素時(shí)插槽的內(nèi)容。
    4. emit：因?yàn)閟etup沒(méi)有this，所以使用emit開(kāi)替換之前的this.$emit。用于子傳父時(shí)，自定義事件的觸發(fā) 示例：emit(“自定義事件名”，傳遞的值)

4.setup特性總結(jié)

?1. 這個(gè)函數(shù)會(huì)在created之前執(zhí)行
2. setup內(nèi)部沒(méi)有this，不能掛載相關(guān)的東西
3. setup內(nèi)部的屬性和方法，必須return暴露出來(lái)。(語(yǔ)法糖不需要)
4. setup內(nèi)部的屬性都不是響應(yīng)式的
5. setup不能調(diào)用生命周期相關(guān)函數(shù)，但生命周期相關(guān)函數(shù)可以調(diào)用setup

總結(jié)

以上就是Vue3.0 setup的使用及作用。希望本篇文章能夠幫助到你，不懂得可以評(píng)論區(qū)或者私信問(wèn)我，我也會(huì)一 一解答。謝謝觀看！
我的其他文章:https://blog.csdn.net/m0_60970928?type=blog