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

目录
  • 侦听器
  • 一、wacthEffect
  • 二、watch
    • 1.1第一种方式侦听
    • 1.2第二种方式侦听
    • 1.3侦听多个数据源
  • 总结

侦听器

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过watch选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

一、wacthEffect

立即执行,没有immediate

侦听，watchEffect是立即执行的，没有immediate,不需要传递侦听的内容,自动会感知代码依赖,不需要传参,只需要传一个回调函数不能获取之前的值

如果需要停用侦听器,可以回调这个侦听器函数

const stop = watchEffect(()=>{
        // console.log('num:',num.value);
        // console.log('num:',str.value);
      })

二、watch

不会立即执行,需要手动开启immediate

// 指定主要侦听的值num
      watch(num,(val,oval)=>{
        // val:新值,oval:之前的值
        // console.log(num.value);
        // console.log(val,oval);
      },{//第二个参数obj immediate,deep
      immediate:true//默认就是只有数据改变时才会监听,
      // 第一次创建的时候不会执行,设置成true,第一次就会执行
      })
  • 侦听ref的数据源
  • 侦听reactive数据源

1.1第一种方式侦听

//侦听state下的id,对象数据的变化
      watch(state,(val,oval)=>{
        // console.log('id',val.id,oval);
      },{
        immediate:true,
        deep:true//开启深度监听,能够侦听到对象属性值的变化
      })

1.2第二种方式侦听

// 侦听state.uname
      watch(()=>state.uname,(uname,p)=>{
        //uname新值,p旧值
        console.log(uname,p);
      },{
        immediate:true
      })

1.3侦听多个数据源

//侦听多个数据(id,uname)
    //()=>state.id,相当于//object.values(toRefs(state))解构了
     const stop = watch([()=>state.id,()=>state.uname],([id,uname],[oid,oname])=>{
        // id新,oid旧
        console.log('id',id,oid);
        // uname新,oname旧
        console.log('uname',uname,oname);
      })

总结

到此这篇Vue3.0多种侦听方式的文章就介绍到这了,更多相关Vue3.0侦听方式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

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

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

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

  • vue2 vue3中使用Echarts详细

    vue2 vue3中使用Echarts详细

    目录 1.安装 2.vue2中使用Echarts 在main.js文件中 给定一个容器 3.vue3中使用Echarts 在根组件里引入echart,一般是App.vue 在需要使用的页面,定义div 然后在需要使用到Echarts的页面inject 1.安装 npm install echarts --save 2.vue2中使用Echarts 在main.js文件中 // 引入echarts import echarts from 'echarts' Vue.prototype.$echar

  • 浅谈Vue3的几个优势

    目录 1.源码 1.1 monorepo 1.2 TypeScript 2.性能 2.1 优化源码体积 2.3 Proxy 2.4 Composition API Vue2已经非常优秀,且具备完善的社区和生态,但是Vue3仍然在源码.性能和语法 API 三个大的方面进行了优化 1.源码 1.1 monorepo 源码管理方式采用monorepo的方式进行管理,monorepo 把这些模块拆分到不同的 package 中,每个 package 有各自的 API.类型定义和测试.这样使得模块拆分更细

  • 简单聊聊vue3.0 sfc中setup的变化

    目录 前言 标准的sfc写法 script-setup 变量暴露 组件挂载 props 自定义事件 总结 前言 在vue中,sfc(单文件组件)指的是文件后缀名为.vue的特殊文件格式,它允许将 Vue 组件中的模板.逻辑 与 样式封装在单个文件中. 以下是一个基本的sfc <script> export default {   data() {     return {       greeting: 'Hello World!'     }   } } </script> &l

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

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

  • 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

  • 详解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中如何监听props方法

    目录 Vue3.0如何监听props 第一种 第二种 vue3.0监听props做数据回显 Vue3.0如何监听props 学习vue3.0记录下props监听: 第一种 直接监听这个props export default defineComponent({   props: {     isOpen: Boolean,   },   emits: {     "close-modal": null,   },   setup(props, context) {     watch(

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

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

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

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

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

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

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

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

随机推荐