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

186 阅读 0 评论 123 点赞

我是靠谱客的博主冷静老鼠，这篇文章主要介绍Vue2和Vue3如何使用watch侦听器详解，现在分享给大家，希望可以做个参考。

watch:侦听数据变化（某个值的change事件）

vue2.x

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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用于监听响应式的数据

基本使用

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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:改变一次渲染一次，每一次都是渲染前`