Vue3 Composition API - 数据监听

你的名字 2023-03-04 13:28 66阅读 0赞

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

##### 基本用法 #####

<template>
      <div>
        <h3>{ {  title }}</h3>
        
        <p>支持人数：{ {  supNum }}</p>
        <p>反对人数：{ {  oppNum }}</p>
        <p>支持率：{ {  ratio }}</p>
        <button @click="changeNum(0)">支持</button>
        <button @click="changeNum(1)">反对</button>
        
        <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>