纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

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

前端老实人   2021-10-09 我要评论
想了解全面总结Vue3.0的多种侦听方式的相关内容吗,前端老实人在本文为您仔细讲解Vue3.0侦听方式的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue3.0侦听方式,vue侦听器,vue侦听属性,下面大家一起来学习吧。

侦听器

虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 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侦听方式内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!


相关文章

猜您喜欢

  • JavaScript常用的对象 JavaScript中5个常用的对象

    想了解JavaScript中5个常用的对象的相关内容吗,IT共享者在本文为您仔细讲解JavaScript常用的对象的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:JavaScript常用的对象,JavaScript对象,下面大家一起来学习吧。..
  • Android dex2oat Android逆向之dex2oat的实现解析

    想了解Android逆向之dex2oat的实现解析的相关内容吗,小道安全在本文为您仔细讲解Android dex2oat的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Android,dex2oat,Android,逆向,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.freemmogames.net 【漫漫下载站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式