vue3.0 watch的用法

vue3.0 watch的用法一、watch函数用来侦听特定的数据源,并在回调函数中执行副作用。默认情况是惰性的,也就是说仅在侦听的源数据变更时才执行回调。watch(source,callback,[options])参数说明:source:可以支持string,Object,Function,Array;用于指定要侦听的响应式变量callback:执行的回调函数options:支持deep、immediate和flush选项。二、接下来介绍三个参数的用法1.项目中使用的时候按需引入im

大家好,欢迎来到IT知识分享网。

一 、watch 函数用来侦听特定的数据源,并在回调函数中执行副作用。默认情况是惰性的,也就是说仅在侦听的源数据变更时才执行回调。

watch(source, callback, [options])

参数说明:
source: 可以支持 string,Object,Function,Array; 用于指定要侦听的响应式变量
callback: 执行的回调函数
options:支持 deep、immediate 和 flush 选项。

二、接下来介绍三个参数的用法

1.项目中使用的时候按需引入
import { 
    defineComponent, ref, reactive, toRefs, watch } from "vue";

2.监听reactive、ref定义的数据

export default { 
   
     name: "test1",
      //setup接收两个参数 prop,context
      setup(){ 
   
          const year = ref(0)
          const user = reactive({ 
   
                name:'gejianfang',
                age:18
          })
          setInterval(()=>{ 
   
                year.value ++;
                user.age ++
          },1000)
          //监听ref定义的数据
          watch(()=>user.age,(cur,pre)=>{ 
   
                console.log(cur,'新值',pre,'旧值')
          });
		  //监听reactive定义的数据
          watch(year,(newValue,oldValue)=>{ 
   
                console.log(newValue,'新值',oldValue,'旧值')
          },{ 
   deep:true})
          
          /**上面我们分别使用了两个 watch, 当我们需要侦听多个数据源时, 可以进行合并,同时侦听多个数据:**/
          watch([()=>user.age,year],([cur,pre],[newValue,oldValue])=>{ 
   
                console.log(cur,'新值',pre,'旧值');
                console.log(newValue,'新值',oldValue,'旧值')
          })

          return{ 
   
                year,
                // user,
                ...toRefs(user)  //toRefs解构,不需要写user.name 或者uesr.age
          }

      }

三、侦听复杂的嵌套对象

const state = reactive({ 
   
  room: { 
   
    id: 100,
    attrs: { 
   
      size: "140平方米",
      type: "三室两厅",
    },
  },
});
watch(
  () => state.room,
  (newType, oldType) => { 
   
    console.log("新值:", newType, "老值:", oldType);
  },
  { 
    deep: true }
);

如果不使用第三个参数deep:true, 是无法监听到数据变化的。前面我们提到,默认情况下,watch 是惰性的, 那什么情况下不是惰性的, 可以立即执行回调函数呢?其实使用也很简单, 给第三个参数中设置immediate: true即可

交流
1、QQ群:可添加qq群共同进阶学习: 进军全栈工程师疑难解 群号: 856402057

2、公众号:公众号「进军全栈攻城狮」

对前端技术保持学习爱好者欢迎关注公众号共同学习。在进阶的路上,共勉!
在这里插入图片描述

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/14968.html

(0)
上一篇 2024-02-21 21:15
下一篇 2024-02-22 18:26

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信