Vue CompositionAPI中watch和watchEffect的区别详解
作者：一直酷下去
这篇文章主要为大家详细介绍了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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！