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 DIFF
本文主要介绍了浅谈Vue DIFF，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-05-05
vue递归组件实战之简单树形控件实例代码
这篇文章主要介绍了vue递归组件实战之简单树形控件的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-08-08
vue 2.0封装model组件的方法
本篇文章主要介绍了vue 2.0封装model组件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
vue.js入门教程之绑定class和style样式
小编之前介绍了通过vue.js计算属性，不知道大家都学会了吗。那这篇文章中我们将一起学习vue.js实现绑定class和style样式，有需要的朋友们可以参考借鉴。
2016-09-09
ElementUI之Message功能拓展详解
这篇文章主要介绍了ElementUI之Message功能拓展详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-10-10
vue3+vite中开发环境与生产环境全局变量配置指南
最近在使用vite生成项目,这篇文章主要给大家介绍了关于vue3+vite中开发环境与生产环境全局变量配置的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-08-08
vue+element实现手机号验证码注册的示例
本文主要介绍了vue+element实现手机号验证码注册的示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-01-01
Vue-router中path的设置方式
这篇文章主要介绍了Vue-router中path的设置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-02-02
vue3中路由传参query、params及动态路由传参详解
vue3中的传参方式和vue2中一样,都可以用query和params传参,下面这篇文章主要给大家介绍了关于vue3中路由传参query、params及动态路由传参的相关资料,需要的朋友可以参考下
2022-09-09
解析vue.config.js文件使用
这篇文章主要介绍了vue.config.js文件使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-07-07