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

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)

相关推荐

  • Vue3 响应式侦听与计算的实现

    响应式侦听和计算 有时我们需要依赖于其他状态的状态--在 Vue 中,这是用组件 计算属性 处理的,以直接创建计算值,我们可以使用 computed 方法:它接受 getter 函数并为 getter 返回的值返回一个不可变的响应式 ref 对象. 我们先来看看一个简单的例子,关于计算值的方式,同样我们在 src/TemplateM.vue 写下如下代码: <template> <div class="template-m-wrap"> count --->

  • vue1.0和vue2.0的watch监听事件写法详解

    如下所示: watch: { aaa: { handler: function (newVal,oldVal) { console.log('当前的值:'+ newVal); console.log('旧的值' + oldVal); }, deep: true //深度监听 } } 以上这篇vue1.0和vue2.0的watch监听事件写法详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • vue3 watch和watchEffect的使用以及有哪些区别

    1.watch侦听器 引入watch import { ref, reactive, watch, toRefs } from 'vue' 对基本数据类型进行监听----- watch特性: 1.具有一定的惰性lazy 第一次页面展示的时候不会执行,只有数据变化的时候才会执行 2.参数可以拿到当前值和原始值 3.可以侦听多个数据的变化,用一个侦听起承载 setup() { const name = ref('leilei') watch(name, (curVal, prevVal) => {

  • Vue.js中关于侦听器（watch）的高级用法示例

    Vue侦听器watch 虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器.这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化.当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的.例如: <div id="watch-example"> <p> Ask a yes/no question: <input v-model="question"> </p> &l

  • Vue数据监听方法watch的使用

    Vue数据监听方法watch的使用

    watch本身很容易理解, watch负责将视图中的数据与某个函数关联起来 当Vue视图中的数据变化时, 关联的函数会被执行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>监听方法watch的使用</title> <script src="https://cdn.bootcss.com/

  • Vue 2.0 侦听器 watch属性代码详解

    用法 -------------------------------------------------------------------------------- 先来看看官网的介绍: 官网介绍的很好理解了,也就是监听一个数据的变化,当该数据变化时执行我们的watch方法,watch选项是一个对象,键为需要观察的表达式(函数),还可以是一个对象,可以包含如下几个属性: handler        ;对应的函数                          ;可以带两个参数,分别是新的值

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

    watch:侦听数据变化 (某个值的change事件) vue2.x data(){ return{ num:10 } }, watch:{ num:{ /* * newValue:当前值 * oldValue:修改上一刻的值 */ handler(newValue,oldValue){ // doSomething }, /* * deep:Boolean : 深度监听 * true: 监听堆的改变就 * false:只监听栈的改变(默认) */ deep:true/false, /* * i

  • Vue基础之侦听器详解

    目录 vue中什么是侦听器 侦听器的用法 vue侦听器-watch vue侦听器-深度侦听和立即执行 总结 vue中什么是侦听器 开发中我们在data返回的对象中定义了数据,这个数据可以通过插值语法等方式绑定到templat中. 当数据变化的时候,template里绑定的数据会自动进行更新来显示最新的数据.但是这种变化是在template中自动侦听data的值来进行变换的 在某些情况下,我们希望在代码逻辑中监听某个数据的变化,这个时候就需要用到侦听器watch了 官方定义:Vue 通过 watc

  • 详解Vue3中的watch侦听器和watchEffect高级侦听器

    目录 1watch侦听器 2watchEffect高级侦听器 清除副作用:就是在触发监听之前会调用一个函数可以处理你的逻辑例如防抖 停止跟踪 watchEffect 返回一个函数 调用之后将停止更新 1watch侦听器 watch 需要侦听特定的数据源,并在单独的回调函数中执行副作用 watch第一个参数监听源 watch第二个参数回调函数cb(newVal,oldVal) watch第三个参数一个options配置项是一个对 { immediate:true //是否立即调用一次 deep:t

  • Vue3源码分析侦听器watch的实现原理

    目录 watch 的本质 watch 的函数签名 侦听多个源 侦听单一源 watch 的实现 watch 函数 source 参数 cb 参数 options 参数 doWatch 函数 doWatch 函数签名 初始化变量 递归读取响应式数据 定义清除副作用函数 封装 scheduler 调度函数 设置 job 的 allowRecurse 属性 flush 选项指定回调函数的执行时机 创建副作用函数 执行副作用函数 返回匿名函数,停止侦听 总结 watch 的本质 所谓的watch,其本质就

  • vue3.0中的watch侦听器实例详解

    vue3.0中的watch侦听器实例详解

    目录 前言 侦听器和计算属性的区别 vue3如何使用watch呢? 基本使用 监听多个响应式数据 侦听reactive定义的响应式数据 监听reactive定义的响应式数据的某一个属性 配置选项用法 总结 前言 虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器.这就是为什么 Vue 通过watch选项提供了一个更通用的方法,来响应数据的变化.当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的. 侦听器和计算属性的区别 计算属性里不可以做异步操作,侦听器可以做异步操作

  • 详解Vue3中侦听器watch的使用教程

    详解Vue3中侦听器watch的使用教程

    目录 watch 侦听器使用. 侦听器监听 reactive 监听多个参数执行各自逻辑 监听多个参数执行相同逻辑 上一节我们简单的介绍了一下vue3 项目中的计算属性,这一节我们继续 vue3 的基础知识讲解. 这一节我们来说 vue3 的侦听器. 学过 vue2 的小伙伴们肯定学习过侦听器,主要是用来监听页面数据或者是路由的变化,来执行相应的操作,在 vue3里面呢,也有侦听器的用法,功能基本一样,换汤不换药的东西. 侦听器是常用的 Vue API 之一,它用于监听一个数据并在数据变动时做一些

  • 全面总结Vue3.0的多种侦听方式

    目录 侦听器 一.wacthEffect 二.watch 1.1第一种方式侦听 1.2第二种方式侦听 1.3侦听多个数据源 总结 侦听器 虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器.这就是为什么 Vue 通过watch选项提供了一个更通用的方法,来响应数据的变化.当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的. 一.wacthEffect 立即执行,没有immediate 侦听,watchEffect是立即执行的,没有immediate,不需要传递侦听的内

  • 深入了解Vue3中侦听器watcher的实现原理

    目录 watch API 的用法 watch API实现原理 标准化source 构造回调函数 创建scheduler 创建effect 返回销毁函数 异步任务队列的设计 异步任务队列的创建 异步任务队列的执行 检测循环更新 优化:只用一个变量 watchEffect 注册无效回调函数 总结 在平时的开发工作中,我们经常使用侦听器帮助我们去观察某个数据的变化然后去执行一段逻辑. 在 Vue.js 2.x 中,你可以通过 watch 选项去初始化一个侦听器,称作 watcher: export d

  • 详解Vue3 中的计算属性及侦听器

    目录 计算属性 缓存 getter 和 setter 侦听器 配置选项 其它写法 计算属性 我们知道,在模板中可以直接通过插值语法显示一些data中的数据,但是在某些情况,我们可能需要对数据进行一些转化后再显示,或者需要将多个数据结合起来进行显示 在模板中使用表达式,可以非常方便的实现,但是设计它们的初衷是用于简单的运算,在模板中放入太多的逻辑会让模板过重和难以维护,并且如果多个地方都使用到,那么会有大量重复的代码 所以我们希望将业务逻辑和UI界面进行分离,其中一种方式就是将逻辑抽取到一个met

  • Vue3侦听器的实现原理详情

    Vue3侦听器的实现原理详情

    目录 侦听响应式对象 侦听属性值 侦听获取新值和旧值 实现效果 前言: 本篇内容基于Vue3计算属性是如何实现的实现. 侦听响应式对象 前面我们聊到计算属性,它可以自动计算并缓存响应式数据的值.而如果我们仅需要在响应式数据变化时,执行一些预设的操作,就可以使用watch侦听器.我们还是先来实现一个最简单的例子,然后来一点一点扩充它. const data = {foo: 1} const obj = reactive(data) watch(obj, () => { console.log('o

随机推荐