watch & watchEffect Vue3

watch的应用场景

1. 监视【ref】定义的【基本类型】数据

<template>
    <div class="person">
      <h2>sum: {{ sum }}</h2>
      <button @click="Add">+1</button>
      
    </div>
</template>
  
<script lang="ts" setup name = "Person">
  import { ref, watch } from 'vue'
  
  //data
  let sum = ref(0)
  
  //function
  function Add() {
    sum.value += 1
  }

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



</script>
  
<style scoped>
  /* 可以添加样式 */
</style>

添加停止监视： 

<template>
    <div class="person">
      <h2>sum: {{ sum }}</h2>
      <button @click="Add">+1</button>
      
    </div>
</template>
  
<script lang="ts" setup name = "Person">
  import { ref, watch } from 'vue'
  
  //data
  let sum = ref(0)
  
  //function
  function Add() {
    sum.value += 1
  }

  //watch 
  const stopWatch = watch(sum, (newValue, oldValue) => { //监视sum
    console.log(newValue, oldValue)
    if (newValue >= 10){
      stopWatch() //需要前面定义 ‘ const stopWatch = ’
    }
  })



</script>
  
<style scoped>
  /* 可以添加样式 */
</style>

2. 监视【ref】定义的【对象类型】数据

watch监视的是对象的地址值，即只有执行changePerson更改对象地址值后，才被监视到

若想监视对象内部属性的变化，需要手动开启深度监视

<template>
    <div class="person">
      <h2>Name: {{ person.name }}</h2>
      <h2>Age: {{ person.age }}</h2>
      <button @click="changeName">Change Name</button>
      <button @click="changeAge">Change Age</button>
      <button @click="changePerson">Change Person</button>
    </div>
</template>
  
<script lang="ts" setup name = "Person">
  import { ref, watch } from 'vue'
  
  //data
  let person = ref({
    name: 'Tom',
    age: 18
  })
  
  //function
  function changeName() {
    person.value.name = 'Jack'
  }

  function changeAge() {
    person.value.age += 1
  }

  function changePerson() {
    person.value = {
      name:'Anna',
      age: 19
    }
  }

  //watch
  watch(
    person,
    (newValue, oldValue)=>{
      console.log(newValue, oldValue)
    },
    {deep: true} // {}这是一个配置对象，执行了：手动开启深度监视
  )

</script>
  
<style scoped>
  /* 可以添加样式 */
</style>

3. 监视【reactive】定义的【对象类型】数据

<template>
    <div class="person">
      <h2>Name: {{ person.name }}</h2>
      <h2>Age: {{ person.age }}</h2>
      <button @click="changeName">Change Name</button>
      <button @click="changeAge">Change Age</button>
      <button @click="changePerson">Change Person</button>
    </div>
</template>
  
<script lang="ts" setup name = "Person">
  import { reactive, watch } from 'vue'
  
  //data
  let person = reactive({
    name: 'Tom',
    age: 18
  })
  
  //function
  function changeName() {
    person.name = 'Jack'
  }

  function changeAge() {
    person.age += 1
  }

  function changePerson() {
    Object.assign (
      person,
      {
        name: 'Anna',
        age: 19
      }
    )
  }

  //watch,监视【reactive】定义的【对象类型】数据时默认开启深度监视
  watch(
    person,
    (newValue, oldValue) => {
      console.log(newValue, oldValue)
    }
  )

</script>
  
<style scoped>
  /* 可以添加样式 */
</style>

4. 监视【ref】/【reactive】定义的【对象类型】数据中的某个属性

<template>
    <div class="person">
      <h2>Name: {{ person.name }}</h2>
      <h2>Age: {{ person.age }}</h2>
      <h2>Hobby: {{ person.hobby.h1 }}, {{ person.hobby.h2 }}</h2>
      <button @click="changeName">Change Name</button>
      <button @click="changeAge">Change Age</button>
      <button @click="changeH1">Change Hobby1</button>
      <button @click="changeAllHobby">Change All Hobby</button>
    </div>
</template>
  
<script lang="ts" setup name = "Person">
  import { reactive, watch } from 'vue'
  
  // data
  let person = reactive({
    name: 'Tom',
    age: 18,
    hobby:{
      h1:'Swimming',
      h2:'Running'
    }
  })
  
  // function
  function changeName() {
    person.name += '~'
  }

  function changeAge() {
    person.age += 1
  }

  function changeH1() {
    person.hobby.h1 = 'Boxing'
  }

  function changeAllHobby() {
    // 这里不用object.assign，因为改的不是reactive对象person本身，改的是person对象里的Hobby对象
    person.hobby = {
      h1: 'Dancing',
      h2: 'Singing'
    }
  }

  // watch，监视Name属性
  watch(
   ()=>person.name, // 监视person.name，但不符合watch语法，只能写这个函数/ref/reactive/以上的数组
   (newValue, oldValue)=>{console.log(newValue, oldValue)}
  )

  // watch，监视hobby对象
  watch(
    ()=>person.hobby, //监视地址
    (newValue, oldValue)=>{console.log(newValue, oldValue)},
    {deep:true} // 同时监视其中的属性
  )

</script>
  
<style scoped>
  /* 可以添加样式 */
</style>

 5. 监视多个属性——使用数组

<template>
    <div class="person">
      <h2>Name: {{ person.name }}</h2>
      <h2>Age: {{ person.age }}</h2>
      <h2>Hobby: {{ person.hobby.h1 }}, {{ person.hobby.h2 }}</h2>
      <button @click="changeName">Change Name</button>
      <button @click="changeAge">Change Age</button>
      <button @click="changeH1">Change Hobby1</button>
      <button @click="changeAllHobby">Change All Hobby</button>
    </div>
</template>
  
<script lang="ts" setup name = "Person">
  import { reactive, watch } from 'vue'
  
  // data
  let person = reactive({
    name: 'Tom',
    age: 18,
    hobby:{
      h1:'Swimming',
      h2:'Running'
    }
  })
  
  // function
  function changeName() {
    person.name += '~'
  }

  function changeAge() {
    person.age += 1
  }

  function changeH1() {
    person.hobby.h1 = 'Boxing'
  }

  function changeAllHobby() {
    // 这里不用object.assign，因为改的不是reactive对象person本身，改的是person对象里的Hobby对象
    person.hobby = {
      h1: 'Dancing',
      h2: 'Singing'
    }
  }

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

</script>
  
<style scoped>
  /* 可以添加样式 */
</style>

WatchEffect应用场景

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

<template>
    <div class="person">
      <h2>x: {{ x }}</h2>
      <h2>y: {{ y }}</h2>
      <button @click="plusX">x+1</button>
      <button @click="plusY">y+1</button>

    </div>
</template>

<script lang="ts" setup name = "Person">
  import { ref, watchEffect } from 'vue'
  
  // data
  let x = ref(0)
  let y = ref(0)
  
  // function
  function plusX() {
    x.value += 1
  }

  function plusY() {
    y.value += 1
  }

  // watch，监视
  watchEffect(
    ()=>{
      if(x.value >= 3 || y.value >= 3) {
        console.log('message')
      }
    }
  )

</script>
  
<style scoped>
  /* 可以添加样式 */
</style>

watch 对比watchEffect

1. 都能监听响应式数据的变化，不同的是监听数据变化的方式不同
2. watch:要明确指出监视的数据
3. watchEffect:不用明确指出监视的数据(函数中用到哪些属性，那就监视哪些属性)