Detailed explanation of setup syntax sugar, computed function, and watch function in Vue3

This article will help you learn Vue3 and understand the setup syntax sugar, computed function, and watch function in Vue3. I hope it will be helpful to you!

setup syntax sugar

Have you noticed that in our previous articles? In the case code, there are some similar codes in the template of each case. These codes are our setup function, but as the entry function of the combined API, all our combined APIs must be written in it. Do we have to write it every time? Do you want to write this thing? In fact, Vue provides syntactic sugar for setup. Does everyone know what syntactic sugar is? [Related recommendations: vuejs video tutorial, web front-end development]

For example, v-model in our Vue2 is just syntactic sugar. You can pass such a command Saves a lot of two-way data binding code! Then let’s take a look at how our setup can be simplified. Taking the following code as an example, we declare a function and click a button to trigger a simple effect such as printing hi;

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

<script>
export default {
    setup() {
        const hello = () => {
            console.log(&#39;hi&#39;)
        }

        return { hello }
    }
}
</script>

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

<script setup>
const hello = () => {
    console.log(&#39;hi&#39;)
}
</script>

The above is what we use The code effect after the setup syntax sugar is the same in functional implementation; in the script setup tag, all data and functions can be used directly in the template! You can give it a try. You can modify the examples in our Vue3 Transparency Tutorial [4] article using setup syntax sugar!

The top-level variables in script setup can be used directly in the template

---

computed function

In the last article, we learned two combined APIs, namely ref and reactive. Now we are learning the computed function. I believe everyone must know that it is our calculated data definition function. Before, it was the computed option. Now comes the computed function; let’s experience it through a small case! Use of computed functions: In fact, under what circumstances will we use computed properties? It must be to obtain new data through dependent data!

1) Introduce computed from Vue
2) Use it in setup, use a function, the return value of the function is the calculated data
3) Finally, return it through setup, template Use it. If you use setup syntax sugar, this step is not needed.

We can give a simple example. For example, if we define a score number, pure score information, then we use the computed function to calculate it for us. More than 60 passing results were obtained; we directly used the script setup method to code!

<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 &#39;vue&#39;;

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

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

watch function

Like the computed function, the watch function is also a part of the combined API Member, watch is actually a function that monitors data changes, so what are its uses in Vue3? You can use watch to monitor one or more responsive data, you can use watch to monitor an attribute in the responsive data (simple data or complex data), you can configure deep monitoring, or you can use watch monitoring to implement default execution; let's try the code separately. How to write

Monitoring a data through watch

##watcha monitors a data, the function has two parameters: the first one to be monitored Data, the second parameter is the callback function triggered after the monitoring value changes. The callback function also has two parameters: new value and old value

<template>
    <div>
        总赞数：{{ num }} <button @click="num++">点赞</button>
    </div>
</template>

<script setup>
import { ref, watch } from &#39;vue&#39;;

//创建一个响应式数据，我们通过点赞按钮改变num的值

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

Monitor multiple data through watch

##watcha monitors multiple data. For example, below we need to monitor changes in num and user objects. The function has two parameters: A data to be monitored (an array is used because it is multiple data), and the second parameter is a callback function that is triggered when the monitoring value changes.

<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 &#39;vue&#39;;
const num = ref(0)
let user = reactive(
    {
        name: "几何心凉",
        age: 18
    }
)
watch([num, user], () => {
    console.log(&#39;我监听到了&#39;)
})
</script>

Listen to a property of the object through watch (simple type)

watch monitors an attribute of the object and it is a simple type of attribute. For example, if we monitor the age value in the user below, which is a simple type, then the first parameter form of our watch needs to be a function that uses the object attribute as the return value. ;The second parameter is the changed callback function.

<template>
    <p>姓名：{{ user.name }}</p>
    <p>年龄：{{ user.age }}</p>
    <button @click="user.age++">过年啦</button>
</template>

<script setup>
import { ref, watch, reactive } from &#39;vue&#39;;
let user = reactive(
    {
        name: "几何心凉",
        age: 18
    }
)
watch(()=>user.age, () => {
    console.log(&#39;我监听到了user.age的变化&#39;)
})
</script>

Listen to a property of the object through watch (complex type)

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 &#39;vue&#39;;
let user = reactive(
    {
        name: "几何心凉",
        age: 18,
        info:{
            wages:20000
        }
    }
)
watch(()=>user.info, () => {
    console.log(&#39;我监听到了user.info的变化&#39;)
},{
    deep:true
})
</script>

通过watch监听数据默认执行

其实这种情况并不多但是也会遇到这种情况，就是我们在监听数据变化的时候，先默认执行一次；其实就是添加我们的immediate参数为true，我们以最初的num为例哈！

<template>
    <div>
        总赞数：{{ num }} <button @click="num++">点赞</button>
    </div>
</template>

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

写在最后

掌握了setup语法糖，我们编码更便捷，并且带领大家掌握 computed、watch 函数的使用，希望大家能够自己实现上面的案例功能哦，做到真正的掌握这些点！下一篇文章中我们将带领大家学习Vue3的生命周期，拭目以待吧！各位小伙伴让我们 let’s coding！

（学习视频分享：vuejs入门教程、编程基础视频）

The above is the detailed content of Detailed explanation of setup syntax sugar, computed function, and watch function in Vue3. For more information, please follow other related articles on the PHP Chinese website!