setup中使用watch

watch属性监听器的作用在vue3.0中没有改变，还是监听值得变化。

在vue3.0中，仍然支持watch配置项。但是我们要在setup中使用watch得话，我们要导入watch的API，然后往watch函数中传参。

注意我们在setup中监视的数据要是响应式的，即数据要经过ref或者reactive处理。

当监视的基本类型的数据时，用法：watch("数据名"，处理函数，配置对象（可省）)

写一个例子：监视变量a的改变

<script setup>
    import {  ref,watch } from "vue";
    let a=ref(20)
    //监听基本数据类型
    watch(a,(newvalue,oldvalue)=>{
        console.log("a原本为"+oldvalue+",被修改为"+newvalue);
    },{immediate:true})//初始加载页面就运行一次

    let changerandom=()=>{
      let sam=parseInt(Math.random()*100)-50
      console.log(sam);
      a.value+=sam
    }
  
</script>

<template>
    <div>
      <p>{{a}}</p>
    <button @click="changerandom">随机修改a的值</button>
    </div>
</template>

当我们第三个参数对象配置上immediate:true时，页面初始加载时就会调用一次监听打印，这时没有旧值就为undefined.

浏览器打印情况：

 当点击按钮，a的value值-37，被监听到。

当监视的是引用数据类型时，用法也是：watch("数据名"，处理函数，配置对象（可省）)

不过当监听的是引用数据时，有几点需要注意：1、处理函数获取不了旧值，我们打印出来的跟新值一样，这是vue3.0的一个bug；2、引用数据内部默认开启深度监听，而且手动deep:false关闭不了。

写一个例子：

 <script setup>
    import { reactive, ref,watch } from "vue";
    let obj=reactive({name:"张三",age:"40",school:"cqdx",degree:"professor"
                ,other:{hobby:"sing"}
                })
    //监听引用数据类型 默认开启了深度监听，而且无法关闭。同时获取不了旧值
     watch(obj,(newvalue,oldvalue)=>{
      console.log(newvalue,oldvalue);
     },{deep:false})//这里{deep:false}无效
    
    //改变引用对象的age属性
     let changeage=()=>{
       obj.age++
     }
</script>

<template>
    <div>
      <p>{{obj.age}}</p>
    <button @click="changeage">age加一</button>
    </div>
</template>

当点击按钮以后，检测到引用数据内部属性值的改变，浏览器控制台打印情况：

 有关引用数据还有一个问题，当监听reactive处理过的引用数据内的一个引用数据时，这时它不具备默认深度监听，需要手动开启。并且如果要监听某个引用数据的属性，watch的第一个参数不再是写对象的引用，而是要写为函数的返回值的形式。

如监听上述例子的other属性，

 <script setup>
    import { reactive,watch } from "vue";
    let obj=reactive({name:"张三",age:"40",school:"cqdx",degree:"professor"
                ,other:{hobby:"sing"}
                })
    watch(()=>obj.other,(newvalue,oldvalue)=>{
    console.log(newvalue,oldvalue);
  },{deep:true}) //如果不配置deep，则检测不到hobby的改变

  let changehobby=()=>{
      obj.other.hobby="dance"
    }
</script>

<template>
    <div>
      <p>{{{obj.other.hobby}}</p>
      <button @click="changehobby">改变兴趣</button>
    </div>
</template>