vue3中watch函数
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函数的更多相关文章
- 熬夜总结vue3中setUp函数的2个参数详解
1.setUp函数的第1个参数props setup(props,context){} 第一个参数props: props是一个对象,包含父组件传递给子组件的所有数据. 在子组件中使用props进行接 ...
- vue3中的通过proxy实现双向数据绑定的原理
1.什么是Proxy?它的作用是? 据阮一峰文章介绍:Proxy可以理解成,在目标对象之前架设一层 "拦截",当外界对该对象访问的时候,都必须经过这层拦截,而Proxy就充当了这种 ...
- 端午总结Vue3中computed和watch的使用
1使用计算属性 computed 实现按钮是否禁用 我们在有些业务场景的时候,需要将按钮禁用. 这个时候,我们需要使用(disabled)属性来实现. disabled的值是true表示禁用.fals ...
- vue 3 学习笔记 (七)——vue3 中 computed 新用法
vue3 中 的 computed 的使用,由于 vue3 兼容 vue2 的选项式API,所以可以直接使用 vue2的写法,这篇文章主要介绍 vue3 中 computed 的新用法,对比 vue2 ...
- Vue3中的响应式对象Reactive源码分析
Vue3中的响应式对象Reactive源码分析 ReactiveEffect.js 中的 trackEffects函数 及 ReactiveEffect类 在Ref随笔中已经介绍,在本文中不做赘述 本 ...
- Module Federation 模块联邦 在Vue3中使用Vue2搭建的微服务
前言: 备注:本文基于对webpack Module Federation有一定了解的情况下 一般情况下使用模块联邦都是会使用相同的版本,如Vue2的组件时在Vue2中使用,但我为什么会在Vue3项目 ...
- vue3中pinia的使用总结
pinia的简介和优势: Pinia是Vue生态里Vuex的代替者,一个全新Vue的状态管理库.在Vue3成为正式版以后,尤雨溪强势推荐的项目就是Pinia.那先来看看Pinia比Vuex好的地方,也 ...
- vue3中$attrs的变化与inheritAttrs的使用
在vue3中的$attrs的变化 $listeners已被删除合并到$attrs中. $attrs现在包括class和style属性. 也就是说在vue3中$listeners不存在了.vue2中$l ...
- vue3中使用computed
演示示例(vant组件库的轮播图): <van-swipe :loop="false" :width="150" class="my-Swipe ...
随机推荐
- D - LOL UVALive - 8521 (状压dp)
https://nanti.jisuanke.com/t/A1616 思路:dp[i][j]表示前i列里面选了情况j有多少种组合方案 #include<bits/stdc++.h> usi ...
- GPLT L2-006 树的遍历(二叉树)
题意: 给定一棵二叉树的后序遍历和中序遍历,请你输出其层序遍历的序列.这里假设键值都是互不相等的正整数. 思路: 后序遍历序列 = 左子树遍历序列 + 右子树遍历序列 + 根节点. 中序遍历序列 = ...
- ACM-ICPC 2018 徐州赛区网络预赛(8/11)
ACM-ICPC 2018 徐州赛区网络预赛 A.Hard to prepare 枚举第一个选的,接下来的那个不能取前一个的取反 \(DP[i][0]\)表示选和第一个相同的 \(DP[i][1]\) ...
- java——API
API定义: 可以网上下载一个jdk_api文档用来查找一些函数. 匿名对象的创建 匿名对象做为返回值和参数实例: Random的使用:
- Network POJ - 3694 无向图找桥
题意: 给你一个无向图,你需要找出来其中有几个桥 桥: 1.存在重边必定不为桥 2.low[v]>dfn[u] 代码: //题意很清晰 //就是这个需要先找出来原无向图中的桥个数,然后在判断添加 ...
- 洛谷 P2880 [USACO07JAN]Balanced Lineup G (ST表模板)
题意:给你一组数,询问\(q\)次,问所给区间内的最大值和最小值的差. 题解:经典RMQ问题,用st表维护两个数组分别记录最大值和最小值然后直接查询输出就好了 代码: int n,q; int a[N ...
- codeforces 1009D Relatively Prime Graph【欧拉函数】
题目:戳这里 题意:要求构成有n个点,m条边的无向图,满足每条边上的两点互质. 解题思路: 显然1~n这n个点能构成边的条数,就是2~n欧拉函数之和(x的欧拉函数值代表小于x且与x互质的数的个数. 因 ...
- Java解决Hash(散列)冲突的四种方法--开放地址法(线性探测,二次探测,伪随机探测)、链地址法、再哈希、建立公共溢出区
最近时间有点紧,暂时先放参考链接了,待有时间在总结一下: 查了好多,这几篇博客写的真心好,互有优缺点,大家一个一个看就会明白了: 参考 1. 先看这个明白拉链法(链地址法),这个带源码,很好看懂,只不 ...
- Redis 集合统计(HyperLogLog)
统计功能是一类极为常见的需求,比如下面这个场景: 为了决定某个功能是否在下个迭代版本中保留,产品会要求统计页面在上新前后的 UV 作为决策依据. 简单来说就是统计一天内,某个页面的访问用户量,如果相同 ...
- SVG in Action
SVG in Action HTML5 semantic HTML5 Semantic Elements / HTML5 Semantic Tags figure object <figure& ...