vue3 watch和watchEffect的使用——笔记

watch的使用

一、监视ref的定义的基本数据

<script lang="ts" setup name="Person">
  import {ref,watch} from 'vue'
  // 数据
  let sum = ref(0)
  // 方法
  function changeSum(){
    sum.value += 1
  }
  // 监视，情况一：监视【ref】定义的【基本类型】数据   
  //watch监视的是ref定义的数据，如果写成sum.value 那么监视的则是value
  const stopWatch = watch(sum,(newValue,oldValue)=>{
    console.log('sum变化了',newValue,oldValue)

  if(newValue >= 10){

   //结束监视
      stopWatch()
    }
  })
</script>

二、监视ref定义的对象类型数据 

watch监视的是对象的地址值，如果改变的是其中一个属性，需要手动开启深度监听

<script>
import {ref,watch} from 'vue'
let person = ref({
   name:'张三',
   age:18
})

//参数一：被监视的数据，参数二：监视的回调，参数三：配置对象（deep、immediate等等...）
watch(person,(newvalue,oldvalue) =>{
     console.log('person变化了',newvalue,oldvalue)
},{deep:true})
</script>

三、监视reactive定义的对象类型数据，默认开启了深度监听
 

<script lang="ts" setup>
let obj = {
a:{
   b{
    c:20
    }
}

watch(obj,(newvalue,oldvalue)=>{
console.log('Obj变化了',newValue,oldValue)
})
</script>

四、监视ref或reactive定义的对象的某个属性

1.若该属性不是【对象类型】，需要写成函数

2.若该属性依然是【对象类型】，可直接写，也可写成函数，建议写成函数

监视的要是对象里的属性，最好写成函数式

注意：若对象监视的是地址值，需要关注对象内部，需要手动开启深度监视

<script lang="ts" setup>
import {reactive,watch} from 'vue'

let person = reactive({
name:'张三',
age:18,
car:{
c1:'奔驰',
c2:'宝马'
}
})

//监视对象中的某个属性，且该属性是基本类型，要写成函数式
watch(()=>person.name,(newvalue,oldvalue)=>{
console.log('person.name变化了'）
})

//监视响应式对象中的某个属性，且该属性是对象类型，可以直接写也可写成函数
//不开启深度监视，则监视的是该对象属性的地址值，如果修改的是该响应式对象内的对象中的属性，则监视不到
watch(()=>person.car,(newvalue,oldvalue)=>{
console.log('person.car变化')
},{deep,true})
</script>

五、监视多个数据

<script lang="ts" setup>
import {reactive,watch} from 'vue'

let person = reactive({
name:'张三',
age:18,
car:{
c1:'奔驰',
c2:'宝马'
}
})


watch([()=>person.car,person.name],(newvalue,oldvalue)=>{
console.log('person.car变化')
},{deep,true})
</script>

watchEffect的使用

官网：立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行该函数

<script lang="ts" setup name="Person">
  import {ref,watch,watchEffect} from 'vue'
  // 数据
  let temp = ref(0)
  let height = ref(0)

  // 用watch实现，需要明确的指出要监视：temp、height
  watch([temp,height],(value)=>{
  
    if(newTemp >= 50 || newHeight >= 20){
      console.log('联系服务器')
    }
  })

  // 用watchEffect实现，不用明确指出监视对象
  const stopWtach = watchEffect(()=>{
    if(temp.value === 100 || height.value === 50){
      console.log('清理了')
      //关闭监听
      stopWtach()
    }
  })
</script>

watch和watchEffect 对比

1.都能监听响应式数据的变化，但是监听方式不同

2.watch要明确支出监视的数据，watchEffect不用明确指出监视的数据（函数中用到哪些属性，就监视哪些属性）

3.watchEffect会立即运行函数，watch要设置immediate为true才会立即运行

-----来自尚硅谷视频学习