一篇文章搞懂Vue3中的watch

于 2024-08-15 01:13:27 发布
阅读量473 收藏 3
点赞数 12
分类专栏： 前端实习 文章标签： 前端 学习 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AQiukai/article/details/141203550
版权

#前端实习

前言：

最近感觉自己的工作学习进展还是比较慢，今天主要写的是Vue3中的watch的相关方法，呃啊，拖延症很严重啊啊，希望自己能早日该掉，要是哪天在白天更新，和不再每日感叹自己的拖延症那一天大概就是自己的拖延症克服的那一天吧，如果有啥希望能看到的或者错误的希望可以指出，接下来速速进入正文

Vue3-watch 侦听器

基础概念：

在Vue3中，watch的特性进行了一些的改变和优化，与computed不同的是，watch常常用于监听响应式数据的变化，并且执行一些相关的从操作。比如，发送网络请求，更新DOM操作等。

功能：

监视数据的变化去做对应的事情

监视数据走逻辑

watch可以监视四种东西

  1. ref定义的数据
  2. reactive定义的数据
  3. 函数返回一个值（getter函数）
  4. 一个包含上述内容的数组

基本语法：

watch(source, callback, options?)

遇到的相关情况

情况一

监视ref定义的基本类型的数据，直接填写数据名即可，监视的是其value值的改变

监视的适合不需要写.value

<template>
  <div class="person">
    <h1>情况一：监视【ref】定义的【基本类型】数据</h1>
    <h2>当前求和为： {{ sum }}</h2>
    <button @click="changeSum">点击我sum+1</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { ref,watch } from 'vue';
//数据
let sum = ref(0)

//方法
function changeSum(){
  sum.value++
}

//监视
const stopWatch = watch(sum,(newVal,oldVal)=>{
  console.log('sum发生了变化',newVal,oldVal);
  if(newVal > 10){
    console.log('sum大于10了')
    stopWatch()
  }
})

</script>

<style scoped>
.person{
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius:10px;
  padding: 20px;
}

button{
  margin-right: 10px;
} 
li{
  font-size: 30px;
}
</style>
情况二

监视ref定义的对象类型的数据，直接写数据名，监视的是对象的地址值，，如果想监视对象内部的数据，要手动开启深度监视

<template>
  <div class="person">
    <h1>情况二：监视【ref】定义的【对象类型】数据</h1>
    <h2>姓名:{{ person.name }}</h2>
    <h2>年龄:{{ person.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { ref,watch } from 'vue';

//数据
let person = ref({
  name: '张三',
  age: 18
})

//方法
function changeName(){
  person.value.name += '~'
}

function changeAge(){
  person.value.age += 1
}

function changePerson(){
  person.value = {
    name: '李四',
    age: 90
  }
}

// //监视 情况一、监视【ref】定义的【对象类型】数据，监视的是对象的地址值。如果想要监视对象的属性，需要使用watchEffect
// watch的第一个参数是：被监视的数据
// watch第二个参数是：监视的回调
// watch的第三个参数是：配置对象（deep、immediate等等……） immediate表示是否立即执行回调
watch(person,(Value)=>{
  console.log('person发生了变化',Value);
  },{deep:true,immediate:true})
</script>

<style scoped>
.person{
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius:10px;
  padding: 20px;
}

button{
  margin-right: 10px;
} 
li{
  font-size: 30px;
}
</style>

注意：

  1. 如果修改的是ref定义的对象中的属性，newValue和oldValue都是新值，因为他们是同一个对象
  2. 如果修改整个ref定义的对象，newValue是新值，oldValue是旧值，因为不是同一个对象了
情况三

监视reactive定义的对象类型选的数据，且默认开启了深度监视

<template>
  <div class="person">
    <h1>情况三：监视【reactive】定义的【对象类型】数据</h1>
    <h2>姓名:{{ person.name }}</h2>
    <h2>年龄:{{ person.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
  </div>
</template>

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

//数据
let person = reactive({
  name: '张三',
  age: 18
})

//方法
function changeName(){
  person.name += '~'
}

function changeAge(){
  person.age += 1
}

function changePerson(){
  Object.assign(person , {
    name: '李四',
    age: 90
  })  //批量地将所有可枚举属性的值从一个或多个源对象分配到目标对象
}

// //监视 情况三、监视【reactive】定义的【对象类型】数据，且默认是开启深度监听的，该深度监听是递归的且无法关闭
watch(person,(newValue,oldValue)=>{
  console.log('person发生了变化',newValue,oldValue); //因为地址没有变化所以oldValue和newValue是一样的
  })
</script>

<style scoped>
.person{
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius:10px;
  padding: 20px;
}

button{
  margin-right: 10px;
} 
li{
  font-size: 30px;
}
</style>
情况四

监视ref或者reactive定义的【对象类型】数据中的某个属性

<template>
  <div class="person">
    <h2>姓名: {{ person.name }}</h2>
    <h2>年龄: {{ person.age }}</h2>
    <h2>车: {{ person.car.brand }} 价值: {{ person.car.price }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeBrand">修改车的品牌</button>
    <button @click="changePrice">修改车的价值</button>
    <button @click="changeCar">修改整个车</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { reactive , watch} from 'vue';
//数据
let person = reactive({
  name: '海星',
  age: 18,
  car:{
    brand: '宝马',
    price: 1000000
  }
  })

  //方法
function changeName (){
  person.name += '~'
}
function changeAge (){
  person.age += 1
}
function changeBrand (){
  person.car.brand += '~'
}
function changePrice (){ 
  person.car.price += 100000
}
function changeCar (){
  person.car = {
    brand: '奥迪',
    price: 2000000
  }
}

//监视 情况四：监视：监视响应式对象的某个属性，而且该属性是基本类型的，要写成函数式
watch(()=>{return person.name},(value)=>{
  console.log('person发生了变化',value);
})

//监视 情况四： 监视：监视响应式对象的某个属性，而且该属性是对象类型的，要写成函数式，也可以直接写，但是不太推荐有时候容易出问题
watch(()=>person.car,(value)=>{
  console.log('person.car发生了变化',value);
},{deep:true})  //外面一包函数，就又只监听地址了，所以要加deep:true

// watch(person.car,(value)=>{
//   console.log('person.car发生了变化',value);
// }) //这样一但car整个发生变化，地址改变，这样就不会监听到了
</script>

<style scoped>
.person{
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius:10px;
  padding: 20px;
}

button{
  margin-right: 10px;
} 
li{
  font-size: 30px;
}
</style>

注意点如下：
该属性不是【对象类型】，需要写成函数形式

该属性依然是【对象类型】，可直接编，也可直接写成函数，不过建议要写成函数

结论：监视的如果是对象里的属性，请最好谢谢函数式子。

注意点，如果对象监视的是地址值，需要关注对象的内部的相关信息，需要手动开启深度监视

情况五

监视：监视上述的多个数据

使用数组把要监视的属性全都括起来

<template>
  <div class="person">
    <h1>情况五：监视上述的多个数据</h1>
    <h2>姓名: {{ person.name }}</h2>
    <h2>年龄: {{ person.age }}</h2>
    <h2>车: {{ person.car.brand }} 价值: {{ person.car.price }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeBrand">修改车的品牌</button>
    <button @click="changePrice">修改车的价值</button>
    <button @click="changeCar">修改整个车</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { reactive , toValue, watch} from 'vue';
//数据
let person = reactive({
  name: '海星',
  age: 18,
  car:{
    brand: '宝马',
    price: 1000000
  }
  })
5
  //方法
function changeName (){
  person.name += '~'
}
function changeAge (){
  person.age += 1
}
function changeBrand (){
  person.car.brand += '~'
}
function changePrice (){ 
  person.car.price += 100000
}
function changeCar (){
  person.car = {
    brand: '奥迪',
    price: 2000000
  }
}
//监视 情况五：监视：监视上述的多个数据
watch(()=>[person.car.brand,person.name],(Value)=>{
  console.log('person.car.brand或者person.name发生了变化',Value)}
)


</script>

<style scoped>
.person{
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius:10px;
  padding: 20px;
}

button{
  margin-right: 10px;
} 
li{
  font-size: 30px;
}
</style>

以上的情况一和情况四用的比较多，写函数比较稳定，我不管你是什么我反手就写一个函数，需要深度，那咱就deep: true

秋凯Akikai
关注
  • 12
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端-一篇彻底搞懂Vue（computed,watch,methods）
GIS摆渡人
04-26 735
文章目录一. 理解Vue中的computed用法二：computed 和 methods的区别?三：Vue中的watch的用法四：computed的基本原理其他 一. 理解Vue中的computed用法 computed是计算属性的; 它会根据所依赖的数据动态显示新的计算结果, 该计算结果会被缓存起来。computed的值在getter执行后是会被缓存的。如果所依赖的数据发生改变时候, 就会重新调用getter来计算最新的结果。 下面我们根据官网中的demo来理解下computed的使用及何时使用compu
Vue watch监听详解，一篇文章彻底搞懂Vue2/Vue3中的watch监听
二三的博客
10-26 3315
watch监听在vue2和vue3中的用法详解（全）Vue2中的watch用法Vue3中的watch用法 首先写一个vue页面 <template> <h1>监听一个属性</h1> <p>求和：{{ sum }}</p> <button @click="sum++">点我加1</button><br /> <h2>监听多个属性</h2> <p>{{ tips
一篇文章弄懂vue3常用API
蛋蛋老公的博客
12-31 4784
1、使用vite创建项目 npm init @vitejs/app vue3-vite-demo 2、建立路由router 打开文件，建立router路由文件，建立index.js文件 import { createRouter, createWebHashHistory } from "vue-router"; import globalRoutes from "./globalRoutes"; import mainRoutes from "./mainRoutes"; const router
一篇文章搞懂vue基础(上)
weixin_51781852的博客
03-20 523
初识vue:1.想让Vue工作，就必须创建一个vue实例，且要传入一个配置对象；2.root容器里的代码依然符合html规范，只不过混入了一些特殊的vue语法3.root容器里的代码被称为【Vue模版】4.Vue实例和容器是一一对应的5.真实开发中只有一个Vue实例，并且会配合着组件一起使用6.{{×××}}中的×××要写成js表达式，且XXX可以自动读取到data中的所有属性7.一旦data中的数据发生改变，那么模版（页面）中用到该数据的地方也会自动更新。
关于vue中watch检测到不到对象属性的变化的解决方法
08-28
这篇文章将介绍解决这个问题的方法，并详细解释 Vue 中的 Watch 机制和深层监视对象属性的变化。 一、Vue 中的 Watch 机制 Vue 的 Watch 机制是指在组件中使用 Watch 属性来监视数据的变化。当数据发生变化时，...
vue实例，watch监听路由地址的改变
08-19
本篇文章将详细探讨如何在Vue实例中使用`watch`来监听路由地址的改变，并了解相关的知识点。 首先，我们需要安装Vue Router。如果你还没有安装，可以使用npm或yarn进行全局安装： ```bash npm install vue-router ...
vue3 封装一个全局通用弹窗提示组件（利用js调用 类似于element）
06-21
本篇文章将详细介绍如何利用Vue3的特性来封装一个类似于Element UI的全局通用弹窗提示组件，并通过JavaScript进行调用。 首先，我们需要了解Vue3中的Composition API。Vue3引入了Composition API，它允许我们在组件...
vue.js watch监听，vue.js 监听watch
05-03
在本篇文章中，我们将深入探讨Vue.js的`watch`监听机制，以及如何在实际开发中有效地使用它。 ### 1. Vue.js 的响应式原理 Vue.js 的核心之一是它的响应式系统。当创建一个新的Vue实例时，所有被`data`选项中的...
Vue.js计算属性computed与watch（5）
10-20
在这篇文章中，我们将深入探讨这两个概念，并通过实例来理解它们的工作原理。 首先，我们来看计算属性。计算属性是 Vue 实例中的一个特殊属性，它们用于存放计算得出的值。在模板中，我们可以直接使用这些计算属性...
Vue3 Suspense 和 defineAsyncComponent 结合使用方法
qq_30193097的博客
08-13 203
定义一个异步组件，它在运行时是懒加载的。参数可以是一个异步加载函数，或是对加载行为进行更具体定制的一个选项对象。用于协调对组件树中嵌套的异步依赖的处理。上述案例可以实现大型项目的骨架屏效果。
ASP.NET Core Web API 使用Autofac框架
鲤籽鲲的博客
08-08 573
ASP.NET Core Web API 使用Autofac框架
前端JS总结（中）
m0_54066656的博客
08-12 694
前端JS之内置对象总结，这很重要！！！
05_ Electron 自定义菜单、主进程与渲染进程通信
所学所思
08-09 662
单独写在一个 js 文件中，然后再在主进程中引入labe: "文件",submenu: [label: "新建文件",},label: "编辑",submenu: [label: "复制",},submenu: [// main.js// 1、引入初始化remote 模块width:800,})// __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html// 打开调试模式。
使用WebSocket实现一个简易的聊天室
qq_51321722的博客
08-14 210
其次，要有相关配置类以及Controller。我这里的框架是SpringBoot。首先，我们要有一个前端页面。
谷粒商城实战笔记-175~177-商城业务-检索服务-检索查询接口开发
epitomizelu的专栏
08-13 495
搜索页面搭建完成之后，点击搜索按钮，发送参数给后台服务，后台服务根据参数从Elasticsearch中查询符合条件的数据，返回给前端。
使用 TinyVue 组件库搭建前端项目的实操体验
Echo_Wish的博客
08-14 438
在这个示例中，我们创建了一个包含用户名和密码输入框的表单，并添加了表单验证功能。总的来说，TinyVue 组件库为前端开发提供了强大的支持和便利。通过这次活动，我不仅提升了自己的开发技能，还对 OpenTiny 的产品有了更深入的了解。在这个示例中，我们引入了 TinyButton 组件，并在按钮点击时触发一个成功消息。TinyVue 组件库提供了丰富的 UI 组件，可以满足各种业务需求。在项目中，我使用了 TinyVue 提供的多个组件来构建页面。首先，我按照官方文档的指引，完成了开发环境的准备工作。
vue3进阶用法之通过调用函数动态加载组件用法及示例
最新发布
wz9608的博客
08-14 164
vue官方文档那边虽然说了函数的使用方法，但没有列举这种业务场景。这里只是做一个简单的实例，其实可以通过这种方法实现其他更多的功能，比如说modal框等等等。
44 个 React 前端面试问题
广漂程序猿DevinRock
08-14 544
虚拟 DOM 是 React 中的一个概念，其中创建实际 DOM（文档对象模型）的轻量级虚拟表示并将其存储在内存中。它是一种用于优化 Web 应用程序性能的编程技术。当 React 组件的数据或状态发生更改时，虚拟 DOM 会被更新，而不是直接操作真实 DOM。然后，虚拟 DOM 计算组件的先前状态和更新状态之间的差异，称为“比较”过程。一旦识别出差异，React 就会高效地仅更新真实 DOM 的必要部分以反映更改。这种方法最大限度地减少了实际 DOM 操作的数量，并提高了应用程序的整体性能。
Vue3中watch
09-01
在Vue3中，可以使用watch函数来监听数据的变化。根据引用、引用和引用的内容，我们可以得出以下结论： 1. 可以监听对象的子属性，使用方式为watch(() => ({ ...demo }), (newValue, oldValue) => { console.log('watch 已触发', newValue) })。这样当demo的某个子属性发生变化时，watch函数会被触发，并打印出新的值。 2. 可以直接监听一个具体的属性，使用方式为watch(nums, () => {})或watch(() => demo.name, () => {})。这样当nums或demo.name发生变化时，watch函数会被触发。 3. 还可以监听整个对象，使用方式为watch(demo, (newValue, oldValue) => { console.log('watch 已触发', newValue) })。这样当整个demo对象发生变化时，watch函数会被触发，并打印出新的值。 总结起来，Vue3中的watch函数可以实现对对象属性的监听，无论是监听子属性、具体属性还是整个对象的变化。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [VUE3 中的 Watch 详解](https://blog.csdn.net/weixin_42776027/article/details/125759685)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值