開篇：

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

---

1.什么是setup

• setup用來寫組合式api，從生命周期的角度，相當于取代了beforeCreate()

2.setup怎么使用

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

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

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

相關(guān)代碼：

//選項式寫法
<script>
export default{props: ['subtitle'],data: () => ({age: 30}),methods: {showMessage() {console.log('函數(shù) HELLO');  }},// 組件實例話之前// 可以訪問 props 的數(shù)據(jù)的// 不能訪問組件的實例 this 中的數(shù)據(jù)源和函數(shù)等// 不能訪問組件中的視圖DOM元素beforeCreate() {console.log('----------------------------')console.log('beforeCreate 組件實例話之前')console.log(this.$props.subtitle)console.log('不能訪問組件的實例 this 中的數(shù)據(jù)源和函數(shù)等');console.log('不能訪問組件中的視圖DOM元素');// console.log(this.age)// this.showMessage()// console.log(document.getElementById('title').innerHTML)},// 組件實例話之后// 可以訪問組件中的數(shù)據(jù)，函數(shù)，自定義的屬性等// 不能訪問組件中的視圖DOM元素created() {console.log('----------------------------')console.log('created 組件實例話之后')console.log(this.$props.subtitle)console.log(this.age)this.showMessage()console.log('不能訪問組件中的視圖DOM元素');// console.log(document.getElementById('title').innerHTML)},// 組件視圖渲染之前// 可以訪問組件中的數(shù)據(jù)，函數(shù)，自定義的屬性等// 不能訪問組件中的視圖DOM元素beforeMount() {console.log('----------------------------')console.log('beforeMount 組件視圖渲染之前')console.log(this.$props.subtitle)console.log(this.age)this.showMessage()console.log('不能訪問組件中的視圖DOM元素');// console.log(document.getElementById('title').innerHTML)},// 組件視圖渲染之后// 可以訪問組件中的數(shù)據(jù)，函數(shù)，自定義的屬性等// 不能訪問組件中的視圖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ā)生改變，視圖重新渲染前// 可以訪問組件中的數(shù)據(jù)，函數(shù)，自定義的屬性等// 可訪問重新渲染的 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ā)生改變，視圖重新渲染后// 可以訪問組件中的數(shù)據(jù)，函數(shù)，自定義的屬性等// 可訪問重新渲染的 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)},// 組件在卸載之前// 可以訪問組件中的數(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)},// 組件已卸載// 可以訪問組件中的數(shù)據(jù)，函數(shù)，自定義的屬性等// 不可訪組件視圖的 DOM 元素unmounted(){console.log('----------------------------')console.log('unmounted 組件已卸載')console.log(this.$props.subtitle)console.log(this.age)this.showMessage()console.log('不能訪問組件中的視圖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>

// 組合式寫法
<script setup>
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from 'vue';let age = ref(30)function showMessage() {console.log('HELLO')
}// 組件視圖渲染之前
// 能訪問組件實例的東西（數(shù)據(jù)源、函數(shù)等）
// 但是不能訪問組件視圖中的 DOM 元素
onBeforeMount(() => {console.log('------------------------')console.log('onBeforeMount 組件視圖渲染之前（生命周期鉤子）')console.log(age.value)showMessage()console.log('不能訪問組件視圖中的 DOM 元素');// console.log(document.getElementById('title').innerHTML)
})// 組件視圖渲染之后
// 能訪問組件實例的東西（數(shù)據(jù)源、函數(shù)等）
// 可以訪問組件視圖中的 DOM 元素
onMounted(() => {console.log('------------------------')console.log('onMounted 組件視圖渲染之后（生命周期鉤子）')console.log(age.value)showMessage()console.log(document.getElementById('title').innerHTML)
})// 數(shù)據(jù)源發(fā)生變化，組件視圖重新渲染之前
// 能訪問組件實例的東西（數(shù)據(jù)源、函數(shù)等）
// 能訪問組件視圖渲染之前的 DOM 元素
onBeforeUpdate(() => {console.log('------------------------')console.log('onBeforeUpdate 數(shù)據(jù)源發(fā)生變化，組件視圖重新渲染之前（生命周期鉤子）')console.log(age.value)showMessage()console.log(document.getElementById('title').innerHTML)
})// 數(shù)據(jù)源發(fā)生變化，組件視圖重新渲染之后
// 能訪問組件實例的東西（數(shù)據(jù)源、函數(shù)等）
// 能訪問組件視圖渲染之后的 DOM 元素
onUpdated(() => {console.log('------------------------')console.log('onUpdated 數(shù)據(jù)源發(fā)生變化，組件視圖重新渲染之后（生命周期鉤子）')console.log(age.value)showMessage()console.log(document.getElementById('title').innerHTML)
})// 組件卸載之前
// 能訪問組件實例的東西（數(shù)據(jù)源、函數(shù)等）
// 能訪問組件視圖 DOM 元素
onBeforeUnmount(() => {console.log('------------------------')console.log('onBeforeUnmount 組件卸載之前（生命周期鉤子）')console.log(age.value)showMessage()console.log(document.getElementById('title').innerHTML)
}) // 組件卸載之后
// 能訪問組件實例的東西（數(shù)據(jù)源、函數(shù)等）
// 不能訪問組件視圖 DOM 元素
onUnmounted(() => {console.log('------------------------')console.log('onUnmounted 組件卸載之后（生命周期鉤子）')console.log(age.value)showMessage()console.log('不能訪問組件視圖中的 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ù)：props和context
  • props：
    1. 表示父組件給子組件傳的數(shù)據(jù)；
    2. props是響應式的，當數(shù)據(jù)發(fā)送改變時，自動更新
    3. 因為props是響應式的，不能使用es6的解構(gòu)，會消除響應式特性(使用toRefs)
  • context：
    1. context 上下文環(huán)境。其中包括了屬性，插槽，自定義事件三部分
    2. attrs：是一個非響應式對象，只要接受no-props屬性。經(jīng)常用來傳遞一些樣式/標簽特有屬性
    3. solts：是一個Proxy對象，其中slots.default()獲取到一個數(shù)組。數(shù)組長度表示插槽的數(shù)量，
       數(shù)組中的元素時插槽的內(nèi)容。
    4. emit：因為setup沒有this，所以使用emit開替換之前的this.$emit。用于子傳父時，自定義事件的觸發(fā) 示例：emit(“自定義事件名”，傳遞的值)

4.setup特性總結(jié)

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

總結(jié)

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