Vue CompositionAPI中watch和watchEffect的区别详解

更新时间：2023年06月19日 11:33:46 作者：一直酷下去

这篇文章主要为大家详细介绍了Vue CompositionAPI中watch和watchEffect的区别，文中的示例代码简洁易懂，希望对大家学习Vue有一定的帮助

watch

侦听一个数据

【例1: watch侦听ref基础类型的数据】

const app = Vue.createApp({
    setup() {
        const { ref,watch } = Vue;
        const name = ref('LeBrown')
        watch(name,(currentVal,preVal) => {
            console.log(currentVal,preVal);
        })
        return {name}
    },
    template: `
        <div>
          <div>
            Name: <input v-model="name"/>
          </div>
          <div>
            Name is: {{name}}
          </div>
        </div>
    `
})
const vm = app.mount('#root')

【例2: watch侦听reactive类型的数据】

const app = Vue.createApp({
    setup() {
        const { reactive,watch,toRefs} = Vue;
        const nameObj = reactive({name:'LeBrown'})
        watch(()=> nameObj.name,(currentVal,preVal) => {
            console.log(currentVal,preVal);
        })
        const {name} = toRefs(nameObj)
        return {name}
    },
    template: `
        <div>
          <div>
            Name: <input v-model="name"/>
          </div>
          <div>
            Name is: {{name}}
          </div>
        </div>
    `
})
const vm = app.mount('#root')

【备注】

watch具备一定的惰性 lazy (wath侦听器首次加载不会执行，只有数据发生变化才会执行)
watch中的参数可以拿到原始值(回调函数的第一个参数)和当前值(回调函数的第二个参数)
watch可以侦听ref基础类型的数据，也可以对reactive类型的数据进行监听(watch的第一个参数要写成函数的形式，函数里面写要监听值或对象的属性)

侦听多个数据

【例1】

const app = Vue.createApp({
    setup() {
        const { reactive,watch,toRefs} = Vue;
        const nameObj = reactive({name:'LeBrown',englishname:'James'})
        watch([()=> nameObj.name,()=> nameObj.englishname],([curName,curEng],[prevName,prevEng]) => {
            console.log(curName,curEng);
            console.log(prevName,prevEng);
        })
        const {name,englishname} = toRefs(nameObj)
        return {name,englishname}
    },
    template: `
        <div>
          <div>
            Name: <input v-model="name"/>
          </div>
          <div>
            Name is: {{name}}
          </div>
          <div>
            EnglishName: <input v-model="englishname"/>
          </div>
          <div>
            Name is: {{englishname}}
          </div>
        </div>
    `
})
  const vm = app.mount('#root')

【备注】

watch可以侦听多个数据的变化(watch的第一个参数是一个数组，第二个参数是一个函数，函数的参数是数组)，用一个侦听器承载

watchEffect

【例1】

 const app = Vue.createApp({
    setup() {
        const { reactive,  watchEffect, toRefs } = Vue;
        const nameObj = reactive({ name: 'LeBrown', englishname: 'James' })
        watchEffect(()=>{
            console.log(nameObj.name);
        })
        const { name, englishname } = toRefs(nameObj)
        return { name, englishname }
    },
    template: `
        <div>
          <div>
            Name: <input v-model="name"/>
          </div>
          <div>
            Name is: {{name}}
          </div>
          <div>
            EnglishName: <input v-model="englishname"/>
          </div>
          <div>
            Name is: {{englishname}}
          </div>
        </div>
    `
})
const vm = app.mount('#root')

【运行结果】

【备注】

watchEffect 会立即执行 immediate，没有惰性(wath侦听器首次加载就执)
watchEffect发现侦听器中的代码对外部有依赖，就会对其进行侦听，如果依赖的值发生变化，就会执行侦听器中的代码，也就是说它不需要传递你要侦听的内容,自动会感知代码依赖，不需要传递很多参数，只需要传递一个回调函数
watchEffect只能获取到当前的值，不能获取到之前的值

【总结】

watch和watchEffect 都是具备侦听能力的语法，但是在使用时还是有区别的。比如：在代码中要写ajax请求的时候，一般不会用到之前的数据，只会用到当前的数据，结合当前的数据发送请求，这种情况下使用watchEffect来发送ajax就比较合适
setup是纯函数，给固定的输入就会有固定的输出，但是涉及到异步请求或者定时器，输出和输入就不是纯函数，导致它不是纯函数的异步请求叫Effect(副作用)，因此从名字上看在处理异步的操作的时候，最好使用watchEffect

其他

取消侦听器

const app = Vue.createApp({
    setup() {
        const { reactive,  watchEffect, toRefs } = Vue;
        const nameObj = reactive({ name: 'LeBrown', englishname: 'James' })
        const stop = watchEffect(()=>{
            console.log(nameObj.name);
            console.log(nameObj.englishname);
            setTimeout(() => {
                // 取消侦听器
                stop()
            }, 3000);
        })
        const { name, englishname } = toRefs(nameObj)
        return { name, englishname }
    },
    template: `
        <div>
          <div>
            Name: <input v-model="name"/>
          </div>
          <div>
            Name is: {{name}}
          </div>
          <div>
            EnglishName: <input v-model="englishname"/>
          </div>
          <div>
            Name is: {{englishname}}
          </div>
        </div>
    `
})
const vm = app.mount('#root')

取消watch侦听器也是一样

让watch变成非惰性

watch的第三个参数可以通过{immediate: true}对侦听器进行配置，这样wath侦听器就变成非惰性了

到此这篇关于Vue CompositionAPI中watch和watchEffect的区别详解的文章就介绍到这了,更多相关Vue watch watchEffect内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue OptionsAPI与CompositionAPI的区别与使用介绍

解决vue终端报错:不是内部或外部命令
最近学习一下前端框架Vue,整体上感觉还是比较有意思的,但是在安装vue-cli脚手架的时候,出现了一些问题,解决问题也花费了不少时间,下面这篇文章主要给大家介绍了关于解决vue终端报错:不是内部或外部命令的相关资料,需要的朋友可以参考下
2023-02-02
vue前端img访问鉴权后端进行拦截的代码示例
路由拦截是一种在用户访问特定页面之前对其进行拦截和处理的机制,下面这篇文章主要给大家介绍了关于vue前端img访问鉴权后端进行拦截的相关资料,需要的朋友可以参考下
2024-03-03
vue router2.0二级路由的简单使用
这篇文章主要为大家详细介绍了vue router2.0二级路由的简单使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
Vue 3跨组件传参之非父子层级通信解决方案
在Vue3组件开发中,组件之间的数据传递是一个非常重要的功能,这篇文章主要介绍了Vue 3跨组件传参之非父子层级通信解决方案,文中通过代码介绍的非常详细,需要的朋友可以参考下
2025-11-11
Vue自定义Hook实现简化本地存储
这篇文章主要为大家详细介绍了如何通过使用 Vue 3 的 Composition API 创建一个强大而灵活的自定义 Hook,简化了在 localStorage 或 sessionStorage 中管理数据的流程,需要的可以参考下
2023-12-12
前端Vue如何获取登录的用户名或用户id代码实例
在前端开发中,获取登录用户的用户名是一项常见的需求,这篇文章主要给大家介绍了关于前端Vue如何获取登录的用户名或用户id的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-07-07
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
这篇文章主要介绍了Vuex持久化插件(vuex-persistedstate)-解决刷新数据消失的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-04-04
如何在Vue.js项目中使用Jest进行单元测试
在众多测试框架中,Jest 因其易用性、强大功能以及与 Vue.js 的良好兼容性,成为了许多开发者的首选,本文将详细介绍如何在 Vue.js 项目中使用 Jest 进行单元测试,需要的可以参考下
2024-11-11
Vue Router 实现登录后跳转到之前想要访问的页面
这篇文章主要介绍了Vue Router 实现登录后跳转到之前相要访问的页面,本文仅演示路由跳转和导航守卫相关代码的实现，不包含具体的权限验证和登录请求，需要的朋友可以参考下
2022-12-12
Vue3报错‘defineProps‘ is not defined的解决方法
最近工作中遇到vue3中使用defineProps中报错,飘红,所以这篇文章主要给大家介绍了关于Vue3报错‘defineProps‘ is not defined的解决方法,需要的朋友可以参考下
2023-01-01