首页 前端知识 【Vue】Vue3.0 (十二)、watchEffect 和watch的区别及使用

【Vue】Vue3.0 (十二)、watchEffect 和watch的区别及使用

2024-10-29 11:10:17 前端知识 前端哥 938 288 我要收藏

上篇文章: 【Vue】Vue3.0 (十二)、watch对ref定义的基本类型、对象类型;reactive定义的对象类型的监视使用

🏡作者主页:点击!

🤖Vue专栏:点击!

⏰️创作时间:2024年10月17日21点56分

文章目录

    • 【watchEffect】
      • 一、使用方式
      • 二、初始化执行时机
      • 三、监听数据
      • 四、回调函数参数
      • 五、适用场景
      • 六、示例
        • watch 示例一:
        • 再来个栗子趴~
      • 总结:

【watchEffect】

watchEffectwatch 都是 Vue.js
中用于响应式数据变化的特性,但它们之间存在一些区别,主要体现在以下几个方面:

一、使用方式

  • watch
    • 是一个选项 API,通常在组件的选项中使用。
    • 需要显式地指定要监听的数据和回调函数。例如:
watch('somedata', (newval, oldval) => {
    // 做一些事情
});
- 也可以监听多个数据的变化,多个数据的时候需要区分是监听对象还是基本的数据类型,在写法上有些区别,具体可见我上一篇文章:[【Vue】Vue3.0 (十二)、watch对ref定义的基本类型、对象类型;reactive定义的对象类型的监视使用](https://blog.csdn.net/qq_39666711/article/details/142974884?spm=1001.2014.3001.5502)

例如:
watch(['data1', 'data2'], (newValue,oldValue) => {
    // 做一些事情
    // 比如输出一些内容:
    console.log('数据中data1或者data2变化了',newValue,oldValue)
});
  • watchEffect
    • 是一个函数 API,在组件的 setup 函数或生命周期函数中使用。
    • 不需要显式地指定要监听的数据,它会自动追踪函数内部使用的响应式数据。例如:
watcheffect(() => {
    // 依赖于响应式数据的操作
});

二、初始化执行时机

  • watch
    • 默认是懒侦听,即组件初始化时不执行,只有在被监听的数据发生变化时才会执行回调函数。
    • 如果设置了 immediate: true,则 watch 在页面首次加载时就会执行。
  • watchEffect
    • 在组件初始化时会立即执行一次,用来收集依赖。

三、监听数据

  • watch
    • 更加明确是应该由哪个状态触发侦听器重新执行。
    • 可以监听一个具体的数据变化,也可以监听多个数据的变化。
    • 当监听一个对象时,如果对象的属性发生变化,需要使用深度监听(deep: true)才能捕获到变化。
  • watchEffect
    • 会自动追踪函数内部使用的响应式数据,只要这些数据发生变化,函数就会重新执行。
    • 不能直接监听整个对象的变化,需要追踪到对象的属性,在对象属性值改变后才会触发。

四、回调函数参数

  • watch
    • 回调函数可以获取到更改前后的值。
    • 例如:
watch('somedata', (newval, oldval) => {
    console.log('旧值:', oldval);
    console.log('新值:', newval);
});
  • watchEffect
    • 无法获取到更改前的值,只能获取到变化后的值。

五、适用场景

  • watch
    • 适用于需要细粒度控制响应式数据变化的场景,比如需要手动停止监听或访问数据变化前后的值。
    • 例如,在一个表单组件中,监听表单字段的变化,以便在用户输入时进行实时验证。
  • watchEffect
    • 更适合用于自动追踪响应式数据并触发副作用的场景,如执行异步操作或更新 UI。
    • 例如,在一个数据可视化组件中,根据数据的变化自动更新图表。

六、示例

watch 示例一:
import { ref, watch } from 'vue';

export default {
    setup() {
        const count = ref(0);
        const name = ref('John');

        // 监听单个数据
        watch(count, (newCount, oldCount) => {
            console.log('count 的值从', oldCount, '变为了', newCount);
        });

        // 监听多个数据
        watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
            console.log('count 的值从', oldCount, '变为了', newCount);
            console.log('name 的值从', oldName, '变为了', newName);
        });

        return {
            count,
            name
        };
    }
};
  • watchEffect 示例
import { ref, watchEffect } from 'vue';

export default {
    setup() {
        const count = ref(0);
        const name = ref('John');

        watchEffect(() => {
            console.log('count 的值为:', count.value);
            console.log('name 的值为:', name.value);
        });

        return {
            count,
            name
        };
    }
};
再来个栗子趴~
<template>
    <div class="person">
        <h2>情况4:watch监控ref定义的对象类型数据</h2>
        <h3>姓名:{{person.name}} </h3>
        <h3>年龄:{{person.age}} </h3>
        <h3>汽车:{{person.car.c1}} /{{person.car.c2}} </h3>
        <button @click="changeName">修改姓名</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="changeC1">修改c1</button>
        <button @click="changeC2">修改c2</button>
        <button @click="changeCar">修改Car</button>
    </div>
</template>

<script lang="ts" setup name="Person">

import { reactive, ref, computed, watch } from 'vue'
//数据
let person=reactive({
    name:'张三',
    age:18,
    car:{
        c1:'宝马',
        c2:'奔驰'
    }
})

function changeName(){
    person.name+='~';
}
function changeAge(){
    person.age+=1;
}
function changeC1(){
    person.car.c1='大众1'
}
function changeC2(){
    person.car.c2='大众2'

}
function changeCar(){
    person.car={c1:'雅迪',c2:'艾玛'}
}

//情况4、watch监控reactive定义的对象类型数据中的某个属性,且该属性是一个基本类型的数据,则该属性需要写成一个有返回值的函数
// watch(()=>{return person.name},(newVal,oldVal)=>{
//     console.log('person.name变化了',newVal,oldVal);
// })


// watch([()=>person.name,person.car],(newValue,oldValue)=>{
//     console.log('person.car变化了',newValue,oldValue)
//   },{deep:true})


  watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
    console.log('person.car变化了',newValue,oldValue)
  },{deep:true})
</script>

<style>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

li {
    font: 1em sans-serif;
}
</style>

验证结果:
点击修改 name和名字都会引起watch的监听;
在这里插入图片描述

总结:

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

  2. watch:要明确指出监视的数据

  3. watchEffect:不用明确指出监视的数据(函数中用到哪些属性,那就监视哪些属性)。

watchwatchEffect
都是非常有用的响应式数据监听工具,在实际使用中,需要根据具体的需求和场景来选择合适的方法。如果需要对数据变化进行更精细的控制,或者需要获取数据变化前后的值,那么
watch 可能更适合;如果只是需要在数据变化时自动执行一些副作用,那么 watchEffect 可能更简洁方便。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/19424.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!