Vue3.0的多种侦听方式

简介: Vue3.0的多种侦听方式

目录


一、wacthEffect


二、watch


1.1第一种方式侦听


1.2第二种方式侦听


1.3侦听多个数据源


一、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,第一次就会执行
      })1.
  • 侦听ref的数据源
  • 侦听reactive数据源
  • 1.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侦听多个数据源
1.//侦听多个数据(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);
      })

最后

如果对您有帮助,希望能给个👍评论收藏三连!


想跟博主交朋友的可以通过查找,公_号❤:前端老实人,联系到博主并获取更多资料


博主为人老实,无偿解答问题哦❤

相关文章
|
7月前
|
JavaScript
vue一个组件监听另一个组件
vue一个组件监听另一个组件
71 0
|
JavaScript
vue的数据监听是如何实现的?
vue的数据监听是如何实现的?
|
2月前
|
存储 消息中间件 JavaScript
Vue3 多种组件通讯方法
【10月更文挑战第6天】
|
7月前
|
JavaScript
vue中使用v-on监听多个方法
vue中使用v-on监听多个方法
72 0
|
7月前
|
JavaScript
在Vue中,如何使用`$once`侦听一个事件?
在Vue中,如何使用`$once`侦听一个事件?
138 1
|
7月前
|
监控 JavaScript API
vue是如何进行监听数据变化的?
vue是如何进行监听数据变化的?
40 0
|
7月前
|
JavaScript 前端开发 API
Vue 数据监听机制及 Vue 2.0 和 Vue 3.0 的比较
Vue 数据监听机制及 Vue 2.0 和 Vue 3.0 的比较
73 1
|
JavaScript 开发者
VUE学习笔记--侦听器
VUE学习笔记--侦听器
|
7月前
|
缓存 JavaScript 前端开发
Vue 3.0 响应式 计算和侦听
Vue 3.0 响应式 计算和侦听
57 0
vue3中watch监听不是你想的那样简单
vue3中watch监听不是你想的那样简单