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. priority_queue()大根堆和小根堆(二叉堆)

    #include<iostream> #include <queue> using namespace std; int main() { //对于基础类型 默认是大顶堆 pr ...

  2. Educational Codeforces Round 88 (Rated for Div. 2) A. Berland Poker(数学)

    题目链接:https://codeforces.com/contest/1359/problem/A 题意 $n$ 张牌可以刚好被平分给 $k$ 个人,其中有 $m$ 张 joker,当一个人手中的 ...

  3. Codeforces Round #660 (Div. 2) A. Captain Flint and Crew Recruitment、Captain Flint and a Long Voyage

    题目链接:Captain Flint and Crew Recruitment 题意: t组输入,每一组输入一个n.这里我们说一下题目定义的近似质数概念: "如果可以将正整数x表示为p⋅q, ...

  4. Codeforces Round #667 (Div. 3) D. Decrease the Sum of Digits (贪心)

    题意:给你一个正整数\(n\),每次可以对\(n\)加一,问最少操作多少次是的\(n\)的所有位数之和不大于\(s\). 题解:\(n\)的某个位置上的数进位,意味这后面的位置都可以被更新为\(0\) ...

  5. AtCoder Beginner Contest 177 D - Friends (并查集)

    题意:有\(n\)个人,给你\(m\)对朋友关系,朋友的朋友也是朋友,现在你想要将他们拆散放到不同的集合中,且每个集合中的人没有任何一对朋友关系,问最少需要多少集合. 题解:首先用并查集将朋友关系维护 ...

  6. java通过HttpClient调用接口总结

    2.HttpClient 2.1简介: 最近看项目的代码,看到工程中有两个jar包张的很像,一个是commons.httpclient-3.1.jar,一个是httpclient4.2.1.jar,很 ...

  7. Set DSL in Ubuntu 18.04

    Reference Solutions: Ctrl+Atl+t Type nmcli con edit type pppoe con-name ANY_NAME_OF_DSL_YOU_LIKE, wh ...

  8. php foundation knowledge!

    php foundation knowledge! 1 <?php 2 $p = "PII"; 3 define("XPI",3.1415926); 4 ...

  9. how to check SVG type in js

    how to check SVG type in js SVGSVGElement & SVGElement svg = document.querySelector(`svg`); // & ...

  10. css var & auto width css triangle

    css var & auto width css triangle https://codepen.io/xgqfrms/pen/PooeEbd css var https://codepen ...