vue3中的watch和watchEffect实例详解

目录
  • 首先总结一下两者的区别:
  • 下面是根据上面的第三点做的一些小实验:
  • 总结

闲来无事,比较了一下 vue3 中的 watch 和 watchEffect,总觉得官方文档没咋说清楚,今天就小小实践了一下。

首先总结一下两者的区别:

1、watch 是惰性执行,而 watchEffect 不是,不考虑 watch 的第三个参数配置的情况,watch 在组件第一次执行的时候是不会执行的,只有在之后依赖项变化的时候再执行,而 watchEffect 是在程序执行到此处的时候就立即执行,而后再响应其依赖变化执行。

2、两者的使用方式不同,watch 一般传入两个参数,第一个参数是说明什么状态应该触发侦听器重新运行,第二个参数定义侦听器回调函数,并且该回调函数还可以接受两个参数,指向状态变化前后的值,这样我们就可以看到状态前后的变化,而在 watchEffect 则看不到,并且也不能像 watch 那样在第一个参数更具体地定义依赖项。

3、watch 只能监听响应性数据 reactive 和 ref 定义的值,若要监听一个单一的值,需要传递相应值的 getter 函数,而 watchEffect 不能监听 reactive 和 ref 定义的值,只能监听其对应的具体的值(感觉说起来有点绕,看下面的代码)。

下面是根据上面的第三点做的一些小实验:

watch :

1、让 watch 和 watchEffect 监听 reactive 定义的值:

watch:

setup() {
    const state = reactive({ count: 0, attr: { name: "" } });
    watch(state, (post, pre) => {
        console.log(post);
        console.log(pre);
        console.log("watch 执行了");
    });
    const clickEvent = () => {
        state.count++;
    };
    return { clickEvent };
}

当触发 clickEvent 事件改变 state.count 的值时,我们可以从控制台中看到如下结果,说明 watch 响应了 state.count 的变化,但是在初始的时候并没有执行。

watchEffect:

setup() {
    const state = reactive({ count: 0, attr: { name: "" } });
    watchEffect(() => {
        console.log("watchEffect 执行了");
        console.log(state);
    });
    const clickEvent = () => {
        state.count++;
    };
    return { clickEvent };
}

点击多次按钮触发 clickEvent 事件,控制台结果如下,说明 watchEffect 在组件第一次执行的时候执行了回调,而在之后并不再响应 state.count 的变化。

说明 watch 可以监听 reactive 定义的值,而 watchEffect 不能。

2、让 watch 和 watchEffect 监听 ref 定义的值。

watch:

setup(){
    const count = ref(0);
    watch(count, (post, pre) => {
        console.log("watch 执行了");
        console.log(post);
        console.log(pre);
    });
    const clickEvent = () => {
        count.value++;
    };
    return { clickEvent };
}

结果:

watchEffect:

setup(){
    const count = ref(0);
    watchEffect(() => {
      console.log("watchEffect 执行了");
      console.log(count);
    });
    const clickEvent = () => {
      count.value++;
    };
    return { clickEvent };
}

结果:

结果同上,说明 watch 可以响应 ref 定义的值,而 watchEffect 则不能。

2、让 watch 和 watchEffect 响应单一值的变化:

watch:

setup(){
    const state = reactive({ count: 0 });
    watch(state.count, (post, pre) => {
        console.log("watch 执行了");
        console.log(post);
        console.log(pre);
    });
    const clickEvent = () => {
        state.count++;
    };
    return { clickEvent };
}

结果显示无论怎么触发 clickEvent 事件,watch中的回调函数都不会触发,控制台不会打印任何内容。

watchEffect:

setup(){
    const state = reactive({ count: 0 });
    watchEffect(() => {
        console.log("watchEffect 执行了");
        console.log(state.count);
    });
    const clickEvent = () => {
        state.count++;
    };
    return { clickEvent };
}

控制台结果:

说明 watchEffect 能响应单一的值,而 watch 不能,若要让 watch 响应 count 的变化,需要给第一个参数传入 getter 函数,如下:

setup(){
    const state = reactive({ count: 0 });
    watch(
        () => state.count,
        (post, pre) => {
            console.log("watch 执行了");
            console.log(post);
            console.log(pre);
        }
    );
    const clickEvent = () => {
        state.count++;
    };
    return { clickEvent };
}

如果 getter 函数 返回的是 state 引用值,而在改变 state.count 的时候并不会修改 state 的引用值,因此不会响应 state.count 的变化,如果要响应,需要传入第三个参数配置 {deep:true},同时代码中的 post 和 pre 的值是一样的,如下:

setup(){
    const state = reactive({ count: 0 });
    //不会响应变化
    watch(
        () => state,
        (post, pre) => {
            console.log("watch 执行了");
            console.log(post);
            console.log(pre);
        }
    );
    const clickEvent = () => {
        state.count++;
    };
    return { clickEvent };
}
setup(){
    const state = reactive({ count: 0 });
    //加上了 {deep:true} 可以响应变化
    watch(
        () => state,
        (post, pre) => {
            console.log("watch 执行了");
            console.log(post);
            console.log(pre);
        },
        {deep:true}
    );
    const clickEvent = () => {
        state.count++;
    };
    return { clickEvent };
}

若返回的是引用值,而又需要比较变化前后不同的值,则需要传入 getter 函数返回该对象的深拷贝后的值,如下例子,返回一个数组:

setup(){
    const state = reactive({ count: 0 });
    const numbers = reactive([0, 1, 2, 3]);
    watch(
        () => [...numbers],
        (post, pre) => {
            console.log("watch 执行了");
            console.log(post);
            console.log(pre);
        }
    );
    const clickEvent = () => {
        numbers.push(1);
    };
    return { clickEvent };
}

控制台的结果:

总结

到此这篇关于vue3中watch和watchEffect的文章就介绍到这了,更多相关vue3 watch和watchEffect内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue3中watchEffect的用途浅析

    前言 vue2里面的 watch api 大家应该都挺熟悉的了, vue2中vue实例里面有一个 $watch 方法 在sfc(sigle file component)里面有一个 watch 选项.他可以实现在一个属性变更的时候,去执行我们想要的行为.比如: 当ID改变的时候,从数据库里面获取新的数据. 当属性变换的时候执行一个动画. 当搜索条件变更的时候,更新查询到的数据. 但是 vue3 除了 watch api, 还新增了一个 watchEffect 的 api, 我们来看看他的用法.

  • vue3的watch和watchEffect你了解吗

    目录 watch 结论1: 结论2 结论3 watchEffect 结论1 结论2watchEffect监听多个数据源 结论3watchEffect停止监听 总结 watch 结论1: watch需要侦听特定的数据源,可以是一个也可以是多个,在页面第一次加载时不运行函数,只有当监听的数据源改变时,才会运行此函数 结论2 watch监听一个对象的属性,首先监听的值要以函数返回值的形式进行传递监听,不同于vue2形式的监听,如下为对象属性5秒后改变,监听函数打印 结论3 监听多个数据源,是把需要监听

  • VUE3中watch和watchEffect的用法详解

    watch和watchEffect都是监听器,但在写法和使用上有所区别. watch在监听 ref 类型时和监听reactive类型时watch函数的写发有所不一样.watch在监听 ref 类型时: <script> import {ref, watch} from 'vue' export default {     setup() {          const state = ref(0)         watch(state, (newValue, oldValue) =>

  • 浅谈Vue3中watchEffect的具体用法

    前言 watchEffect,它立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数. 换句话说:watchEffect相当于将watch 的依赖源和回调函数合并,当任何你有用到的响应式依赖更新时,该回调函数便会重新执行.不同于 watch,watchEffect 的回调函数会被立即执行(即 { immediate: true }) 此文主要讲述怎样利用清除副作用使我们的代码更加优雅~ watchEffect的副作用 什么是副作用(side effect),简单的说副作用

  • vue3 watch和watchEffect的使用以及有哪些区别

    1.watch侦听器 引入watch import { ref, reactive, watch, toRefs } from 'vue' 对基本数据类型进行监听----- watch特性: 1.具有一定的惰性lazy 第一次页面展示的时候不会执行,只有数据变化的时候才会执行 2.参数可以拿到当前值和原始值 3.可以侦听多个数据的变化,用一个侦听起承载 setup() { const name = ref('leilei') watch(name, (curVal, prevVal) => {

  • vue3中的watch和watchEffect实例详解

    目录 首先总结一下两者的区别: 下面是根据上面的第三点做的一些小实验: 总结 闲来无事,比较了一下 vue3 中的 watch 和 watchEffect,总觉得官方文档没咋说清楚,今天就小小实践了一下. 首先总结一下两者的区别: 1.watch 是惰性执行,而 watchEffect 不是,不考虑 watch 的第三个参数配置的情况,watch 在组件第一次执行的时候是不会执行的,只有在之后依赖项变化的时候再执行,而 watchEffect 是在程序执行到此处的时候就立即执行,而后再响应其依赖

  • Vue3中v-if和v-for优先级实例详解

    目录 在vue2中应尽量避免二者同时使用 vue3中的改变 结论 补充:注意事项 总结 在vue2中应尽量避免二者同时使用 vue 2.x官方链接 当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级. 那么,我们举个例子说明为啥不推荐 <template> <div class="hello"> <div v-for="(item,index) in list" v-if="index ===

  • Vue3组件挂载之创建组件实例详解

    目录 前情提要 mountComponent 创建组件实例 总结 前情提要 上文我们讲解了执行createApp(App).mount('#root')中的mount函数,我们分析了创建虚拟节点的几个方法,以及setRef的执行机制.本文我们继续讲解mountComponent,挂载组件的流程. 本文主要内容 createComponentInstance发生了什么? 如何标准化组件定义的props.emits? 为什么provide提供的值子组件都能访问到? 组件的v-model实现原理.组件

  • C++ 中const修饰虚函数实例详解

    C++ 中const修饰虚函数实例详解 [1]程序1 #include <iostream> using namespace std; class Base { public: virtual void print() const = 0; }; class Test : public Base { public: void print(); }; void Test::print() { cout << "Test::print()" << end

  • AngularJS中使用three.js的实例详解

    AngularJS中使用three.js的实例详解 一.轨迹球的引入问题 一开始我是用下面的方式引如轨迹球,但是会报Trackballcontrols is undefined的错. import * as THREE from 'three'; import * as Trackballcontrols from 'three'; 但其实我是能够在node_module下的threejs的包中找到Trackballcontrols的文件的,我一开始以为是引用的路径没对然后修改路径到对应包下Tr

  • IOS 中CALayer绘制图片的实例详解

    IOS 中CALayer绘制图片的实例详解 CALayer渲染内容图层.与UIImageView相比,不具有事件响应功能,且UIImageView是管理内容. 注意事项:如何使用delegate对象执行代理方法进行绘制,切记需要将delegate设置为nil,否则会导致异常crash. CALayer绘制图片与线条效果图: 代码示例: CGPoint position = CGPointMake(160.0, 200.0); CGRect bounds = CGRectMake(0.0, 0.0

  • vue中v-model动态生成的实例详解

    vue中v-model动态生成的实例详解 前言: 最近在做公司的项目中,有这么一个需求,每一行有一个input和一个select,其中行数是根据服务器返回的json数据动态变化的.那么问题来了,我们要怎样动态生成v-model? 现在项目做完了就整理了一下,直接贴代码了. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <

  • Linux 中常用的Rpm命令实例详解

    rpm命令是RPM软件包的管理工具.rpm原本是Red Hat Linux发行版专门用来管理Linux各项套件的程序,由于它遵循GPL规则且功能强大方便,因而广受欢迎.逐渐受到其他发行版的采用.RPM套件管理方式的出现,让Linux易于安装,升级,间接提升了Linux的适用度. 语法 rpm(选项)(参数) 选项 -a:查询所有套件: -b<完成阶段><套件档>+或-t <完成阶段><套件档>+:设置包装套件的完成阶段,并指定套件档的文件名称: -c:只列出

  • Linux 中fork的执行的实例详解

    Linux 中fork的执行的实例详解 先看看一段fork的程序 int main() { pid_t pid; 语句 a; pid = fork(); 语句 b; } 1.当程序运行到 pid = fork()时,这个进程马上分裂(fork的中文意思)成两个进程,我们称为父进程和子进程,子进程是父进程的副本,副本的意思是子进程把父进程的数据空间,堆和栈都复制一遍给自己用,这要求在内存给子进程分配和父进程同样大的存储空间,这样,父,子进程拥有相同的数据,但不会共享存储空间,他们只是共享正文段.

  • java 中HttpClient传输xml字符串实例详解

    java 中HttpClient传输xml字符串实例详解 介绍:我现在有一个对象page,需要将page对象转换为xml格式并以binary方式传输到服务端 其中涉及到的技术点有: 1.对象转xml流 2.输出流转输入流 3.httpClient发送二进制流数据 POM文件依赖配置 <dependencies> <dependency> <groupId>junit</groupId> <artifactId>junit</artifact

随机推荐