Vue3中，watchEffect函数

<template>
  <h2>当前求和：{{sum}}</h2>
  <button @click="sum++">点我加1</button>
  <hr>
  <h2>当前信息：{{msg}}</h2>
  <button @click="msg += '!'">点我加1</button>
  <hr>
  <h2>姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <h2>job1薪资：{{person.job.j1.salary}}</h2>
  <button @click="person.name += '~'">修改姓名</button>
  <button @click="person.age++">增长年龄</button>
  <button @click="person.job.j1.salary++">增长薪资</button>
</template>

<script>

import { ref, watch, reactive, watchEffect } from 'vue'

export default {
  name: 'DemoPerson',
  setup() {
    let sum = ref(0)
    let msg = ref('你好啊')
    let person = reactive({
      name: '张珍',
      age: 18,
      job: {
        j1: {
          salary: 20
        }
      }
    })
    watch(sum, (newVal, oldVal) => {
      console.log('sum值变了，',newVal, oldVal);
    }, {immediate: true})

    /**
     * watch的套路是：既要指明监视的属性，也要指明监视的回调。
     * watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。
     *
     * watchEffect有点像computed：
     *    computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。
     *    而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。
     *
     * watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。
     *    watchEffect(()=>{
     *      const x1 = sum.value
     *      const x2 = person.age
     *      console.log('watchEffect配置的回调执行了')
     *    })
     */  

    watchEffect(() => {
      // const x1 = sum.value
      const x2 = person.job.j1.salary
      console.log('watchEffect所指定的回调执行了', x2);
    })

    return {
      sum,
      msg,
      person
    }
  }
}
</script>

<style>
</style>