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 ...
随机推荐
- Failed to initialize policy for cpu: 0
今天在使用vmware安装ubuntu16.04的时候出现下列错误: Failed to initialize policy for cpu: 0 (-19),刚开始还以为是镜像文件出现了问题,结果发 ...
- Codeforces Round #657 (Div. 2) C. Choosing flowers(贪心)
题目链接:https://codeforces.com/contest/1379/problem/C 题意 有 $m$ 种花,每种花数量无限,第一次购买一种花收益为 $a_i$,之后每一次购买收益为 ...
- HDU6191 Query on A Tre【dsu on tree + 01字典树】
Query on A Tree Problem Description Monkey A lives on a tree, he always plays on this tree. One day, ...
- hdu3555 Bomb(要49)
Problem Description The counter-terrorists found a time bomb in the dust. But this time the terroris ...
- 一句话木马的简单例子 网站webshell & 远程连接
一 概述 本地 kail linux 目标 windows nt 服务器 二 过程 首先编写一句话木马 index.php 一句话木马的原理就是把C=xxx 字符串当成php语句执行 注意这里用 ...
- Docker项目demo
Docker数据持久化 4.1 Volume (1)创建mysql数据库的container (2)查看volume (3)具体查看该volume docker volume inspect 485 ...
- Dapr 交通控制示例
Dapr 已在塔架就位 将发射新一代微服务 牛年 dotnet云原生技术趋势 Dapr是如何简化微服务的开发和部署 前面几篇文章都是从大的方面给大家分享Dapr 能帮助我们解决什么问题,微软从开源到1 ...
- Ant-design-vue—— 表单输入框输入很卡问题
参考:https://blog.csdn.net/weixin_43905402/article/details/106074435 我的问题:vue项目中使用ant-design-vue,表单中输入 ...
- CSS ::marker All In One
CSS ::marker All In One CSS pseudo element / CSS 伪元素 /* user agent stylesheet */ ::marker { unicode- ...
- how to create one single-file Web Component just using the HTML, CSS, JavaScript
how to create one single-file Web Component just using the HTML, CSS, JavaScript web components html ...