iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue2和Vue3如何使用watch侦听器详解
  • 990
分享到

Vue2和Vue3如何使用watch侦听器详解

2024-04-02 19:04:59 990人浏览 安东尼
摘要

watch:侦听数据变化 (某个值的change事件) Vue2.x data(){ return{ num:10 } }, watc

watch:侦听数据变化 (某个值的change事件)

Vue2.x


 data(){
     return{
         num:10
     }
 },
 watch:{
      num:{
	      
          handler(newValue,oldValue){
          	// doSomething
          },
          
          deep:true/false,
                    
          immediate:true/false
      }      
  }

vue3.x

 watch用于监听响应式的数据

基本使用


const num = ref(0)
1. 导入  import {watch} from 'vue'
2. 使用
	 `const 返回值= watch(需要监听的值, (newVal,oldVal)=>{ }, {deep,immediate,flush})`
	 
	 返回值: 可以关闭监听: 返回值()
	 参数一: 需要监听的值
	 			 基本数据类型(Number,String,Boolean,null,undefined):  ()=>基本数据类型值
	 			 复杂数据类型(Array,Object,Function):			直接写/()=>基本数据类型值
	 参数二: 类比Vue2中的handler函数
	 参数三: {}对象, 对象中可以有个配置项:deep,immediate,flush,
	 		deep,immediate的意思上面有过描述, 这里主要对flush的取值做说明:
	 			 `flush:post/sync/pre
      				   pre(默认值):渲染前,值改变了,没有渲染到dom
      				   post:渲染后,值改变了,也渲染到dom
    				   sync:改变一次渲染一次,每一次都是渲染前`
	 		

注意点:
实际开发中监听不到变化 统一使用

watch(()=>响应式数据,()=>{},{deep:true})

以上就是Vue2和Vue3如何使用watch侦听器详解的详细内容,更多关于watch侦听器使用的资料请关注编程网其它相关文章!

--结束END--

本文标题: Vue2和Vue3如何使用watch侦听器详解

本文链接: https://www.lsjlt.com/news/136557.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vue2和Vue3如何使用watch侦听器详解
    watch:侦听数据变化 (某个值的change事件) vue2.x data(){ return{ num:10 } }, watc...
    99+
    2022-11-12
  • 详解Vue3中的watch侦听器和watchEffect高级侦听器
    目录1watch侦听器2watchEffect高级侦听器清除副作用:就是在触发监听之前会调用一个函数可以处理你的逻辑例如防抖停止跟踪 watchEffect 返回一个函数 调用之后将...
    99+
    2022-11-13
    Vue3 watch侦听器 vue3 watchEffect侦听器
  • 详解Vue3中侦听器watch的使用教程
    目录watch 侦听器使用。侦听器监听 reactive监听多个参数执行各自逻辑监听多个参数执行相同逻辑上一节我们简单的介绍了一下 vue3 项目中的计算属性,这一节我们继续 vue...
    99+
    2022-11-13
  • Vue3中watch监听使用详解
    目录Vue2使用watchVue3使用watch情况1情况2情况3情况4情况5特殊情况 总结Vue2使用watch <template> <div&g...
    99+
    2022-11-13
    vue3.0 watch vue3 watch vue中watch的使用
  • Vue3中watchEffect侦听器如何使用
    本篇内容介绍了“Vue3中watchEffect侦听器如何使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!watchEffect 侦听器其...
    99+
    2023-07-02
  • VUE3中watch监听使用实例详解
    目录watch介绍watch监听的不同情况1 监听单个refimpl数据2 监听多个refimpl数据3 监听proxy数据4 监听proxy数据的某个属性5 监听proxy数据的某...
    99+
    2022-11-13
  • 详解Vue3中Watch监听事件的使用
    目录一、watch的使用1、引入watch2、多个数据源监听3、监听数组变化4、侦听对象5、结论一、watch的使用 watch(WatcherSource, Callback, [...
    99+
    2023-02-10
    Vue3 Watch监听事件使用 Vue3 Watch监听 Vue3 Watch
  • vue2.x版详解computed和watch的使用
    目录前言一、computed基础使用使用其他组件状态getter VS setter二、watch基本使用immediate和deep实例前言 在基于vue框架的前端项目开发过程中,...
    99+
    2022-11-13
  • Vue3中的计算属性及侦听器如何使用
    这篇文章主要介绍“Vue3中的计算属性及侦听器如何使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue3中的计算属性及侦听器如何使用”文章能帮助大家解决问题。计算属性我们知道,在模板中可以直接通...
    99+
    2023-07-06
  • vue3如何使用watch监听router的改变
    这篇文章主要介绍“vue3如何使用watch监听router的改变”,在日常操作中,相信很多人在vue3如何使用watch监听router的改变问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue3如何使用w...
    99+
    2023-07-04
  • vue3如何使用watch监听props中的数据
    目录情况一:监听 props 中基本数据类型情况二:监听 props 中引用数据类型且父组件不改变地址指向情况三:监听 props 中引用数据类型且父组件改变地址指向总结写在最后情况...
    99+
    2022-11-13
    vue3监听props数据变化 vue3 监听props vue props监听
  • vue3和vue2中mixins如何使用
    这篇文章主要介绍“vue3和vue2中mixins如何使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue3和vue2中mixins如何使用”文章能帮助大家解决问题。前言vue的mixins里面...
    99+
    2023-06-30
  • Vue中的watch侦听器、计算属性、Vue-cli和组件怎么使用
    这篇文章主要介绍了Vue中的watch侦听器、计算属性、Vue-cli和组件怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue中的watch侦听器、计算属性、Vue-cli和组件怎么使用文章都会有所收...
    99+
    2023-06-30
  • 如何使用watch监听路由变化和watch监听对象
    这篇文章主要介绍了如何使用watch监听路由变化和watch监听对象,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。一、watch监听路由变化...
    99+
    2022-10-19
  • VUE watch监听器的基本使用方法详解
    目录1、下面代码是watch的一种简单的用法2、immediate 立即监听3、handler方法 4、 deep属性总结 侦听器一般来说是用来监听数据的变化,默认是在数据发生变化时...
    99+
    2022-11-12
  • vue3中的watch和watchEffect如何使用
    这篇文章主要介绍了vue3中的watch和watchEffect如何使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue3中的watch和watchEffect如何使用文章都会有所收获,下面我们一起来看看吧...
    99+
    2023-07-06
  • Vue数据监听器watch和watchEffect如何使用
    本文小编为大家详细介绍“Vue数据监听器watch和watchEffect如何使用”,内容详细,步骤清晰,细节处理妥当,希望这篇“Vue数据监听器watch和watchEffect如何使用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入...
    99+
    2023-07-05
  • 详解vue3中如何使用youtube-player
    目录正文开始使用做成组件youtubePlayer使用方式注意事项常用参数常用API正文 youtube-player 是 YouTube IFrame Player API&nbs...
    99+
    2022-11-13
  • 详解vue3中如何使用shaka-player
    目录正文开始使用做成组件shakaPlayer使用方式注意事项正文 Shaka Player 是谷歌公司对外开源的一款 JavaScript 类库,详细请看谷歌官方API文档。 开始...
    99+
    2022-11-13
  • JavaWeb开发中过滤器和监听器使用详解
    目录1 Filter1.1 Filter简介1.2 Filter的快速入门1.2.1 创建Filter类1.2.2 访问index.jsp1.3 Filter的拦截路径的配置1.4 ...
    99+
    2022-11-13
    JavaWeb过滤器 JavaWeb监听器
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作