watch

监听普通类型

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

监听响应式对象

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

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

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

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

  1. watch(count, () => {
  2. console.log("count改变了");
  3. });
  4. watch(
  5. () => book.name,
  6. () => {
  7. console.log("书名改变了");
  8. }
  9. );

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

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

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

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

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. Failed to initialize policy for cpu: 0

    今天在使用vmware安装ubuntu16.04的时候出现下列错误: Failed to initialize policy for cpu: 0 (-19),刚开始还以为是镜像文件出现了问题,结果发 ...

  2. Codeforces Round #657 (Div. 2) C. Choosing flowers(贪心)

    题目链接:https://codeforces.com/contest/1379/problem/C 题意 有 $m$ 种花,每种花数量无限,第一次购买一种花收益为 $a_i$,之后每一次购买收益为 ...

  3. 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, ...

  4. hdu3555 Bomb(要49)

    Problem Description The counter-terrorists found a time bomb in the dust. But this time the terroris ...

  5. 一句话木马的简单例子 网站webshell & 远程连接

    一  概述 本地 kail  linux 目标 windows nt 服务器 二 过程 首先编写一句话木马  index.php 一句话木马的原理就是把C=xxx 字符串当成php语句执行 注意这里用 ...

  6. Docker项目demo

     Docker数据持久化 4.1 Volume (1)创建mysql数据库的container (2)查看volume (3)具体查看该volume docker volume inspect 485 ...

  7. Dapr 交通控制示例

    Dapr 已在塔架就位 将发射新一代微服务 牛年 dotnet云原生技术趋势 Dapr是如何简化微服务的开发和部署 前面几篇文章都是从大的方面给大家分享Dapr 能帮助我们解决什么问题,微软从开源到1 ...

  8. Ant-design-vue—— 表单输入框输入很卡问题

    参考:https://blog.csdn.net/weixin_43905402/article/details/106074435 我的问题:vue项目中使用ant-design-vue,表单中输入 ...

  9. CSS ::marker All In One

    CSS ::marker All In One CSS pseudo element / CSS 伪元素 /* user agent stylesheet */ ::marker { unicode- ...

  10. 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 ...