<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 } from 'vue'
export default {
  name: 'DemoPerson',
  /**
   * vue2写法
   * watch: {
   *  sum(newval) {
   *    console.log('sum值变了---', newval);
   *  }
   *  sum: {
   *    immediate: true, // 立即监听，一上来就执行
   *    deep: true,
   *    handler(newval) {
   *      console.log('sum值变了---', newval);
   *    }
   *  }
   * },
   */
  // vue3写法
  setup() {
    let sum = ref(0)
    let msg = ref('你好啊')
    let person = reactive({
      name: '张珍',
      age: 18,
      job: {
        j1: {
          salary: 20
        }
      }
    })
    // 情况一：监视ref所定义的一个响应式数据
    // watch(sum, (newVal, oldVal) => {
    //   console.log('sum值变了，',newVal, oldVal);
    // })

    // 情况二：监视ref所定义的多个响应式数据
    // 写法一：直接写两个watch来分别进行监听（vue2中只能有一个watch，vue3中可以由多个）
    // watch(sum, (newVal, oldVal) => {
    //   console.log('sum值变了，',newVal, oldVal);
    // })
    // watch(msg, (newVal, oldVal) => {
    //   console.log('msg值变了，',newVal, oldVal);
    // })

    // 写法二：直接放到数组中
    // watch([sum, msg], (newVal, oldVal) =>  {
    //   console.log(newVal, oldVal); // (2) [1, "你好啊"] (2) [0, "你好啊"]
    // })
    // 如何在watch中使用immedite（deep在vue3中有点小问题）
    // watch([sum, msg], (newVal, oldVal) =>  {
    //   console.log(newVal, oldVal); // (2) [1, "你好啊"] (2) [0, "你好啊"]
    // }, { immediate: true })

    // 情况三：监视reactive所定义的一个响应式数据的全部属性
    // 有坑：1.此处无法正确的获得oldVal 且无法解决
    // //       2.强制开启了深度监视，即deep配置无效
    // watch(person, (newVal, oldVal) =>  {
    //   console.log( newVal, oldVal);
    // }, { deep: false }) // 此处的deep配置无效

    // 情况四：监视reactive所定义的一个响应式数据中的某个属性
    // watch(() => person.age, (newVal, oldVal) =>  {
    //   console.log( newVal, oldVal);
    // },)

    // 情况五：监视reactive所定义的一个响应式数据中的某些属性
    // watch([() => person.age, () => person.name], (newVal, oldVal) =>  {
    //   console.log( newVal, oldVal);
    // },)

    // 特殊情况
    watch(() => person.job, (newVal, oldVal) =>  {
      console.log( newVal, oldVal);
    }, { deep: true }) // 此处由于监视的是reactve定义的对象中的某个属性，所以，
                       // 虽然deep配置有效，但仍然无法获取正确的oldVal

    // 如果需要使用oldVal，用ref单独拎出去做监视即可

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

<style>

</style>