watch 监听 reative 创建的值

const state = reactive({ nickname: "xiaofan", age: 20 });

setTimeout(() => {
state.age++;
}, 800); // 修改age值时会触发 watch的回调
watch(
() => state.age, //监听state中的age
(newValue, oldValue) => {
console.log("新值:", newValue, "老值:", oldValue);
}
);

watch 监听 ref 创建的值

const year = ref(100);

setTimeout(() => {
year.value++;
}, 1000); watch(() => state.value, (newValue, oldValue) => {
console.log("新值:", newValue, "老值:", oldValue);
});

watch 监听多个值

const state = ref(100)
let person=reactive({
name:'zs'
}) setTimeout(() => {
state.value++;
person.name='李四'
}, 800); watch(()=>[state.value, person.name ],([newAge,newName], [oldAge, oldName])=>{
console.log("年龄new:", newAge, "年龄old:", oldAge);
console.log("名称new:", newName,"年龄old:", oldName);
},); // 如果监听多个对象,第一个函数返回一个数组,
//数组中表示监听的值 ()=>[state.value, person.name ] // 第二个匿名函数, ([new1,new2],[old1,old2])=>{ }

watch去监听路由

watch(
() => route.fullPath,
(n, o) => {
console.log('监听路由')
console.log('new:' + n + ',old:' + o)
}
)

watch 的第三个参数 deep:true, immediate: true

watch(() => state.value, (newValue, oldValue) => {
console.log("新值:", newValue, "老值:", oldValue);
},{ deep: true, immediate: true } ); deep: true 表示开启深度监听。
immediate: true 无论数据是否发生变化,数据默认执行一次 在开启immediate: true。如何值没有发生变化,
newValue是初始值
oldValue就是 undefined

如何watch监听

有些时候,当我们监听到数据发生变化后。可能就不需要再次进行监听了。
这个时候我们可以取消监听。
将watch 赋值给一个变量。
let stopWatch=watch(伪代码); 然后需要取消的时候再次调用一次就可以了
stopWatch()
看下面的代码,当我点击取消监听按钮的时候。
就算数据发生变化,watch也会对该数据进行监听了

stop 停止监听watch的监听

<template>
<div>
<div class="bg">
{{ person }}
</div>
<a-button @click="changeValue">值发生变化了</a-button>
<a-button @click="cancelHander">取消监听</a-button>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, watch } from 'vue';
export default defineComponent({
setup() {
let person=reactive({
name:'zs'
})
let changeValue=()=>{
person.name='lisi'
}
// 修改age值时会触发 watch的回调
let stopWatch=watch(
() => person.name, //监听state中的age
(newValue, oldValue) => {
console.log("新值:", newValue, "老值:", oldValue);
}
);
// 停止watch监听
let cancelHander=()=>{
stopWatch()
}
return {
cancelHander,
person,
changeValue,
};
},
});
</script>

watchEffect的引入

还有一个监听函数watchEffect,
在我看来watch已经能满足监听的需求,
为什么还要有watchEffect呢?
虽然我没有 get 到它的必要性,
但是还是要介绍一下watchEffect,首先看看它的使用和watch究竟有何不同。
let  person=reactive({
name:'zs'
}) let state=ref(100) setInterval(()=>{
person.name='我是李四',
state.value=1000
},1000) // 修改age值时会触发 watch的回调
watchEffect(()=>{
console.log('state的变化后的值', state.value);
console.log('state的变化后的值', person.name);
} );

watchEffect发生的现象

执行结果首先打印一次state和name;然后隔一秒后,打印state和name值。
从上面的代码可以看出, 并没有像watch一样需要先传入依赖,
watchEffect会自动收集依赖, 只要指定一个回调函数。
在组件初始化时, 会先执行一次来收集依赖, 然后当收集到的依赖中数据发生变化时,
就会再次执行回调函数。所以总结对比如下: watchEffect 不需要手动传入依赖
watchEffect 会先执行一次用来自动收集依赖
watchEffect 无法获取到变化前的值, 只能获取变化后的值

vue3 watch和watchEffect的详细讲解的更多相关文章

  1. 30 道 Vue 面试题,内含详细讲解(涵盖入门到精通,自测 Vue 掌握程度)

    前言 本文以前端面试官的角度出发,对 Vue 框架中一些重要的特性.框架的原理以问题的形式进行整理汇总,意在帮助作者及读者自测下 Vue 掌握的程度.本文章节结构以从易到难进行组织,建议读者按章节顺序 ...

  2. head标签详细讲解

    head标签详细讲解 head位于html网页的头部,后前的标签,并以开始以结束的一html标签. Head标签位置如图: head标签示意图 head包含标签 meta,title,link,bas ...

  3. 详细讲解nodejs中使用socket的私聊的方式

    详细讲解nodejs中使用socket的私聊的方式 在上一次我使用nodejs+express+socketio+mysql搭建聊天室,这基本上就是从socket.io的官网上的一份教程式复制学习,然 ...

  4. iOS KVC详细讲解

    iOS KVC详细讲解 什么是KVC? KVC即NSKeyValueCoding,就是键-值编码的意思.一个非正式的 Protocol,是一种间接访问对象的属性使用字符串来标识属性,而不是通过调用存取 ...

  5. Android webservice的用法详细讲解

    Android webservice的用法详细讲解 看到有很多朋友对WebService还不是很了解,在此就详细的讲讲WebService,争取说得明白吧.此文章采用的项目是我毕业设计的webserv ...

  6. 详细讲解Android对自己的应用代码进行混淆加密防止反编译

    1.查看项目中有没有proguard.cfg. 2.如果没有那就看看这个文件中写的什么吧,看完后将他复制到你的项目中. -optimizationpasses 5 -dontusemixedcasec ...

  7. 详细讲解Hadoop源码阅读工程(以hadoop-2.6.0-src.tar.gz和hadoop-2.6.0-cdh5.4.5-src.tar.gz为代表)

    首先,说的是,本人到现在为止,已经玩过.                   对于,这样的软件,博友,可以去看我博客的相关博文.在此,不一一赘述! Eclipse *版本 Eclipse *下载 Jd ...

  8. [iOS]数据库第三方框架FMDB详细讲解

    [iOS]数据库第三方框架FMDB详细讲解 初识FMDB iOS中原生的SQLite API在进行数据存储的时候,需要使用C语言中的函数,操作比较麻烦.于是,就出现了一系列将SQLite API进行封 ...

  9. jquery插件分类与编写详细讲解

    jquery插件分类与编写详细讲解 1. 插件种类 插件其实就是对现有的方法(或者叫函数)做一个封装,方便重用提高开发效率.   jQeury主要有2种类型   1)实例对象方法插件 开发能让所有的j ...

随机推荐

  1. centos部署配置gogs代码仓库

    目录 一.简介 二.部署 三.网页配置 一.简介 Gogs的目标是打造一个最简单.最快速和最轻松的方式搭建自助Git服务.使用Go语言开发使得Gogs能够通过独立的二进制分发,并且支持Go语言支持的 ...

  2. 编译工具ant部署

    目录 一.环境准备 二.安装 三.使用验证 一.环境准备 当前环境:centos7.3一台 软件版本:ant-1.9 部署目录:/usr/local/ant yum依赖 yum -y java-1.8 ...

  3. [BUUCTF]PWN——others_babystack

    others_babystack 附件 步骤: 例行检查,64位程序,开了挺多保护 本地试运行一下程序 64位ida载入,看main函数 1是read函数,存在栈溢出:2是puts函数,3退出 利用思 ...

  4. Axios的正确食用方法

    这里分享出我个人封装的一个axios,我会尽量每行注释,希望对大家有所帮助. 1. 安装 全局执行代码 npm install axios; 2. 编写全局axios文件(附件里有代码) 在src目录 ...

  5. CF275A Lights Out 题解

    Content 有一个 \(3\times 3\) 的矩阵.一开始每个元素都为 \(1\). 你可以对任意的位置进行操作,每次操作将在这个位置上的元素及其上下左右的元素全部由 \(1\) 改为 \(0 ...

  6. vue常用技巧-动态btn的封装

    @1.要求: 1.点击某个按钮后激活active样式,其余按钮则为normal样式 2.要满足任意个数btn(btn个数不确定) @2.思路: 1.首先,btn个数不确定则意味着必须使用v-for循环 ...

  7. c++跨平台字符编码与乱码杂谈

    blos https://article.itxueyuan.com/qpQml https://www.cnblogs.com/wangmh/p/7265258.html https://blog. ...

  8. windows10下vscode+cmake编译Qt5代码

    概述 本文演示环境: windows10 cmake version:3.18 qt version: 5.14 vscode version: 1.54.1 本文演示环境基于在线模式, 离线使用VS ...

  9. ubuntu web服务器配置

    1.安装Apachesudo apt-get install apache2 查看状态: service apache2 status/start/stop/restartWeb目录: /var/ww ...

  10. sql注入-整数型

    sql注入整数型   1.按照提示输入1,发现直接给出了SQL语句   2.使用order by判断字段数   首先使用order by 3 ,页面无回显,改为2之后页面显示正确.因此判断当前数据库当 ...