【Vue3】学习watch监视:深入了解Vue3响应式系统的核心功能(下)

【Vue3】学习watch监视:深入了解Vue3响应式系统的核心功能(下)

💗💗💗欢迎来到我的博客,你将找到有关如何使用技术解决问题的文章,也会找到某个技术的学习路线。无论你是何种职业,我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章,也欢迎在文章下方留下你的评论和反馈。我期待着与你分享知识、互相学习和建立一个积极的社区。谢谢你的光临,让我们一起踏上这个知识之旅!

🍋情况三:监视【reactive】定义的对象类型数据

准备代码如下

<template>
  <div class="person">
    <h2>姓名:{{ person.name }}</h2>
    <h2>年龄:{{ person.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改人</button>
</div>
 </template>
 
 <script lang="ts" setup name="Person11">javascript">
    import {reactive,watch} from 'vue'

    let person = reactive({
      name:"馒头",
      age:22
    })
   function changeName(){
    person.name += '*' 
   }
   function changeAge(){
    person.age += 1
   }
   function changePerson(){
    person = {name:'小馒头',age:23}
   }

 </script>
 
 <style scoped>
   .person {
     background-color: skyblue;
     box-shadow: 0 0 10px;
     border-radius: 10px;
     padding: 20px;
   }
   button {
     margin: 0 5px;
   }
 </style>

对于之前的ref,我们清楚的知道它可以对整体对象进行修改,也就是上一节的情况二,但是对于reactive来说,并不可以对整体就行修改,那如果我们想要就行整体修改的话,需要做点小修改

  function changePerson(){
    Object.assign(person,{name:'小馒头',age:23}) 
   }

这样相当于默认开启深度监视(不能使用deep关掉),接下来我们将监视代码写上

watch(person,(newValue,oldValue)=>{
    console.log(newValue,oldValue)
   })


这样就可以了

🍋情况四:监视【ref或reactive】定义的对象类型数据中的某个属性

  1. 若该属性值不是【对象类型】,需要写成函数形式。
  2. 若该属性值是依然是【对象类型】,可直接编,也可写成函数,建议写成函数。

结论:监视的要是对象里的属性,那么最好写函数式
注意点:若是对象监视的是地址值,需要关注对象内部,需要手动开启深度监视。

准备代码如下

<template>
  <div class="person">
    <h2>姓名:{{ person.name }}</h2>
    <h2>年龄:{{ person.age }}</h2>
    <h2>爱好:{{ person.hobby.h1 }}、{{ person.hobby.h2 }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeH1">修改第一个爱好</button>
    <button @click="changeH2">修改第二个爱好</button>
    <button @click="changeHobby">修改整个爱好</button>
</div>
 </template>
 
 <script lang="ts" setup name="Person11">
    import {reactive,watch} from 'vue'

    let person = reactive({
      name:'馒头',
      age:22,
      hobby:{
        h1:'游泳',
        h2:'篮球'
      }
    })
    function changeName(){
      person.name += '~'
    }
    function changeAge(){
      person.age += 1
    }
    function changeH1(){
      person.hobby.h1 = '足球'
    }
    function changeH2(){
      person.hobby.h2 = '羽毛球'
    }
    function changeHobby(){
      person.hobby = {h1:'乒乓球',h2:'跳绳'}
    }
 </script>
 
 <style scoped>
   .person {
     background-color: skyblue;
     box-shadow: 0 0 10px;
     border-radius: 10px;
     padding: 20px;
   }
   button {
     margin: 0 5px;
   }
 </style>

我们先来运行一下界面

如果我们想要监控全部

    watch(person,(newValue,oldValue)=>{
    console.log(newValue,oldValue)
   })

如果我们想要监视某一个属性可以直接(.)属性么。我们来试试看

watch(person.name,(newValue,oldValue)=>{
    console.log(newValue,oldValue)
   })

结果显然是不可以的

那我们如何修改呢,需要加一个getter函数,所谓getter函数就是能返回一个值的函数

watch(()=>{return person.name},(newValue,oldValue)=>{
    console.log(newValue,oldValue)
   })

这样修改的监视就可以满足对某属性的监视了


如果我们想要监视对象的话,下面的代码就可以解决,但是当我们点击修改对象整体,确不监视了

   watch(()=>person.hobby,(newValue,oldValue)=>{
    console.log('person.car变化了',newValue,oldValue)
  })

这时候我们需要加点东西,也就是我们之前说过的deep配置

   watch(()=>person.hobby,(newValue,oldValue)=>{
    console.log('person.car变化了',newValue,oldValue)
  },{deep:true})

这样我们就可以全部监视了

注意:监视响应式对象中的某个属性,且该属性是对象类型的,可以直接写,也能写函数,更推荐写函数

🍋情况五:监视上述的多个数据

写法如下,将想要监视的对象或者属性包裹在[ ]中即可

  watch([()=>person.name,person.hobby],(newValue,oldValue)=>{
    console.log(newValue,oldValue)
  },{deep:true})

🍋总结

本节将剩下的监视情况全数介绍了,如果有感兴趣的请参考官方文档watch

挑战与创造都是很痛苦的,但是很充实。

转载请说明出处内容投诉
CSS教程_站长资源网 » 【Vue3】学习watch监视:深入了解Vue3响应式系统的核心功能(下)

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买