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

 更新时间:2021年09月24日 10:13:12   作者:SpringSir  
这篇文章主要介绍了在Vue2和Vue3中如何使用watch侦听器,分别对vue2及vue3作了详细的说明,有需要的朋友可以借鉴参考下,希望能够有所帮助

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

vue2.x

 data(){
     return{
         num:10
     }
 },
 watch:{
      num:{
	      /*
	       *   newValue:当前值
           *   oldValue:修改上一刻的值
	       */
          handler(newValue,oldValue){
          	// doSomething
          },
          /*
           * deep:Boolean : 深度监听
           * 	true: 监听堆的改变就
           * 	false:只监听栈的改变(默认)
           */
          deep:true/false,
          /*
           * immediate:Boolean : 是否在第一次定义时就执行handler函数
           * 	true: 在第一次定义时就执行handler函数
           * 	false:修改后再执行handler函数
           */          
          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侦听器使用的资料请关注脚本之家其它相关文章!

相关文章

  • npm install时卡住不动的五种解决方法

    npm install时卡住不动的五种解决方法

    在我们安装完Node.js之后,需要使用npm命令来安装一些工具,下面这篇文章主要给大家介绍了关于npm install时卡住不动的五种解决方法,需要的朋友可以参考下
    2023-06-06
  • Vue3 KeepAlive实现原理解析

    Vue3 KeepAlive实现原理解析

    KeepAlive 是一个内置组件,那封装一个组件对于大家来说应该不会有太大的困难,它的核心逻辑在于它的 render 函数,它用 map 去记录要缓存的组件,就是 [key,vnode] 的形式,这篇文章主要介绍了Vue3 KeepAlive实现原理,需要的朋友可以参考下
    2022-09-09
  • Vue使用虚拟dom进行渲染view的方法

    Vue使用虚拟dom进行渲染view的方法

    这篇文章主要介绍了Vue使用虚拟dom进行渲染view的方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • vue实现iview表格添加筛选功能的示例代码

    vue实现iview表格添加筛选功能的示例代码

    本文主要介绍了vue实现iview表格添加筛选功能的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • 结合Vue控制字符和字节的显示个数的示例

    结合Vue控制字符和字节的显示个数的示例

    这篇文章主要介绍了结合Vue控制字符和字节的显示个数的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • Vue3组件更新中的DOM diff算法示例详解

    Vue3组件更新中的DOM diff算法示例详解

    虚拟dom是当前前端最流行的两个框架(vue和react)都用到的一种技术,都说他能帮助vue和react提升渲染性能,提升用户体验,下面这篇文章主要给大家介绍了关于Vue3组件更新中的DOM diff算法的相关资料,需要的朋友可以参考下
    2022-04-04
  • vue.js打包之后可能会遇到的坑!

    vue.js打包之后可能会遇到的坑!

    这篇文章主要给大家介绍了关于vue.js打包之后可能会遇到的一些坑,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-06-06
  • Vue 2.0双向绑定原理的实现方法

    Vue 2.0双向绑定原理的实现方法

    这篇文章主要为大家详细介绍了Vue 2.0双向绑定原理的实现方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • 使用yarn build 打包vue项目时静态文件或图片未打包成功的问题及解决方法

    使用yarn build 打包vue项目时静态文件或图片未打包成功的问题及解决方法

    这篇文章主要介绍了使用yarn build 打包vue项目时静态文件或图片未打包成功的问题及解决方法,解决方法不复杂通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-08-08
  • vue中beforeRouteLeave实现页面回退不刷新的示例代码

    vue中beforeRouteLeave实现页面回退不刷新的示例代码

    这篇文章主要介绍了vue中beforeRouteLeave实现页面回退不刷新的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11

最新评论