Vue3 Composition API - 数据监听

Vue3 提供了两种方式进行数据监听：watchEffect 和 watch
watchEffect 基于 Proxy 代理的响应式数据，主动监听响应式数据的变化
watch 完全等效于 2.x this.$watch，属于懒执行

基本用法

<template>
  <div>
    <h3>{{ title }}</h3>
    <!-- ref -->
    <p>支持人数：{{ supNum }}</p>
    <p>反对人数：{{ oppNum }}</p>
    <p>支持率：{{ ratio }}</p>
    <button @click="changeNum(0)">支持</button>
    <button @click="changeNum(1)">反对</button>
    <!-- reactive -->
    <p>支持人数：{{ stateSupNum }}</p>
    <p>反对人数：{{ stateOppNum }}</p>
    <p>支持率：{{ stateRatio }}</p>
    <button @click="changeStateNum(0)">支持</button>
    <button @click="changeStateNum(1)">反对</button>
  </div>
</template>

<script>
import {
  ref,
  reactive,
  toRefs,
  readonly,
  computed,
  watchEffect,
  watch,
} from 'vue'

export default {
  props: {
    title: String,
  },
  // 初始化 props 和 beforeCreate 之间
  setup(props) {
    // 构建响应式数据 ref - 一般处理简单值的响应式，基于 Object.defineProperty 监听 value 值
    let supNum = ref(0)
    let oppNum = ref(0)
    const changeNum = (type) => {
      type === 0 ? supNum.value++ : oppNum.value++
    }
    // 计算属性
    let ratio = computed(() => {
      let total = supNum.value + oppNum.value
      return total === 0
        ? '--'
        : ((supNum.value / total) * 100).toFixed(2) + '%'
    })

    // 构建响应式数据 reactive - 基于 Proxy 对数据进行深度监听，以此构建响应式
    let state = reactive({
      stateSupNum: 0,
      stateOppNum: 0,
    })
    const changeStateNum = (type) => {
      type === 0 ? state.stateSupNum++ : state.stateOppNum++
    }
    // 把 reactive 中的每一项变成 ref 响应式数据
    // console.log(toRefs(state))
    // 计算属性
    let stateRatio = computed(() => {
      let total = state.stateSupNum + state.stateOppNum
      return total === 0
        ? '--'
        : ((state.stateSupNum / total) * 100).toFixed(2) + '%'
    })

    // 只读数据
    let data = reactive({
      name: 'Brady',
      age: 34,
    })
    let dataReadonly = readonly(data)

    // 基于 Proxy 代理的响应式数据
    // watchEffect(() => {
    // console.log(props.title)
    // console.log(state.stateSupNum)
    // })

    // 监听 ref
    watch(supNum, (count, prevCount) => {
      // console.log(count, prevCount)
    })
    // 监听 多个 ref
    watch(
      [supNum, oppNum],
      ([supCount, oppCount], [supPrevCount, oppPrevCount]) => {
        console.log(supCount, supPrevCount)
        // console.log(oppCount, oppPrevCount)
      }
    )
    // 监听 reactive
    watch(state, (count, prevCount) => {
      // console.log(count, prevCount)
    })
    // 监听 reactive 中的单个属性
    watch(
      () => state.stateOppNum,
      (count, prevCount) => {
        // console.log(count, prevCount)
      }
    )

    return {
      supNum,
      oppNum,
      changeNum,
      ratio,
      ...toRefs(state),
      changeStateNum,
      stateRatio,
    }
  },
}
</script>