【Vue3中watch属性详解】

😊Vue3中watch属性详解 🚀watch属性的定义🚀Vue2中watch属性写法🚀Vue3中的基本使用🚀多种情况🚀watchEffect函数💻总结

🚀watch属性的定义

当被监视的属性变化时，回调函数自动调用，进行相关 *** 作，所谓✍监视属性，就是监测指定的属性是否发生变化，如果发生了，则进行一系列 *** 作，如果没发生变化，则监视属性也不会被触发。

Vue3中的✍watch属性和Vue2的基本一致，作用一致。Vue2中watch属性时作为一个配置项来使用，在Vue3中watch作为函数来使用。 虽然在Vue3中可以使用Vue2的语法，但是watch属性在Vue3中不推荐写成配置项的方式，因为在Vue3中提倡的就是👉组合式API👈的思想。

---

🚀Vue2中watch属性写法

在完整写法中，可以对数据的监视进行一些条件限制

//Vue2中watch属性的使用
// 简单写法
watch:{
    // 函数接受两个参数，用于监视指定数据变化
    // -newValue:数据变化后的结果
    // -oldValue:数据变化前的结果
    sum(newValue, oldValue){
        console.log('求和的值变化了',"变化后的值是"+newValue, '变化前的值是'+oldValue);
    }
},


//完整写法
watch:{
  sum:{
      // 深度监视，因为watch默认只是浅层监视
      depp:true,
      // 在初始化完成之后就触发监听
      immediate:true,
      // 监视属性的回调
      handler(newValue, oldValue){
          console.log('求和的值变化了',"变化后的值是"+newValue, '变化前的值是'+oldValue);
      }
  }
},

---

🚀Vue3中的基本使用

👉Vue3中，watch属性以组合式API的形式出现在setup()中

<template>
  <h2>我是TestA组件h2>  
  <h2>当前求和为：{{sum}}h2>
  <button @click="sum++">点击按钮sum +1button>
template>

<script>
import { ref, watch } from 'vue'
export default {
    name:'TestA',
    setup(){
        // 数据
        let sum = ref(0)

        //监视属性
        watch(sum, (newValue, oldValue)=>{
            // 回调函数形式
            console.log('求和的值变了', '变化后的值是'+newValue, '变化前的值是'+oldValue);
        })
        //返回对象
        return{
            sum
        }
        
    }
}
script>

<style>

style>

效果展示：


但是，这只是watch属性的最基本使用，并且，在监视✍ref()和✍reactive()这两种方式定义的响应式数据时，写法上存在一定差异，之后，我会列出watch属性在多种情况下的使用

---

🚀多种情况

监视✍ref所定义的多个响应式数据

watch([sum, info],(newValue, oldValue)=>{
    console.log("数据发生改变了", oldValue, newValue);
})

👉监视多个数据时，触发谁的监视，谁的数据就发生改变，谁就会被捕获到

监视✍reactive所定义的响应式数据

watch(mankind, (newValue, oldValue)=>{
    console.log('数据变化了', oldValue, newValue);
})

请注意，监视前：

监视后：

并且在这种情况下，watch属性是强制开启深度监视的，无论数据有多少层，只要数据一改变，在Vue3中都是能被监视到的，但是在Vue2中，如果不开启深度监视的话，watch属性是无法监视到深层次数据的改变的

//把这个数据的层级嵌套定义成深层,在html模板中访问到mankind.family.brother.one这一层
let mankind = reactive({
    name:'路飞',
    age:18,
    family:{
        brother:{
            one:'艾斯'
        }
    }
});
......
......
//开启监视
watch(mankind, (newValue, oldValue)=>{
    console.log('数据变化了', oldValue, newValue);
});

触发监视前：

触发监视后：

监视✍reactive()所定义的响应式数据中的某一个值

有时候我们可能想实现的功能是只监视响应式数据中的某一个值的改变，并不是像上面那样监视所有属性，只有指定那个值改变了，才会触发监视。

// 通常在此处，我们以为的写法是这样,,但是此种方式是不对的
// watch(mankind.name,(newValue, oldValue)=>{})
watch(()=>mankind.name,(newValue, oldValue)=>{
    console.log('数据变化了', oldValue, newValue);
})

监视✍reactive()所定义的响应式数据中的一些数据的改变

watch([()=>mankind.name,()=>mankind.age],(newValue, oldValue)=>{
    console.log('数据变化了', oldValue, newValue);
})

以上监视reactive所定义的响应式数据中的某一个值和监视reactive所定义的响应式数据中的一些数据的改变区别于直接对reactive所定义的响应数据中所有数据进行监视，在默认情况下，监视reactive所定义的响应数据中所有数据是开启深度监视的，也就是说，无论数据在第几层，都能监视到，但是最后两种情况，是针对其中某一个值或某一些值进行监视的，如果还要监视其属性下的更深层的值，是要开启深度监视的，否则无法监视得到

上述这段文字虽然听起来很绕口，但是是watch属性中值得注意的一个点，可以自己多结合实例自己理解一下，确实就是这样。虽然在实际开发中，上述情况不会全用到，但是上述总结的可能出现的情况已经很全面了，需要做到任何一种情况都要了解。

---

🚀watchEffect函数

也算监视的一种，但是和传统的watch属性有差异，差异就在于使用时，👉不传入任何参数👈，说简单点就是不指名要监视哪个属性，在函数体回调中用到了哪个属性，就监视哪个属性，并且此函数在初始化时会自动调用一次。

// 默认immediate:true
watchEffect(()=>{
    //用到谁，监视谁
    const x = mankind.name
    console.log('我被触发了')
})

✍watchEffect()和✍computed()比较类似，不同之处在于，调用computed()必须写返回值，而调用watchEffect()不用写返回值

---

💻总结

以上内容就是我对Vue3中watch()属性的一个比较全面的理解，对比起Vue2中的watch()属性，两者有一些相似之处，且目的都是一样的，但是在Vue3中，又新添了很多Vue2中没有的东西，且在实际开发过程中灵活度也很高，能处理多种常见业务逻辑。

以上内容也是我个人在学习时整理的笔记以及自己的一些理解，希望对正在学习Vue这门课程的小伙伴们能有一定帮助吧。

🎨觉得不错的话记得点赞收藏呀！！🎨

😀别忘了给我关注~~😀