?? 寫(xiě)在前面

專(zhuān)欄介紹：
涼哥作為 Vue 的忠實(shí) 粉絲輸出過(guò)大量的 Vue 文章，應(yīng)粉絲要求開(kāi)始更新 Vue3 的相關(guān)技術(shù)文章，Vue 框架目前的地位大家應(yīng)該都曉得，所謂三大框架使用人數(shù)最多，公司選型最多的框架，涼哥之前在文章中也提到過(guò)就是 Vue 框架之所以火起來(lái)的原因，和 Vue 框架相比其他框架的巨大優(yōu)勢(shì)，有興趣的伙伴可以看一下Vue與React的區(qū)別和優(yōu)勢(shì)對(duì)比，隨著 Vue 框架不斷的被認(rèn)可，現(xiàn)如今的 Vue 框架已經(jīng)是前端工程師必備的技能了，記得尤大大開(kāi)發(fā) Vue 的初衷，為了讓自己的開(kāi)發(fā)工作更加便捷，也希望這個(gè)框架能讓更多人的開(kāi)發(fā)工作變得輕松；現(xiàn)如今 Vue 框架做到了，尤大大做到了，當(dāng)然在 20 年的 9 月 18 日，Vue 又向前端同僚們報(bào)告了一次大的突破 Vue3.0 版本正式發(fā)布！如今已經(jīng)過(guò)去了兩年多的時(shí)間，更多的公司選擇了Vue3技術(shù)，所以涼哥也在這個(gè)時(shí)候?yàn)榇蠹页鲞@份專(zhuān)欄，本專(zhuān)欄將幫助大家掌握Vue3+TS技術(shù)，提升自己競(jìng)爭(zhēng)力！

溫故知新：
上篇文章文章中我們了解到入口函數(shù)setup以及Vue3的響應(yīng)式數(shù)據(jù)的轉(zhuǎn)化函數(shù)reactive、ref，以及這兩個(gè)函數(shù)我們?cè)陧?xiàng)目開(kāi)發(fā)中如何進(jìn)行選擇！本篇博客中為大家呈現(xiàn) setup的語(yǔ)法糖，讓我們省去重復(fù)的代碼工作，高效開(kāi)發(fā)，并且?guī)ьI(lǐng)大家掌握 computed、watch 函數(shù)的使用！讓我們 let’s coding！

?? setup 語(yǔ)法糖

大家發(fā)現(xiàn)沒(méi)有，在我們前面幾篇文章中的案例代碼中，每個(gè)案例的模板中都有一些雷同代碼，這些代碼就是我們的setup函數(shù)，但是作為組合API的入口函數(shù)，我們所有的組合式API都要寫(xiě)到里面，難道我們每次都要寫(xiě)上這一坨么，其實(shí)在Vue中提供了setup 的語(yǔ)法糖，語(yǔ)法糖大家都知道是什么嘛？就比如我們Vue2中的 v-model 不就是語(yǔ)法糖么，可以通過(guò)這樣一個(gè)指令省去了大量的雙向數(shù)據(jù)綁定的代碼！那我們來(lái)看一下我們的setup都?jí)蚝?jiǎn)化成為什么樣子，以下面代碼為例，我們聲明一個(gè)函數(shù)，點(diǎn)擊按鈕觸發(fā)喊出打印 hi 這樣一個(gè)簡(jiǎn)單的效果；

<template>
    <div>
        <button @click="hello">hello</button>
    </div>
</template>

<script>
export default {
    setup() {
        const hello = () => {
            console.log('hi')
        }

        return { hello }
    }
}
</script>

<template>
    <div>
        <button @click="hello">hello</button>
    </div>
</template>

<script setup>
const hello = () => {
    console.log('hi')
}
</script>

上面是我們使用setup語(yǔ)法糖后的代碼效果，功能實(shí)現(xiàn)上是一樣的；在 script setup 的標(biāo)簽中，所有的數(shù)據(jù)、函數(shù)可以直接在模板中使用！大家可以多多嘗試一下，可以將我們 Vue3通透教程【四】文章中的例子使用setup語(yǔ)法糖的方式進(jìn)行改造一下！

在 script setup 中的頂層變量都可以直接在模板中使用

?? computed函數(shù)

在上篇文章中我們學(xué)了兩個(gè)組合式API分別是 ref 和 reactive，現(xiàn)在呢我們學(xué)習(xí)cmputed函數(shù)，相信大家一定知道他即使我們的計(jì)算數(shù)據(jù)定義函數(shù)，之前呢是 computed 選項(xiàng)，現(xiàn)在是computed函數(shù)；我們來(lái)通過(guò)小案例來(lái)體驗(yàn)一下吧！computed 函數(shù)的使用：其實(shí)我們什么情況下會(huì)使用計(jì)算屬性呢，那一定是通過(guò)依賴(lài)的數(shù)據(jù)得到新的數(shù)據(jù)！

1）從Vue中引入computed
2）在setup中進(jìn)行使用，將一個(gè)函數(shù)，函數(shù)的返回值就是計(jì)算好的數(shù)據(jù)
3）最后呢通過(guò)setup返回出去，模板進(jìn)行使用，如果使用setup語(yǔ)法糖后其實(shí)不需要這一步了

我們可以舉一個(gè)簡(jiǎn)單的例子，比如我們定義一個(gè)成績(jī)數(shù)字，單純的分?jǐn)?shù)信息，那我們通過(guò) computed 函數(shù)來(lái)為我們計(jì)算出超過(guò)60份的及格成績(jī)；我們就直接使用 script setup 的方式來(lái)編碼了哈！

<template>
    <div>
        <p>成績(jī)單</p>
        <a v-for="num in achievement"> {{ num }} / </a>
        <p>及格成績(jī)單</p>
        <a v-for="num in passList"> {{ num }} / </a>
    </div>
</template>

<script setup>
import { computed, ref } from 'vue';

const achievement = ref([44, 22, 66, 77, 99, 88, 70, 21])

const passList = computed(() => {
    return achievement.value.filter(item => item > 60)
})
</script>

?? watch 函數(shù)

跟computed函數(shù)一樣，watch函數(shù)也是組合式API中的一員，watch其實(shí)就是監(jiān)聽(tīng)數(shù)據(jù)變化的函數(shù)，那么在Vue3中它都有哪些用法呢？可以使用watch監(jiān)聽(tīng)一個(gè)或者多個(gè)響應(yīng)式數(shù)據(jù)，可以使用watch監(jiān)聽(tīng)響應(yīng)式數(shù)據(jù)中的一個(gè)屬性（簡(jiǎn)單數(shù)據(jù) or 復(fù)雜數(shù)據(jù)）可以配置深度監(jiān)聽(tīng)，也可以使用watch監(jiān)聽(tīng)實(shí)現(xiàn)默認(rèn)執(zhí)行；我們來(lái)分開(kāi)嘗試一下代碼的寫(xiě)法

通過(guò)watch監(jiān)聽(tīng)一個(gè)數(shù)據(jù)

watcha監(jiān)聽(tīng)一個(gè)數(shù)據(jù)，函數(shù)兩個(gè)參數(shù)：第一個(gè)要監(jiān)聽(tīng)的數(shù)據(jù)，第二個(gè)參數(shù)是監(jiān)聽(tīng)值發(fā)生變化后觸發(fā)的回調(diào)函數(shù)，其中回調(diào)函數(shù)也有兩個(gè)參數(shù) 新值、老值

<template>
    <div>
        總贊數(shù)：{{ num }} <button @click="num++">點(diǎn)贊</button>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue';

//創(chuàng)建一個(gè)響應(yīng)式數(shù)據(jù)，我們通過(guò)點(diǎn)贊按鈕改變num的值

const num = ref(0)
watch(num, (nv, ov) => {
    console.log(nv, ov)
})
</script>

通過(guò)watch監(jiān)聽(tīng)多個(gè)數(shù)據(jù)

watcha監(jiān)聽(tīng)多個(gè)數(shù)據(jù)，例如下面的我們需要監(jiān)聽(tīng)num和user對(duì)象的變化，函數(shù)兩個(gè)參數(shù)：第一個(gè)要監(jiān)聽(tīng)的數(shù)據(jù)（因?yàn)槭嵌鄠€(gè)數(shù)據(jù)所以用數(shù)組），第二個(gè)參數(shù)是監(jiān)聽(tīng)值發(fā)生變化后觸發(fā)的回調(diào)函數(shù)。

<template>
    <div>
        總贊數(shù)：{{ num }} <button @click="num++">點(diǎn)贊</button>
    </div>
    <p>姓名：{{ user.name }}</p>
    <p>年齡：{{ user.age }}</p>
    <button @click="user.age++">過(guò)年啦</button>
</template>

<script setup>
import { ref, watch, reactive } from 'vue';
const num = ref(0)
let user = reactive(
    {
        name: "幾何心涼",
        age: 18
    }
)
watch([num, user], () => {
    console.log('我監(jiān)聽(tīng)到了')
})
</script>

通過(guò)watch監(jiān)聽(tīng)對(duì)象的一個(gè)屬性（簡(jiǎn)單類(lèi)型）

watch監(jiān)聽(tīng)對(duì)象的一個(gè)屬性并且是簡(jiǎn)單類(lèi)型的屬性，比如我們監(jiān)聽(tīng)下面的user中的age值，他是一個(gè)簡(jiǎn)單類(lèi)型，那我們watch的第一個(gè)參數(shù)形式需要是將對(duì)象屬性作為返回值的函數(shù)；第二個(gè)參數(shù)是改變后的回調(diào)函數(shù)。

<template>
    <p>姓名：{{ user.name }}</p>
    <p>年齡：{{ user.age }}</p>
    <button @click="user.age++">過(guò)年啦</button>
</template>

<script setup>
import { ref, watch, reactive } from 'vue';
let user = reactive(
    {
        name: "幾何心涼",
        age: 18
    }
)
watch(()=>user.age, () => {
    console.log('我監(jiān)聽(tīng)到了user.age的變化')
})
</script>

通過(guò)watch監(jiān)聽(tīng)對(duì)象的一個(gè)屬性（復(fù)雜類(lèi)型）

watch監(jiān)聽(tīng)對(duì)象的一個(gè)屬性并且是復(fù)雜類(lèi)型的屬性，比如下面的我們要監(jiān)聽(tīng)user中的info，我們嘗試一下改變user中info中的wages值，那我們watch的第一個(gè)參數(shù)形式需要是將對(duì)象屬性作為返回值的函數(shù)；第二個(gè)參數(shù)是改變后的回調(diào)函數(shù)。這時(shí)候還需要第三個(gè)參數(shù)那就是 deep 開(kāi)啟深度監(jiān)聽(tīng)

<template>
    <p>姓名：{{ user.name }}</p>
    <p>年齡：{{ user.age }}</p>
    <p>薪資：{{ user.info.wages }}</p>
    <button @click="user.age++">過(guò)年啦</button>
    <button @click="user.info.wages+=2000">加薪了</button>
</template>

<script setup>
import { ref, watch, reactive } from 'vue';
let user = reactive(
    {
        name: "幾何心涼",
        age: 18,
        info:{
            wages:20000
        }
    }
)
watch(()=>user.info, () => {
    console.log('我監(jiān)聽(tīng)到了user.info的變化')
},{
    deep:true
})
</script>

通過(guò)watch監(jiān)聽(tīng)數(shù)據(jù)默認(rèn)執(zhí)行

其實(shí)這種情況并不多但是也會(huì)遇到這種情況，就是我們?cè)诒O(jiān)聽(tīng)數(shù)據(jù)變化的時(shí)候，先默認(rèn)執(zhí)行一次；其實(shí)就是添加我們的immediate參數(shù)為true，我們以最初的num為例哈！

<template>
    <div>
        總贊數(shù)：{{ num }} <button @click="num++">點(diǎn)贊</button>
    </div>
</template>

<script setup>
import { ref, watch, reactive } from 'vue';
const num = ref(0)
watch(num, () => {
    console.log('我打印了')
},{
    immediate:true
})
</script>

?? 寫(xiě)在最后

掌握了setup語(yǔ)法糖，我們編碼更便捷，并且?guī)ьI(lǐng)大家掌握 computed、watch 函數(shù)的使用，希望大家能夠自己實(shí)現(xiàn)上面的案例功能哦，做到真正的掌握這些點(diǎn)！下一篇文章中我們將帶領(lǐng)大家學(xué)習(xí)Vue3的生命周期，拭目以待吧！各位小伙伴讓我們 let’s coding！

到此這篇關(guān)于Vue3中的setup語(yǔ)法糖、computed函數(shù)、watch函數(shù)的文章就介紹到這了,更多相關(guān)Vue3 setup語(yǔ)法糖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論