• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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侦听器使用的资料请关注极客世界其它相关文章!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Vue2.x与Vue3.x中路由钩子的区别详解发布时间:2022-02-05
下一篇:
Vue2与Vue3兄弟组件通讯bus的区别及用法发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap