【Vue3 入门到实战】6. watchEffect

目录

 1. watch 和 watchEffect对比

2. watch演示

 3. watchEffect 演示

1. watch 和 watchEffect对比

(1) 都能监听响应式数据的变化，不同的是监听数据变化的方式不同。

(2) watch: 要明确指出监视的数据。

(3) watchEffect: 不用明确指出监视的数据（函数用到哪些属性，就监视哪些属性）

2. watch演示

代码如下

<template>
  <div class="person">
    <div class="person">
      <h1>需求：水温达到50℃，或水位达到20cm，则联系服务器</h1>
      <h2 id="demo">水温：{
  
  { temp }}</h2>
      <h2>水位：{
  
  { height }}</h2>
      <button @click="changePrice">水温+1</button>
      <button @click="changeSum">水位+10</button>
    </div>
  </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],(value)=>{
      // 先获取到新的值
      const [newTemp,newHeight] = value
      // 再根据条件达到时立即联系服务器
      if(newTemp >= 50 || newHeight >= 20){
        console.log('联系服务器')
      }
    })
</script>

可以看到当满足条件时，控制台就会打印响应内容。

 3. watchEffect 演示

代码如下

<template>
  <div class="person">
    <div class="person">
      <h1>需求：水温达到50℃，或水位达到20cm，则联系服务器</h1>
      <h2 id="demo">水温：{
  
  { temp }}</h2>
      <h2>水位：{
  
  { height }}</h2>
      <button @click="changePrice">水温+1</button>
      <button @click="changeSum">水位+10</button>
    </div>
  </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
    }

    watchEffect(()=>{
      if(temp.value >= 50 || height.value >= 20){
        console.log('联系服务器')
      }
    })
</script>

可以看到 watchEffect 无需明确指出要监视的数据，用到哪些属性，就会监视哪些属性。

更多相关内容异步 ↓ ↓ ↓

Vue3入门到实战_借来一夜星光的博客-CSDN博客