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 组件之间传值的主要方法
父组件向子组件传值，使用 props：可以通过在子组件上绑定 props，然后在父组件中通过 v-bind 绑定相应的数据来传递数据，这篇文章主要介绍了Vue 组件之间传值的方法,需要的朋友可以参考下
2023-12-12
vue组件间通信解析
这篇文章主要为大家详细介绍了vue组件间通信解析，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
函数式组件劫持替代json封装element表格
这篇文章主要介绍了为大家函数式组件劫持替代json封装element表格的过程思路及示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
vue如何修改el-form-item中的label样式修改问题
这篇文章主要介绍了vue如何修改el-form-item中的label样式修改问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
ant-design-vue中的select选择器,对输入值的进行筛选操作
这篇文章主要介绍了ant-design-vue中的select选择器,对输入值的进行筛选操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
用Vue.js方法创建模板并使用多个模板合成
在本篇文章中小编给大家分享了关于如何使用Vue.js方法创建模板并使用多个模板合成的相关知识点内容，需要的朋友们学习下。
2019-06-06
基于VuePress 轻量级静态网站生成器的实现方法
VuePress是一个基于Vue的轻量级静态网站生成器以及为编写技术文档而优化的默认主题。这么文章给大家详细介绍了vuepress 静态网站生成器的方法，需要的朋友参考下吧
2018-04-04
Vue的v-if和v-show的区别图文介绍
这篇文章主要介绍了Vue的v-if和v-show的区别图文介绍,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-03-03
如何封装了一个vue移动端下拉加载下一页数据的组件
这篇文章主要介绍了如何封装了一个vue移动端下拉加载下一页数据的组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-01-01
Vue3中的组合式 API示例详解
组合式 API 是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件，这篇文章主要介绍了什么是Vue3的组合式 API,需要的朋友可以参考下
2022-06-06