watchEffect

作用

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

对比 watch

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

使用

• 代码示例

<template>
  <div class="person">
    <h1>需求: 当水温达到 50 度或水位达到 20 厘米时联系服务器</h1>
    <h2 id="demo">水温: {{ temp }}</h2>
    <h2>水位: {{ height }}</h2>
    <button @click="changePrice">水温+1</button>
    <button @click="changeSum">水位+10</button>
  </div>
</template>

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

  // 方法
  function changePrice() {
    temp.value += 10
  }
  function changeSum() {
    height.value += 1
  }

  // 使用 watch 实现, 需要明确的指出要监视: temp, height
  watch([ temp, height ],(value) => {
    // 从 value 中获取最新的 temp 和 height 值
    const [ newTemp, newHeight ] = value
    // 室温达到 50 度或水位达到 20 厘米时, 立刻联系服务器
    if (newTemp >= 50 || newHeight >= 20){
      console.log('联系服务器')
    }
  })

  // 使用 watchEffect 实现, 不需要指出
  const stopWtach = watchEffect(() => {
    // 室温达到 50 度或水位达到 20 厘米时, 立刻联系服务器
    if (temp.value >= 50 || height.value >= 20){
      console.log(document.getElementById('demo')?.innerText)
      console.log('联系服务器')
    }

    // 水温达到 100 度或水位达到 50 厘米时取消监视
    if (temp.value === 100 || height.value === 50){
      console.log('清理了')
      stopWtach()
    }
  })
</script>