watch与watchEffect的代码演示

以下是watch与watchEffect的代码演示：

<template>
  <div>
    <p>count: {{ count }}</p>
    <p>double: {{ double }}</p>
  </div>
</template>

<script>
import { reactive, watch, watchEffect } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0,
      double: 0
    })

    // watch方法
    watch(
      () => state.count,
      (newValue, oldValue) => {
        console.log(`count发生了变化，新值为${newValue}，旧值为${oldValue}`)
        state.double = newValue * 2
      }
    )

    // watchEffect方法
    watchEffect(() => {
      console.log(`count的值为${state.count}`)
    })

    return {
      count: state.count,
      double: state.double
    }
  }
}
</script>

在上面的代码中，我们使用了Vue3的reactive函数创建了一个响应式对象state，其中包含了count和double两个属性。接着使用了watch方法和watchEffect方法对count属性进行监听。

watch方法接收两个参数，第一个参数是一个函数，该函数返回要监听的目标属性的值；第二个参数是一个回调函数，当目标属性发生变化时会执行该回调函数。在上面的代码中，我们在watch方法中监听了state.count属性，当它发生变化时，我们打印了新旧值，并将state.double属性设置为count的两倍。

watchEffect方法也接收一个函数作为参数，该函数中可以访问到响应式对象中的属性，当响应式对象中的任意属性发生变化时，该函数都会被重新执行。在上面的代码中，我们在watchEffect方法中监听了state.count属性，当它发生变化时，我们打印了它的值。

最后，在template中展示了count和double的值。可以看到，当我们改变count的值时，watch方法和watchEffect方法都会被触发，执行相应的回调函数。