vue3 watch和watchEffect的使用以及有哪些差异

ASP站长网这篇文章主要介绍了vue3 watch和watchEffect的使用以及有哪些区别，帮助大家更好的理解和学习vue框架，感兴趣的朋友可以了解下

1.watch侦听器

引入watch

import { ref, reactive, watch, toRefs } from 'vue'

对基本数据类型进行监听----- watch特性：

1.具有一定的惰性lazy 第一次页面展示的时候不会执行，只有数据变化的时候才会执行

2.参数可以拿到当前值和原始值

3.可以侦听多个数据的变化，用一个侦听起承载

setup() {

 const name = ref('leilei')

 watch(name, (curVal, prevVal) => {

  console.log(curVal, prevVal)

 })

}

template: `Name: <input v-model="name" />`

对引用类型进行监听-----

setup() {

 const nameObj = reactive({name: 'leilei', englishName: 'bob'})

 监听一个数据

 watch(() => nameObj.name, (curVal, prevVal) => {

  console.log(curVal, prevVal)

 })

 监听多个数据

 watch([() => nameObj.name, () => nameObj.name], ([curName, curEng], [prevName, curEng]) => {

  console.log(curName, curEng, '----', prevName, curEng)

  setTimeout(() => {

   stop1()

  }, 5000)

 })

 const { name, englishName } = toRefs(nameObj)

}

template: `Name: <input v-model="name" /> englishName: <input v-model="englishName" />`

2.watchEffect

没有过多的参数 只有一个回调函数

1.立即执行，没有惰性，页面的首次加载就会执行。

2.自动检测内部代码，代码中有依赖 便会执行

3.不需要传递要侦听的内容 会自动感知代码依赖，不需要传递很多参数，只要传递一个回调函数

4.不能获取之前数据的值 只能获取当前值

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!