vue3 watch和watchEffect的使用以及有哪些区别

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

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(() => {
   s1()
  }, 5000)
 })
 const { name, englishName } = toRefs(nameObj)
}
template: `Name: <input v-model="name" /> englishName: <input v-model="englishName" />`

watchEffect(() => {
	console.log(nameObj.name) 
})

const s = watchEffect(() => {
	console.log(nameObj.name) 
 setTimeout(() => {
 	s()
 }, 5000)
})

const s1 = watch([() => nameObj.name, () => nameObj.name], ([curName, curEng], [prevName, curEng]) => {
 	console.log(curName, curEng, '----', prevName, curEng)
  setTimeout(() => {
   s1()
  }, 5000)
 })

 watch([() => nameObj.name, () => nameObj.name], ([curName, curEng], [prevName, curEng]) => {
 	console.log(curName, curEng, '----', prevName, curEng)
  setTimeout(() => {
   s1()
  }, 5000)
 }, {
 	immediate: true
 })