<template>
  <div>
    本人 : {{refWatch.name}} - {{refWatch.age}}
    朋友 : {{refWatch.firend.name}}
    同桌 : {{refWatch.firend.hang.name1}} - {{refWatch.firend.hang.name2}}

    <br><button @click="refWatch.name = '吴宇腾1号' ,refWatch.age++">修改本人</button>
    <br><button @click="refWatch.firend.name = '林丽友'">修改朋友</button>
    <br><button @click="refWatch.firend.hang.name1 = '小君'">修改同桌</button>
  </div>
</template>

<script>

import {ref,watch} from 'vue'

export default {

  setup(){
    // ref的监听 - 复杂类型 [要加上深度监听才可以]
    const refWatch = ref({
      name:'吴宇腾',
      age:18,
      firend:{
        name:'小丽',
        hang:{
          name1:'小吴',
          name2:'小样'
        }
      }
    })
    watch(refWatch,(newV,oldV)=>{
      console.log(newV,oldV)
    },{
      immediate:true,
      deep:true
    })

    return {
      refWatch,
    }
  }
}
</script>