2. <template>
    3.   <div>
    4.     <p>{{n}}</p>
    5.     <button @click="setN">click</button>
    6.   </div>
    7. </template>
    9. <script lang="ts">
    10. import { defineComponent,reactive,toRefs,watch } from 'vue'
    12. export default defineComponent({
    13.   setup() {
    14.     const state = reactive({
    15.       n:0
    16.     })
    18.     const setN = () => {
    19.       state.n++
    20.     }
    21.     // 监听单一数据源
    22.     // watch(() => state.n,() => {
    23.       //   console.log('数据改变了')
    24.     // })
    26.     // watch(state,() => {
    27.       //   console.log('数据改变了')
    28.     // })
    29.     // 监听多个数据源
    30.       watch([state],()=>{
    31.         console.log('数据改变了')
    32.       });  
    34.     return{
    35.       ...toRefs(state),
    36.       setN
    37.     }
    38.   },
    39. })
    40. </script>

    监听单一数据源

    1. watch(state,() => {})
    2. watch(() => state.count,() = > {})

    多个数据源

    1. watch([数据1，数据2],() => {})