详解Vue3中的setup语法糖、computed函数、watch函数

PHP中文网 • 2025年4月1日 16:41:02 • 编程技术 • 阅读 1

本篇文章带大家学习vue3，了解vue3中的setup语法糖、computed函数、watch函数，希望对大家有所帮助！

setup 语法糖

大家发现没有，在我们前面几篇文章中的案例代码中，每个案例的模板中都有一些雷同代码，这些代码就是我们的setup函数，但是作为组合API的入口函数，我们所有的组合式API都要写到里面，难道我们每次都要写上这一坨么，其实在Vue中提供了setup 的语法糖，语法糖大家都知道是什么嘛？【相关推荐：vuejs视频教程、vuejs视频教程】

就比如我们Vue2中的 v-model 不就是语法糖么，可以通过这样一个指令省去了大量的双向数据绑定的代码！那我们来看一下我们的setup都够简化成为什么样子，以下面代码为例，我们声明一个函数，点击按钮触发喊出打印 hi 这样一个简单的效果；

立即学习“前端免费学习笔记（深入）”；

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

登录后复制

                
const hello = () => {    console.log('hi')}

登录后复制

上面是我们使用setup语法糖后的代码效果，功能实现上是一样的；在 script setup 的标签中，所有的数据、函数可以直接在模板中使用！大家可以多多尝试一下，可以将我们 Vue3通透教程【四】文章中的例子使用setup语法糖的方式进行改造一下！

在 script setup 中的顶层变量都可以直接在模板中使用

vuejs视频教程、vuejs视频教程）

            成绩单
         {{ num }} /         及格成绩单
         {{ num }} /     
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)})

登录后复制

            总赞数：{{ num }}     
import { ref, watch } from 'vue';//创建一个响应式数据，我们通过点赞按钮改变num的值const num = ref(0)watch(num, (nv, ov) => {    console.log(nv, ov)})

登录后复制

            总赞数：{{ num }}     
    姓名：{{ user.name }}
    年龄：{{ user.age }}
    import { ref, watch, reactive } from 'vue';const num = ref(0)let user = reactive(    {        name: "几何心凉",        age: 18    })watch([num, user], () => {    console.log('我监听到了')})

登录后复制

    姓名：{{ user.name }}
    年龄：{{ user.age }}
    import { ref, watch, reactive } from 'vue';let user = reactive(    {        name: "几何心凉",        age: 18    })watch(()=>user.age, () => {    console.log('我监听到了user.age的变化')})

登录后复制

    姓名：{{ user.name }}
    年龄：{{ user.age }}
    薪资：{{ user.info.wages }}
        import { ref, watch, reactive } from 'vue';let user = reactive(    {        name: "几何心凉",        age: 18,        info:{            wages:20000        }    })watch(()=>user.info, () => {    console.log('我监听到了user.info的变化')},{    deep:true})

登录后复制

            总赞数：{{ num }}     
import { ref, watch, reactive } from 'vue';const num = ref(0)watch(num, () => {    console.log('我打印了')},{    immediate:true})

登录后复制

以上就是详解Vue3中的setup语法糖、computed函数、watch函数的详细内容，更多请关注【创想鸟】其它相关文章！

发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3230651.html