詳解Vue3中的setup語法糖、computed函數、watch函數

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

setup 語法糖

大家發現沒有，在我們前面幾篇文章中的案例程式碼中，每個案例的模板中都有一些雷同程式碼，這些程式碼就是我們的setup函數，但是作為組合API的入口函數，我們所有的組合式API都要寫到裡面，難道我們每次都要寫上這一坨麼，其實在Vue中提供了setup 的語法糖，語法糖大家都知道是什麼嘛？【相關推薦：、】

就比如我們Vue2中的 v-model 不就是語法糖麼，可以通過這樣一個指令省去了大量的雙向資料繫結的程式碼！那我們來看一下我們的setup都夠簡化成為什麼樣子，以下面程式碼為例，我們宣告一個函數，點選按鈕觸發喊出列印 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語法糖後的程式碼效果，功能實現上是一樣的；在 script setup 的標籤中，所有的資料、函數可以直接在模板中使用！大家可以多多嘗試一下，可以將我們 Vue3通透教學【四】文章中的例子使用setup語法糖的方式進行改造一下！

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

computed函數

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

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

我們可以舉一個簡單的例子，比如我們定義一個成績數位，單純的分數資訊，那我們通過 computed 函數來為我們計算出超過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 函數

跟computed函數一樣，watch函數也是組合式API中的一員，watch其實就是監聽資料變化的函數，那麼在Vue3中它都有哪些用法呢？可以使用watch監聽一個或者多個響應式資料，可以使用watch監聽響應式資料中的一個屬性（簡單資料 or 複雜資料）可以設定深度監聽，也可以使用watch監聽實現預設執行；我們來分開嘗試一下程式碼的寫法

通過watch監聽一個資料

watcha監聽一個資料，函數兩個引數：第一個要監聽的資料，第二個引數是監聽值發生變化後觸發的回撥函數，其中回撥函數也有兩個引數新值、老值

<template>
    <div>
        總贊數：{{ num }} <button @click="num++">點贊</button>
    </div>
</template>

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

//建立一個響應式資料，我們通過點贊按鈕改變num的值

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

通過watch監聽多個資料

watcha監聽多個資料，例如下面的我們需要監聽num和user物件的變化，函數兩個引數：第一個要監聽的資料（因為是多個資料所以用陣列），第二個引數是監聽值發生變化後觸發的回撥函數。

<template>
    <div>
        總贊數：{{ 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('我監聽到了')
})
</script>
登入後複製

通過watch監聽物件的一個屬性（簡單型別）

watch監聽物件的一個屬性並且是簡單型別的屬性，比如我們監聽下面的user中的age值，他是一個簡單型別，那我們watch的第一個引數形式需要是將物件屬性作為返回值的函數；第二個引數是改變後的回撥函數。

<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('我監聽到了user.age的變化')
})
</script>
登入後複製

通過watch監聽物件的一個屬性（複雜型別）

watch監聽物件的一個屬性並且是複雜型別的屬性，比如下面的我們要監聽user中的info，我們嘗試一下改變user中info中的wages值，那我們watch的第一個引數形式需要是將物件屬性作為返回值的函數；第二個引數是改變後的回撥函數。這時候還需要第三個引數那就是 deep 開啟深度監聽

<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('我監聽到了user.info的變化')
},{
    deep:true
})
</script>
登入後複製

通過watch監聽資料預設執行

其實這種情況並不多但是也會遇到這種情況，就是我們在監聽資料變化的時候，先預設執行一次；其實就是新增我們的immediate引數為true，我們以最初的num為例哈！

<template>
    <div>
        總贊數：{{ 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語法糖，我們編碼更便捷，並且帶領大家掌握 computed、watch 函數的使用，希望大家能夠自己實現上面的案例功能哦，做到真正的掌握這些點！下一篇文章中我們將帶領大家學習Vue3的生命週期，拭目以待吧！各位小夥伴讓我們 let’s coding！

（學習視訊分享：、）

以上就是詳解Vue3中的setup語法糖、computed函數、watch函數的詳細內容，更多請關注TW511.COM其它相關文章！