本篇文章帶大家學習Vue3，了解Vue3中的setup語法糖、computed函數(shù)、watch函數(shù)，希望對大家有所幫助！

setup 語法糖

大家發(fā)現(xiàn)沒有，在我們前面幾篇文章中的案例代碼中，每個案例的模板中都有一些雷同代碼，這些代碼就是我們的setup函數(shù)，但是作為組合API的入口函數(shù)，我們所有的組合式API都要寫到里面，難道我們每次都要寫上這一坨么，其實在Vue中提供了setup 的語法糖，語法糖大家都知道是什么嘛？【相關(guān)推薦：vuejs視頻教程、web前端開發(fā)】

(資料圖片)

就比如我們Vue2中的 v-model 不就是語法糖么，可以通過這樣一個指令省去了大量的雙向數(shù)據(jù)綁定的代碼！那我們來看一下我們的setup都夠簡化成為什么樣子，以下面代碼為例，我們聲明一個函數(shù)，點擊按鈕觸發(fā)喊出打印 hi 這樣一個簡單的效果；

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

computed函數(shù)

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

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

我們可以舉一個簡單的例子，比如我們定義一個成績數(shù)字，單純的分數(shù)信息，那我們通過 computed 函數(shù)來為我們計算出超過60份的及格成績；我們就直接使用 script setup 的方式來編碼了哈！

<template>    <div>        <p>成績單</p>        <a v-for="num in achievement"> {{ num }} / </a>        <p>及格成績單</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其實就是監(jiān)聽數(shù)據(jù)變化的函數(shù)，那么在Vue3中它都有哪些用法呢？可以使用watch監(jiān)聽一個或者多個響應式數(shù)據(jù)，可以使用watch監(jiān)聽響應式數(shù)據(jù)中的一個屬性（簡單數(shù)據(jù) or 復雜數(shù)據(jù)）可以配置深度監(jiān)聽，也可以使用watch監(jiān)聽實現(xiàn)默認執(zhí)行；我們來分開嘗試一下代碼的寫法

通過watch監(jiān)聽一個數(shù)據(jù)

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

<template>    <div>        總贊數(shù)：{{ num }} <button @click="num++">點贊</button>    </div></template><script setup>import { ref, watch } from "vue";//創(chuàng)建一個響應式數(shù)據(jù)，我們通過點贊按鈕改變num的值const num = ref(0)watch(num, (nv, ov) => {    console.log(nv, ov)})</script>

通過watch監(jiān)聽多個數(shù)據(jù)

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

<template>    <div>        總贊數(shù)：{{ num }} <button @click="num++">點贊</button>    </div>    <p>姓名：{{ user.name }}</p>    <p>年齡：{{ user.age }}</p>    <button @click="user.age++">過年啦</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)聽到了")})</script>

通過watch監(jiān)聽對象的一個屬性（簡單類型）

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

<template>    <p>姓名：{{ user.name }}</p>    <p>年齡：{{ user.age }}</p>    <button @click="user.age++">過年啦</button></template><script setup>import { ref, watch, reactive } from "vue";let user = reactive(    {        name: "幾何心涼",        age: 18    })watch(()=>user.age, () => {    console.log("我監(jiān)聽到了user.age的變化")})</script>

通過watch監(jiān)聽對象的一個屬性（復雜類型）

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

<template>    <p>姓名：{{ user.name }}</p>    <p>年齡：{{ user.age }}</p>    <p>薪資：{{ user.info.wages }}</p>    <button @click="user.age++">過年啦</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)聽到了user.info的變化")},{    deep:true})</script>

通過watch監(jiān)聽數(shù)據(jù)默認執(zhí)行

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

<template>    <div>        總贊數(shù)：{{ num }} <button @click="num++">點贊</button>    </div></template><script setup>import { ref, watch, reactive } from "vue";const num = ref(0)watch(num, () => {    console.log("我打印了")},{    immediate:true})</script>

寫在最后

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

（學習視頻分享：vuejs入門教程、編程基礎視頻）

以上就是詳解Vue3中的setup語法糖、computed函數(shù)、watch函數(shù)的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！

關(guān)鍵詞：