watch于watcheffect的区别

组合式API

watch()

用来监听数据变化，默认是懒监听，watch调用有三个参数，第一个是监听的数据，数据包含以下几种情况，刚进去页面渲染后不会加载，仅当他监听的数据变化时才触发：

一个响应式对象
一个函数，返回一个值
由上述类型的值组成的数组

//响应数据的生成可以是ref（）也可以是reactive
const count = ref(0)
const handleChange = () => {
    count.value++
}
watch(count, (val, oldVal) => {
    console.log(val, oldVal)
})

const userInfo = reactive({
    name: '张三',
    info: {
        age: 18,
        mobile: '111111111'
    }
})
const handleChange = () => {
    userInfo.value.name = '李四'
}
// 当直接监听一个响应式对象时，监听器会自动启用深层模式
watch(userInfo, (val) => {
    console.log(val)
})
// 等价于
watch(userInfo, (val) => {
    console.log(val)
}, { deep: true })
// ----------------------------
watch(userInfo, (val, oldVal) => {
    // 新的值和旧的值一样
    console.log(val === oldVal)
})



const userInfo = reactive({
    name: '张三',
    info: {
        age: 18,
        mobile: '22222222'
    }
})
//也可以使用toref进行属性的结构
// 需要监听userInfo其中的一个属性
watch(() => userInfo.name, (val, oldVal) => {
    // 当userInfo的name变化，函数会触发
})
// 当监听多个来源时，回调函数接受两个数组，分别对应来源数组中的新值和旧值
watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
  /* ... */
})

第二个参数是数据发生变化后的回调函数，该函数接收三个参数：新值、旧值，以及一个用于注册副作用清理的回调函数。

第三个可选的参数是一个对象，支持以下这些选项：

• immediate：在监听器创建时立即触发回调。
• deep：如果源是对象，强制深度遍历，以便在深层级变更时触发回调。

watchEffect()

立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。

• 第一个参数就是要运行的副作用函数。
• 第二个参数是一个可选的选项
• 对于响应式对象的属性变化时无法监听，仅能监听基本数据类型。

// 公里数
const num = ref(0)
// 燃油箱存量
const ml = ref(50)
cosnt parson = ref({
    name: 'wjj'
})
const handleName = () => {
    parson.name = 'www'
}
const handleNum = () => {
    num.value += 1000
}
const handleMl = () => {
    ml.value -= 10
}
// 不能监听响应式对象
watchEffect(() => {
    console.log('1')
    if (ml.value < 10 || num.value > 10000) {
        alert('移除')
    }
})