Vue3中的watch函数和watchEffect用法详解

一、前言：

使用过Vue.js框架开发过项目的朋友们应该都知道watch函数在日常开发中有着至关重要的作用，随着vue3的发布,很多东西都会有相应的变化,今天就来讲讲其中watch函数使用上的不同以及新增api-watchEffect

二、Vue2.x中的watch：

咱们先来简单回顾一下vue2.x版本中watch的使用

watch: {
    dataName (val, oldVal){
        console.log("改变前的数据-" + oldVal, "改变后的数据-" + val)
    }
}

三、Vue3中的watch：

watch 函数用来侦听特定的数据源，并在回调函数中执行副作用。默认情况是懒执行的，也就是说仅在侦听的源变更时才执行回调。

<template>
  <button @click="change">count is: {{ state.count }}</button>
</template>

<script>
import { reactive, watch } from 'vue'
export default {
  setup () {
    let state = reactive({count: 0})
    let change = () => state.count++;
    watch(state, () => {
      console.log(state, '改变')
    })
    return { state, change }
  }
}
</script>

注意上面的代码，第一个参数传入的 state 对象，第二个参数是回调函数，只要 state 中任意的属性发生改变都会执行回调函数，和 vue2 的区别是不要写 deep 属性，默认就是深度监听了。

现在是监听整个对象，当然我们也可以监听对象上的某个属性，注意下面代码的写法：第一个是回调函数，第二个参数也是回调函数。

<template>
  <button @click="change">count is: {{ state.count }}</button>
</template>

<script>
import { reactive, watch } from 'vue'
export default {
  setup () {
    let state = reactive({count: 0})
    let change = () => state.count++;
    watch(() => state.count, (oldVlaue, newValue) => {
      console.log(oldVlaue, newValue, '改变')
    })
    return { state, change }
  }
}
</script>

上面都是以创建响应式对象函数reactive()方式定义的数据，下面再看看使用ref()初始化的数据怎样实现数据监听

<template>
  <button @click="change">count is: {{ count }}</button>
</template>

<script>
import { reactive, watch } from 'vue'
export default {
  setup () {
    let count = ref(0)
    let change = () => count.value++;
    watch(count, () => {
      console.log(count.value '改变')
    })
    return { count , change }
  }
}
</script>

四、watchEffect：

其实与 watch 类似的 API 还有一个就是：watchEffect，立即执行传入的一个函数，并响应式追踪其依赖，并在其依赖变更时重新运行该函数。

<template>
  <button @click="change">count is: {{ state.count }}</button>
</template>

<script>
import { reactive, watchEffect } from 'vue'
export default {
  setup () {
    let state = reactive({count: 0})
    let change = () => state.count++;
    watchEffect(() => {
      console.log(state.count, '改变')
    })
    return { state, change }
  }
}
</script>

注意它与watch的区别：

1、watch 是需要传入侦听的数据源，而 watchEffect 是自动收集数据源作为依赖。

2、watch 可以访问侦听状态变化前后的值，而 watchEffect 没有。

3、watch 是属性改变的时候执行，而 watchEffect 是默认会执行一次，然后属性改变也会执行。