选项式API与之前写法相同,本篇文章主要通过 Options API 和 Composition API 对比 watch 的使用方法,让您快速掌握 vue3 中 watch 新用法。建议收藏!

一、watch 新用法

选项式API中,watch 使用

watch:{
mood(curVal,preVal){
console.log('cur',curVal);//最新值
console.log('pre',preVal);//修改之前的值
}
}

2.1、watch 使用语法

在 Composition API 中,使用 watch 时,必须先引入。使用语法为:

import { watch } from "vue"
watch(
name ,
( curVal , preVal )=>{ //业务处理 },
options
)

共有三个参数,分别为:

  • name :需要帧听的属性
  • (curVal,preVal)=>{ //业务处理 } 箭头函数,是监听到的最新值和本次修改之前的值,此处进行逻辑处理。
  • options :配置项,对监听器的配置,如:是否深度监听。

页面刚进入的时候并不会执行,值发生改变的时候,才会打印出当前最新值和修改之前的值。

示例1:监听一个数据

import { ref , watch } from "vue"
export default{
setup(){
const mood = ref("")
//帧听器
watch(mood,(curVal,preVal)=>{
console.log('cur',curVal);
console.log('pre',preVal);
},{
//配置项
})
return{
mood
}
}
}

watch 也可以监听多个属性值,此时传入的数据变成数组形式,配置项保持不变。

2.2、watch 监听多个属性值

示例2:监听多个属性

watch([mood,target],([curMood,curTarget],[preMood,preTarget])=>{
console.log('curMood',curMood);
console.log('preMood',preMood);
console.log('curTarget',curTarget);
console.log('preTarget',preTarget);
},{
//配置项
})

2.3、watch 监听引用数据类型

watch 监听引用数据类型时,如果只监听其中某个属性时,使用语法如:

watch(()=>obj.name,(curValue,preValue)=>{
//帧听引用数据类型的某个属性
},{
//配置项
})

第一个参数,回调函数返回的是需要帧听对象的属性。后边的参数与上边的一致。

示例3:帧听对象某个属性

<template>
<div>
{{obj}}
<input type="text" v-model="obj.name">
</div>
</template>
<script>
import { ref , reactive , watch } from "vue"
export default{
setup(){
const obj = reactive({ name:'qq',sex:'女' })
watch(()=>obj.name,(cur,pre)=>{
console.log('cur',cur);
},{ })
return{
obj
}
}
}
</script>

如果我们试着把属性去掉,直接监听整个对象,发现watch好像失效了。此时我们就需要引入 watchEffect。

二、watchEffect

watchEffect 也是一个帧听器,是一个副作用函数。它会监听引用数据类型的所有属性,不需要具体到某个属性,一旦运行就会立即监听,组件卸载的时候会停止监听。

示例4:监听对象

<template>
<div>
{{obj}}
<input type="text" v-model="obj.name">
<input type="text" v-model="obj.sex">
</div>
</template>
<script>
import { reactive , watchEffect } from "vue"
export default{
setup(){
let obj = reactive({ name:'qq',sex:'女'})
watchEffect(() => {
console.log('name',obj.name);
console.log('sex' , obj.sex);
})
return{
obj
}
}
}
</script>

watchEffect 参数只有一个回调函数。此时刷新页面进入,watchEffect 就会打印结果。

三、watch 与 watchEffect 区别和联系

watch 与 watchEffect 都是监听器,那么它们之间有什么关系呢?

3.1、watch特点

watch 监听函数可以添加配置项,也可以配置为空,配置项为空的情况下,watch的特点为:

  1. 有惰性:运行的时候,不会立即执行。
  2. 更加具体:需要添加监听的属性。
  3. 可以访问属性之前的值:回调函数内会返回最新值和修改之前的值。
  4. 可配置:可以添加配置项。

3.2、watch 配置项

watch 的配置项可以补充watch特点上的不足,可以配置的有:

  1. immediate:配置watch属性是否立即执行,值为 true 时,一旦运行就会立即执行,值为false时,保持惰性。
  2. deep:配置 watch 是否深度监听,值为 true 时,可以监听对象所有属性,值为 false 时保持更加具体特性,必须指定到具体的属性上。

3.3、watchEffect 特点

watchEffect 副作用函数它的特点分别为:

  1. 非惰性:一旦运行就会立即执行。
  2. 更加抽象:使用时不需要具体指定监听的谁,回调函数内直接使用就可以。相比watch比较难理解。
  3. 不可访问之前的值:只能访问当前最新的值,访问不到修改之前的值。

3.4、watch 与 watchEffect 联系

watch 的前两个特点与 watchEffect 的两个特点刚好相反,watch 通过配置项可以修改成带有 watchEffect 特点。

示例5:watch 监听对象

<template>
<div>
{{obj}}
<input type="text" v-model="obj.name">
</div>
</template>
<script>
import { ref , reactive , watch } from "vue"
export default{
setup(){
const obj = reactive({ name:'qq',sex:'女' })
watch(()=>obj,(cur,pre)=>{
console.log('cur',cur);
},{
immediate:true,
deep:true
})
return{
obj
}
}
}
</script>

好了小编今天的文章就到此结束了,喜欢我的可以点个关注哦!

vue 3 学习笔记 (六)——watch 、watchEffect 新用法的更多相关文章

  1. vue 3 学习笔记 (八)——provide 和 inject 用法及原理

    在父子组件传递数据时,通常使用的是 props 和 emit,父传子时,使用的是 props,如果是父组件传孙组件时,就需要先传给子组件,子组件再传给孙组件,如果多个子组件或多个孙组件使用时,就需要传 ...

  2. java之jvm学习笔记六-十二(实践写自己的安全管理器)(jar包的代码认证和签名) (实践对jar包的代码签名) (策略文件)(策略和保护域) (访问控制器) (访问控制器的栈校验机制) (jvm基本结构)

    java之jvm学习笔记六(实践写自己的安全管理器) 安全管理器SecurityManager里设计的内容实在是非常的庞大,它的核心方法就是checkPerssiom这个方法里又调用 AccessCo ...

  3. # go微服务框架kratos学习笔记六(kratos 服务发现 discovery)

    目录 go微服务框架kratos学习笔记六(kratos 服务发现 discovery) http api register 服务注册 fetch 获取实例 fetchs 批量获取实例 polls 批 ...

  4. Java IO学习笔记六:NIO到多路复用

    作者:Grey 原文地址:Java IO学习笔记六:NIO到多路复用 虽然NIO性能上比BIO要好,参考:Java IO学习笔记五:BIO到NIO 但是NIO也有问题,NIO服务端的示例代码中往往会包 ...

  5. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  6. Learning ROS for Robotics Programming Second Edition学习笔记(六) indigo xtion pro live

    中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...

  7. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  8. Typescript 学习笔记六:接口

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  9. python3.4学习笔记(六) 常用快捷键使用技巧,持续更新

    python3.4学习笔记(六) 常用快捷键使用技巧,持续更新 安装IDLE后鼠标右键点击*.py 文件,可以看到Edit with IDLE 选择这个可以直接打开编辑器.IDLE默认不能显示行号,使 ...

随机推荐

  1. ubuntu20.04安装网易云音乐

    Ubuntu20.04安装网易云 进入网易云音乐下载地址 下载对应客户端 进入终端,安装 sudo dpkg -i 软件名.deb

  2. 后缀自动机(SAM)奶妈式教程

    后缀自动机(SAM) 为了方便,我们做出如下约定: "后缀自动机" (Suffix Automaton) 在后文中简称为 SAM . 记 \(|S|\) 为字符串 \(S\) 的长 ...

  3. python在指定一行的下一行插入文本

    给定一个程序,程序中有许多函数,比如,funcA,funcB,现在,如何在生成的函数中插入一个logger()语句? 这里用一个solidity程序做例子 pragma solidity ^0.4.0 ...

  4. 8.5(337)——树形dp

    将题目进行翻译,就是遍历二叉树算出最大权值,在遍历过程中,不能同时选择两个相连的节点. 第一种子问题的构造,是以爷爷--父亲--孙子的"三代"节点一同构造的,将最优子问题的结构定义 ...

  5. 网络通信IO的演变过程(一)(一个门外汉的理解)

    以前从来不懂IO的底层,只知道一个大概,就是输入输出的管道怼到一起,然后就可以传输数据了. 最近看了周志垒老师的公开课后,醍醐灌顶. 所以做一个简单的记录. 0 计算机组成原理相关 0.1. 计算机的 ...

  6. 【UE4 C++】播放声音、特效

    播放声音 PlaySoundAtLocation() USoundCue* HitSound = LoadObject<USoundCue>(this, TEXT("SoundC ...

  7. 寻找写代码感觉(八)之SpringBoot过滤器的使用

    一.什么是过滤器? 过滤器是对数据进行过滤,预处理过程,当我们访问网站时,有时候会发布一些敏感信息,发完以后有的会用*替代,还有就是登陆权限控制等,一个资源,没有经过授权,肯定是不能让用户随便访问的, ...

  8. Scrum Meeting 16

    第16次例会报告 日期:2021年06月11日 会议主要内容概述: 最后一次例会 一.进度情况 我们采用日报的形式记录每个人的具体进度,链接Home · Wiki,如下记录仅为保证公开性: 组员 负责 ...

  9. Prometheus监控Canal

    Prometheus监控Canal 一.背景 二.实现步骤 1.修改prometheus.yml配置文件 2.启动prometheus 3.查看prometheus是否成功接入canal 4.cana ...

  10. Java-基础-LinkedList

    1. 简介 LinkedList 同时实现了List和Deque接口,也就是说它既可以看作是一个顺序容器,又可以看作是双向队列. 既然是双向列表,那么它的每个数据节点都一定有两个指针,分别指向它的前驱 ...