watch

监听普通类型

 let count = ref(1);
const changeCount = () => {
count.value+=1
}; watch(count, (newValue, oldValue) => { //直接监听
console.log("count改变了");
});

监听响应式对象

 let book = reactive({
name: "js编程",
price: 50,
});
const changeBookName = () => {
book.name = "c#";
};
watch(()=>book.name,()=>{//通过一个函数返回要监听的属性
console.log('书名改变了')
})

监听多个参数执行不同的方法

不过以上只是一些简单的例子,对于vue2中,watch可以监听多个源,并且执行不同的函数

在vue3中同理也能实现相同的情景,通过多个watch来实现,但在vue2中,只能存在一个watch

watch(count, () => {
console.log("count改变了");
});
watch(
() => book.name,
() => {
console.log("书名改变了");
}
);

监听多个参数执行相同的方法

在vue2中可能存在需要执行同一事件的情况,解决方法通常是利用computed把他们存入一个对象中,监听这个对象的变化

对于vue3,可以免去computed的操作

watch([() => book.name, count], ([name, count], [preName, preCount]) => {
console.log("count或book.name改变了");
});

vue3中watch函数的更多相关文章

  1. 熬夜总结vue3中setUp函数的2个参数详解

    1.setUp函数的第1个参数props setup(props,context){} 第一个参数props: props是一个对象,包含父组件传递给子组件的所有数据. 在子组件中使用props进行接 ...

  2. vue3中的通过proxy实现双向数据绑定的原理

    1.什么是Proxy?它的作用是? 据阮一峰文章介绍:Proxy可以理解成,在目标对象之前架设一层 "拦截",当外界对该对象访问的时候,都必须经过这层拦截,而Proxy就充当了这种 ...

  3. 端午总结Vue3中computed和watch的使用

    1使用计算属性 computed 实现按钮是否禁用 我们在有些业务场景的时候,需要将按钮禁用. 这个时候,我们需要使用(disabled)属性来实现. disabled的值是true表示禁用.fals ...

  4. vue 3 学习笔记 (七)——vue3 中 computed 新用法

    vue3 中 的 computed 的使用,由于 vue3 兼容 vue2 的选项式API,所以可以直接使用 vue2的写法,这篇文章主要介绍 vue3 中 computed 的新用法,对比 vue2 ...

  5. Vue3中的响应式对象Reactive源码分析

    Vue3中的响应式对象Reactive源码分析 ReactiveEffect.js 中的 trackEffects函数 及 ReactiveEffect类 在Ref随笔中已经介绍,在本文中不做赘述 本 ...

  6. Module Federation 模块联邦 在Vue3中使用Vue2搭建的微服务

    前言: 备注:本文基于对webpack Module Federation有一定了解的情况下 一般情况下使用模块联邦都是会使用相同的版本,如Vue2的组件时在Vue2中使用,但我为什么会在Vue3项目 ...

  7. vue3中pinia的使用总结

    pinia的简介和优势: Pinia是Vue生态里Vuex的代替者,一个全新Vue的状态管理库.在Vue3成为正式版以后,尤雨溪强势推荐的项目就是Pinia.那先来看看Pinia比Vuex好的地方,也 ...

  8. vue3中$attrs的变化与inheritAttrs的使用

    在vue3中的$attrs的变化 $listeners已被删除合并到$attrs中. $attrs现在包括class和style属性. 也就是说在vue3中$listeners不存在了.vue2中$l ...

  9. vue3中使用computed

    演示示例(vant组件库的轮播图): <van-swipe :loop="false" :width="150" class="my-Swipe ...

随机推荐

  1. D - LOL UVALive - 8521 (状压dp)

    https://nanti.jisuanke.com/t/A1616 思路:dp[i][j]表示前i列里面选了情况j有多少种组合方案 #include<bits/stdc++.h> usi ...

  2. GPLT L2-006 树的遍历(二叉树)

    题意: 给定一棵二叉树的后序遍历和中序遍历,请你输出其层序遍历的序列.这里假设键值都是互不相等的正整数. 思路: 后序遍历序列 = 左子树遍历序列 + 右子树遍历序列 + 根节点. 中序遍历序列 = ...

  3. ACM-ICPC 2018 徐州赛区网络预赛(8/11)

    ACM-ICPC 2018 徐州赛区网络预赛 A.Hard to prepare 枚举第一个选的,接下来的那个不能取前一个的取反 \(DP[i][0]\)表示选和第一个相同的 \(DP[i][1]\) ...

  4. java——API

    API定义: 可以网上下载一个jdk_api文档用来查找一些函数. 匿名对象的创建  匿名对象做为返回值和参数实例: Random的使用:

  5. Network POJ - 3694 无向图找桥

    题意: 给你一个无向图,你需要找出来其中有几个桥 桥: 1.存在重边必定不为桥 2.low[v]>dfn[u] 代码: //题意很清晰 //就是这个需要先找出来原无向图中的桥个数,然后在判断添加 ...

  6. 洛谷 P2880 [USACO07JAN]Balanced Lineup G (ST表模板)

    题意:给你一组数,询问\(q\)次,问所给区间内的最大值和最小值的差. 题解:经典RMQ问题,用st表维护两个数组分别记录最大值和最小值然后直接查询输出就好了 代码: int n,q; int a[N ...

  7. codeforces 1009D Relatively Prime Graph【欧拉函数】

    题目:戳这里 题意:要求构成有n个点,m条边的无向图,满足每条边上的两点互质. 解题思路: 显然1~n这n个点能构成边的条数,就是2~n欧拉函数之和(x的欧拉函数值代表小于x且与x互质的数的个数. 因 ...

  8. Java解决Hash(散列)冲突的四种方法--开放地址法(线性探测,二次探测,伪随机探测)、链地址法、再哈希、建立公共溢出区

    最近时间有点紧,暂时先放参考链接了,待有时间在总结一下: 查了好多,这几篇博客写的真心好,互有优缺点,大家一个一个看就会明白了: 参考 1. 先看这个明白拉链法(链地址法),这个带源码,很好看懂,只不 ...

  9. Redis 集合统计(HyperLogLog)

    统计功能是一类极为常见的需求,比如下面这个场景: 为了决定某个功能是否在下个迭代版本中保留,产品会要求统计页面在上新前后的 UV 作为决策依据. 简单来说就是统计一天内,某个页面的访问用户量,如果相同 ...

  10. SVG in Action

    SVG in Action HTML5 semantic HTML5 Semantic Elements / HTML5 Semantic Tags figure object <figure& ...