Vue3的计算属性(computed)和监听器(watch)案例语法

一:前言

Vue3 是 Vue2 的一个升级版,随着 2023年12月31日起 Vue2 停止维护。这意味着 Vue3 将会为未来国内一段时间里,前端的开发主流。因此熟练的掌握好 Vue3 是前端开发程序员所不可避免的一门技术栈。而 Vue3 是 Vue2 的一个升级版,其语法大多相似。不过也有不同之处。比如计算属性(computed)和监听器(watch)的写法就有所不同。接下来我会通过一个案例,来描述在 Vue3 中的写法。

二:案例代码

1、html 部分

这里是 html 的代码部分,由于只是基础案例,因此界面布局是没有那么复杂的,只是一些输入框这些显示罢了。显示效果见最上方的图片。

html 复制代码
<template>
    <div class="el">
        <h1>计算属性和监视</h1>
    </div>
    <fieldset>
        <legend>姓名操作</legend>
        姓氏:<input placeholder="请输入姓氏" type="text" v-model="user.firstName"/><br />
        名字:<input placeholder="请输入名字" type="text" v-model="user.lastName"/><br />
    </fieldset>
    <fieldset>
        <legend>计算属性和监视的演示</legend>
        姓名:<input placeholder="显示姓名" type="text" v-model="fullName1"/><br />
        姓名:<input placeholder="显示姓名" type="text" v-model="fullName2"/><br />
        姓名:<input placeholder="显示姓名" type="text" v-model="fullName3"/><br />
    </fieldset>
</template>

2、JavaScript 部分

这块是我们实现的逻辑了。这里我写的还是最初的 Vue3 版本,并不是 3.2 之后的写法,我们可以看到 computed 中的 get 和 set 写法。以及两种 watch 监听器方法。

javascript 复制代码
import { computed, defineComponent, reactive, ref, watch, watchEffect } from 'vue';


export default defineComponent({
    setup() {
        // 定义响应式对象
        const user = reactive({
            firstName: '东方',
            lastName: '不败',
        })
        // 当只有一个回调函数的时候,默认是get
        const fullName1 = computed(()=>{
            return user.firstName + '_' + user.lastName
        })
        // computed同步修改
        const fullName2 = computed({
            get(){
                return user.firstName + '_' + user.lastName
            },
            set(val:string){
                const names = val.split('_')
                user.firstName = names[0]
                user.lastName = names[1]
            }
        })
        // 监听器
        const fullName3 = ref('')
        watch(user,({firstName,lastName})=>{
            fullName3.value = firstName + '_' + lastName
        },{immediate:true,deep:true})

        // 第二种监听器,和上面的泣别就是默认immediate和deep为true
        watchEffect(()=>{
            fullName3.value = user.firstName + '_' + user.lastName
        })

        return {
            user,
            fullName1,
            fullName2,
            fullName3
        }
    }
})

3、css部分

html 复制代码
<style lang="scss" scoped>
fieldset{
    padding: 10px;
}
</style>

三:结尾

有 Vue2 基础的小伙伴对这块写法应该很容易理解。初学者可以自己动手写一下。最后附上项目gitee源码地址:

乾辰/vue3全家桶练习https://gitee.com/qianchen12138/vue3-family-bucket-practice

相关推荐
艾小码几秒前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
闰五月1 分钟前
JavaScript作用域与作用域链详解
前端·面试
泉城老铁5 分钟前
idea 优化卡顿
前端·后端·敏捷开发
前端康师傅5 分钟前
JavaScript 作用域常见问题及解决方案
前端·javascript
司宸6 分钟前
Prompt结构化输出:从入门到精通的系统指南
前端
我是日安7 分钟前
从零到一打造 Vue3 响应式系统 Day 9 - Effect:调度器实现与应用
前端·vue.js
Mintopia19 分钟前
🚀 Next.js 全栈 E2E 测试:Playwright vs Cypress
前端·javascript·next.js
原生高钙19 分钟前
JS设计模式指南
前端·javascript
拳打南山敬老院22 分钟前
漫谈 MCP 构建之Resources篇
前端·后端·ai编程