首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Vue前端篇——Vue 3的watch深度解析

Vue前端篇——Vue 3的watch深度解析

原创
作者头像
小明爱吃火锅
发布于 2024-07-27 10:09:41
发布于 2024-07-27 10:09:41
2.2K00
代码可运行
举报
文章被收录于专栏:小明说Java小明说Java
运行总次数:0
代码可运行

前言

在Vue.js的世界里,数据驱动是核心理念。而在这个理念中,watch扮演着一个至关重要的角色。它允许我们监视数据的变化,并在数据变化时执行相应的逻辑,本文也是通过案例代码来讲讲watch的用法。

一、watch的基本作用

watch的主要作用是监视数据的变化。当被监视的数据发生变化时,watch会自动触发相应的回调函数,从而允许我们在数据变化后执行一些特定的操作。

二、Vue3中watch的特点

与Vue2相比,Vue3中的watch有一些显著的特点:

  1. 监视范围的限制:在Vue3中,watch只能监视以下四种数据:
  • 使用ref定义的数据。
  • 使用reactive定义的数据。
  • 函数返回一个值(即getter函数)。
  • 一个包含上述内容的数组。
  1. 深度监视的能力:通过设置deep: true选项,我们可以实现对被监视对象的深度监视。这意味着,即使被监视对象的内部属性发生了变化,watch也会触发相应的回调函数。

三、实际应用场景

在实际开发中,watch可以应用于多种场景。例如,在表单验证中,我们可以使用watch来监视表单输入框的值的变化,并在值变化时进行相应的验证操作。

此外,在数据请求和处理中,watch也可以发挥重要作用。例如,当某个数据发生变化时,我们可以使用watch来触发相应的数据请求操作,并在请求完成后对数据进行处理和展示。

四、示例代码解析

接下来使用一个代码案例来说明watch的用法。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
  <div class="person">
    <h1>情况五:监视上述的多个数据</h1>
    <h2>姓名:{{ person.name }}</h2>
    <h2>年龄:{{ person.age }}</h2>
    <h2>汽车:{{ person.car.c1 }}{{ person.car.c2 }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeC1">修改第一台车</button>
    <button @click="changeC2">修改第二台车</button>
    <button @click="changeCar">修改整个车</button>
  </div>
</template>

<script lang="ts" setup name="Person_watch">
import {reactive,watch} from 'vue'

// 数据
let person = reactive({
  name:'张三',
  age:18,
  car:{
    c1:'奔驰',
    c2:'宝马'
  }
})
// 方法
function changeName(){
  person.name += '~'
}
function changeAge(){
  person.age += 1
}
function changeC1(){
  person.car.c1 = '奥迪'
}
function changeC2(){
  person.car.c2 = '大众'
}
function changeCar(){
  person.car = {c1:'雅迪',c2:'爱玛'}
}

// 监视,情况五:监视上述的多个数据
watch([()=>person.name,person.car],(newValue,oldValue)=>{
  console.log('person.car变化了',newValue,oldValue)
},{deep:true})

</script>

运行结果如下:

在提供的示例代码中,可以看到一个典型的watch应用场景。在这个场景中,定义了一个名为person的响应式对象,并使用watch来监视这个对象的变化。

具体来说,使用watch来监视person对象的name属性和car属性的变化。当这两个属性中的任何一个发生变化时,watch会自动触发相应的回调函数,并在控制台中输出变化前后的值。

此外,还可以注意到,在watch的配置选项中,设置了deep: true。这是因为person对象的car属性本身也是一个对象,而希望监视到这个对象内部属性的变化。因此,通过设置deep: true,可以实现对person对象的深度监视。

五、总结

总的来说,Vue3中的watch是一个非常强大且灵活的工具。它允许我们监视数据的变化,并在数据变化时执行相应的逻辑。通过合理地使用watch,我们可以实现更加高效和便捷的数据处理和展示。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
vue3 watch监听应用技巧
之前用过vue2中的watch监听,最近在学vue3,对比两个版本对于watch使用的不同之处做个总结,然后记录下vue3中watch中的具体使用方法和技巧
iwhao
2024/07/25
2890
深入理解 Vue3 中的 setup 函数
Options API 是 Vue.js 2.x 中使用的传统组件设计模式。它基于选项对象,将组件的数据、计算属性、方法、生命周期钩子等功能按照选项的形式进行组织。Options API 的特点包括:
小馒头学Python
2024/05/02
6212
深入理解 Vue3 中的 setup 函数
Vue3学习笔记 —— Composition API 快速入门
对比 Vue2 中 OPTIONS API,data 和 methods 的定义如下所示
Gorit
2021/12/08
5690
Vue3学习笔记 —— Composition API 快速入门
Vue前端篇—— Vue3首个语法之Setup详解
随着 Vue3 的发布,Composition API 作为其核心特性之一,为前端开发者带来了全新的组件编写方式。其中,setup 函数作为 Composition API 的入口,提供了一种更加灵活和模块化的方式来组织组件逻辑。本文将详细介绍 setup 函数的用法和特点,帮助开发者更好地理解和应用这一新特性。
小明爱吃火锅
2024/07/22
2.7K0
vue3 day4
vue3中依然可以使用v2的配置方式来定义生命周期钩子,但是有两个生命周期更改了名字
花花522
2023/03/07
2930
vue3 day4
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化
vite 是新一代前端构建工具,官网地址:https://vitejs.cn,vite的优势如下:
HelloWorldZ
2024/03/20
6170
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化
vue3知识点:reactive函数
答案:请看官方文档: https://v3.cn.vuejs.org/guide/composition-api-introduction.html
刘大猫
2024/10/31
2040
Vue前端篇——第一个VUE3组件创建三部曲
在探索Vue3的前端世界时,上一篇简单介绍Vue3的目录结构,为了深入了解其核心组件的创建与应用。本文将通过实战的方式,带领大家一步步构建起第一个Vue3组件,并深入解析其背后的原理。首先先介绍重点三步骤:引入createApp用于创建应用-》引入App根组件-》使用createApp创建组件。
小明爱吃火锅
2024/07/04
1.2K0
vue3 day02
reactive 作用: 定义一个对象类型的响应式数据(基本类型不要用它,要用ref函数) 语法: const 代理对象 = reactive(源对象) 接收一个对象(或数组),返回一个代理对象(Proxy的实例对象,简称proxy对象) reactive定义的响应式数据是深层次的 内部基于es6的proxy实现的,通过代理对象操作源对象内部数据进行操作 如果使用reactive来定义基本类型,会有如下报错 let number = reactive(666) 使用reactive代理ref 避免.v
花花522
2023/03/07
2650
vue3 day02
Vue3基础
官方文档:https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create
六个周
2022/10/28
1.1K0
Vue3基础
【BlogAdmin升级2】VUE3重点函数API说明
注意: 在template中执行使用数据,在脚本中需要访问 不管是简单类型还是对象都用数据.value就行调用
老张的哲学
2024/02/22
1460
【BlogAdmin升级2】VUE3重点函数API说明
一篇文章上手Vue3中新增的API
作者:liulongbin http://www.liulongbin.top:8085/#/?id=_3-setup 1. 初始化项目 // ① npm i -g @vue/cli // ② vue
Nealyang
2020/10/26
1.1K0
Vue3学习笔记(二)——组合式API(Composition API)
官方文档: https://v3.cn.vuejs.org/guide/composition-api-introduction.html
张果
2022/10/31
4.6K0
Vue3学习笔记(二)——组合式API(Composition API)
vue3笔记1 组件配置API
vue2中的数据,计算属性,方法,生命周期钩子等都可以在setup函数中构造 setup函数返回:
路过君
2022/04/13
4270
vue3 day03
reactive对比ref 从定义角度对比 ref用来定义:基本数据类型 reactive用来定义: 对象(或数组)类型数据 备注: ref也可以用来定义对象(或数组)类型数据,它内部会自动通过reactive转为代理对象 从原理角度来对比 ref使用了是Object.defineProperty()的get和set来实现响应式(数据劫持) reactive使用了es6的proxy来实现响应式(数据劫持),并通过Reflect操作源对象内部的数据 从使用角度对比 ref定义的数据: 操作数据时需要使用.va
花花522
2023/03/07
2470
vue3 day03
Vue3学习笔记
①性能的提升 打包大小减少41%、初次渲染快55%,更新渲染快133%,内存减少54%…… ②源码的升级
玖柒的小窝
2021/09/29
9130
Vue3学习笔记
Vue:watch监视
实际上,只有第三个方法触发了监视,这意味着 监视ref定义的对象数据,实际监视的是它的地址值,但是如果我们想要监视它内部的值呢?这时候就需要深度监视
姓王者
2024/10/31
1430
[科普文] Vue3 到底更新了什么?
Vue3 已经发布一段时间了,这个版本从底层实现到上层 API 设计都发生了非常大的变化,但具体改变了些什么呢?一起简单盘点下:
Tecvan
2022/03/31
1.1K0
[科普文] Vue3 到底更新了什么?
快速使用Vue3最新的15个常用API
之前我写了一篇博客介绍了Vue3的新特性,简单了解了一下Vue3都有哪些特色,并且在文末带大家稍微体验了一下Vue3中 Compsition API 的简单使用
若川
2020/12/15
3.5K0
快速使用Vue3最新的15个常用API
校招前端二面高频vue面试题
在Vue中,对响应式处理利用的是Object.defineProperty对数据进行拦截,而这个方法并不能监听到数组内部变化,数组长度变化,数组的截取变化等,所以需要对这些操作进行hack,让Vue能监听到其中的变化。 那Vue是如何实现让这些数组方法实现元素的实时更新的呢,下面是Vue中对这些方法的封装:
bb_xiaxia1998
2022/12/20
1.5K0
相关推荐
vue3 watch监听应用技巧
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档