Vue3中，watch时.value的问题

<script>
import { ref, watch, reactive } from 'vue'
export default {
  name: 'DemoPerson',
  setup() {
    let sum = ref(0)
    let msg = ref('你好啊')
    let person = reactive({
      name: '张珍',
      age: 18,
      job: {
        j1: {
          salary: 20
        }
      }
    })
    // 情况一：监视ref所定义的person中的数据时，不需要.value
    //  监视的是ref所定义的数据，监视是可以直接在refImpl上的value看到数据
    //    （因为value是个对象， 他的地址没有变化，监视的是个浅层次的）
    //  不能.value是因为: 
    //      sum里存的（即ref(0)的0）是个基本类型的值，
    //      对它.value就相当于是watch(0, (newval)=> {...})
    // watch(name, (newVal, oldVal) => {
    //   console.log('sum值变了，',newVal, oldVal);
    // })

    // 情况二：直接通过监视ref所定义的person的方法，想监视persone中的数据的变化时，需要.value
    //  监视的是reactive所定义的数据，reactive所定义的数据的特点：是深层次的。
    //    (不再是ref，而是ref求助reactive所定义的数据)
    // 写法一
    // watch(person.value, (newVal, oldVal) => {
    //   console.log('sum值变了，',newVal, oldVal);
    // })
    // 写法一
    // watch(person.value, (newVal, oldVal) => {
    //   console.log('sum值变了，',newVal, oldVal);
    // }, {deep: true})

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

<style>

</style>