vue3.0 watch的用法

admin管理员组

文章数量:1130349

一 、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、公众号：公众号「进军全栈攻城狮」

对前端技术保持学习爱好者欢迎关注公众号共同学习。在进阶的路上，共勉！

一 、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、公众号：公众号「进军全栈攻城狮」

对前端技术保持学习爱好者欢迎关注公众号共同学习。在进阶的路上，共勉！

本文标签： watch