Setup是VUE3.0中為我們新提供的的組件選項(xiàng)。
創(chuàng)建組件實(shí)例，然后初始化props，緊接著就調(diào)用setup函數(shù)，從生命周期鉤子的視角來看，他在beforecreate之前調(diào)用。
setup()是函數(shù)，具有return，return函數(shù)中定義的變量，把其暴露給模板。
一：setup
1：Setup可以替代VUE2中的data和method函數(shù)。
（1）：使用VITE創(chuàng)建一個(gè)空項(xiàng)目，默認(rèn)會(huì)給我們一個(gè)helloworld組件，我們使用這個(gè)組件做測試。
項(xiàng)目搭建，請(qǐng)移步《VUE3（一）安裝+使用vite創(chuàng)建一個(gè)項(xiàng)目》
上代碼，這里大概展示一下VUE3的新寫法
Helloworld.vue
<template>
<h1>{{ msg }}</h1>
<button @click="count++">count is: {{ count }}</button>
<p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
<button @click="clickMe()">點(diǎn)我彈窗</button>
</template>
<script lang='ts'>
import {
ref,
} from "vue";
export default {
name: 'HelloWorld',
props: {
msg: String
},
// 使用setup 代替 data
// 因?yàn)槲疫@里使用的是typescript，因此需要給參數(shù)指定類型
setup(props:any,context:any){
let count = ref(0);
const clickMe = () => {
// 使用ref關(guān)鍵字綁定的變量，賦值 的時(shí)候必須使用.value
count.value++;
alert('hi');
}
return {
count,
clickMe
}
},//*/
// 這是VUE2.0的寫法，data與methods
/*data() {
return {
count: 0
}
},
methods:{
clickMe(){
alert('hi');
}
}//*/
}
</script>
2：setup的兩個(gè)參數(shù)（prpos，context）
關(guān)于setup的參數(shù)，官方文檔有詳盡的介紹，具體，請(qǐng)參照：
https://www.vue3js.cn/docs/zh/guide/composition-api-setup.html#參數(shù)
（1）：prpos
setup 函數(shù)中的 props 是響應(yīng)式的，當(dāng)傳入新的 prop 時(shí)，它將被更新。
這個(gè)就是父組件傳入子組件的參數(shù)。具體，請(qǐng)參照上方的代碼。
看到這里，其實(shí)你可以停下來，自己搭建一個(gè)項(xiàng)目試一下。
（2）：context
這個(gè)參數(shù)名稱不是固定的，叫什么都行。
傳遞給 setup 函數(shù)的第二個(gè)參數(shù)是 context。context 是一個(gè)普通的 JavaScript 對(duì)象，它暴露三個(gè)組件的 property：
export default {
setup(props, context) {
// Attribute (非響應(yīng)式對(duì)象)
console.log(context.attrs)
// 插槽 (非響應(yīng)式對(duì)象)
console.log(context.slots)
// 觸發(fā)事件 (方法)
console.log(context.emit)
}
}
這里我只用到了emit（觸發(fā)事件），這個(gè)可以用作將子組件的值傳遞給父組件。具體我們之后組件那部分再說。
3：setup中沒有辦法訪問到this。
this在setup中不可用，方法和聲明周期都可以寫在setup中，如果在方法中訪問setup中的變量時(shí)，直接變量名就可以使用。方法名和變量名要在setup中return出去才可以正常執(zhí)行。
4：setup()是函數(shù)，具有return，return函數(shù)中定義的變量，把其暴露給模板。
具體，請(qǐng)參見第一部分的示例代碼
二：ref關(guān)鍵字
在setup函數(shù)中，可以使用ref函數(shù)，用于創(chuàng)建一個(gè)響應(yīng)式數(shù)據(jù)，當(dāng)數(shù)據(jù)發(fā)生改變時(shí)，Vue會(huì)自動(dòng)更新UI
一定要注意，ref創(chuàng)建的是一個(gè)響應(yīng)式數(shù)據(jù)。這個(gè)在VUE3.0中非常靈活，幾乎是怎么玩都行的。具體后邊還會(huì)說到，這里大概說一下基本用法。
1：引入ref
import {
ref,
} from "vue";
2：使用注意點(diǎn)
在 VUE 的模板中使用 ref 的值不需要通過 value 獲取 （Vue 會(huì)通過自動(dòng)給 ref 的值加上 .value）
在 js 中使用 ref 的值必須使用 .value 獲取
上方代碼實(shí)現(xiàn)效果：
有好的建議，請(qǐng)?jiān)谙路捷斎肽愕脑u(píng)論。
歡迎訪問個(gè)人博客
https://guanchao.site
