vue3.0 watch

使用方式
对比2.x版本需要引入

import { watch } from 'vue'

1.处理基本数据类型

import { ref,reactive,computed,watch } from 'vue'
<template>
   姓：<input type="text" v-model="person.firstName">
    <br/>
   名：<input type="text" v-model="person.lastName">
    <br/>
  <span>{{person.fullName}}</span>
    <br/>
   全名:<input type="text" v-model="person.fullName">
  <br>
  <span>累加：{{num}}</span>
  <button @click="num++">加</button>
  <br>
  <span>薪资：{{person.money}}k</span>
  <button @click="person.money++">涨</button>
  <br>
  <span>年龄：{{person.age}}岁</span>
  <button @click="person.age++">年龄+</button>
  <br>
  <span>学习天数：{{person.hobby.study.day}}天</span>
  <button @click="person.hobby.study.day++">天数+</button>
</template>


 let num = ref(0)
 watch(num,(newVal,oldVal)=>{
     console.log('发生变化了',newVal,oldVal)
   })

2.处理引用数据类型

	let person = reactive({
	      firstName:"",
	      lastName:'',
	      money:20,
	      age:10,
	      hobby:{
	        study:{
	          day:0
	        }
	      }
	    })
 /*
   * 监视reactive所定义的一个响应式的全部属性
   * 1.注意：此处无法正确的获取oldValue
   * 2.注意：强制开启了深度监视（deep配置无效）
   * */
    watch(person,(newVal,oldVal)=>{
     console.log('发生变化了',newVal,oldVal)
    })

    /*
    * 监视reactive所定义的一个响应式的某一个属性(不是对象)
    * */
    watch(()=>person.money,(newVal,oldVal)=>{
      console.log('发生变化了',newVal,oldVal)
    })
    /*
   * 监视reactive所定义的一个响应式的某一些属性
   * */
    watch([()=>person.money,()=>person.age],(newVal,oldVal)=>{
      console.log('发生变化了',newVal,oldVal)
    })

    /*
    * 监视reactive所定义的一个响应式的某一个属性（是对象）
    * */
    watch(()=>person.hobby.study,(newVal,oldVal)=>{
      console.log('发生变化了',newVal,oldVal)
    },{deep:true}))
    

3.watchEffect
watchEffect 函数
watch: 既要指明监视的属性，也要指明监视的回调
watchEffect: 不用指明监视哪个属性，监视的回调中用到了哪个属性，那就监视哪个属性
watchEffect类似于computed:
但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值
而watchEffect更注重的是过程（回调函数的返回体），所以不用写返回值

 watchEffect(()=>{
      const n1 = num.value
      console.log('变化了')
    })