<template>
  <div>
    <button>是多少：{{name}}</button>
  </div>
</template>
<script>
import {reactive, toRefs, watch} from 'vue'
export default {
  props: {
    select: Function,
  },
setup(props, ctx) {
  const state = reactive({ 
    name: 'vue',
    age: 3
  })
  watch(
    // 监听name、 age
    [() => state.name, () => state.age],
    // 如果属性改变、则执行以下回调
    ([newName, newAge], [oldname, oldAge]) => {
      console.log(oldname, oldname)
      console.log(oldAge, oldAge)
    },
    { lazy: true} // 在 watch 被创建的时候，不执行回调函数中的代码
  )
  setTimeout(() => {
    state.name = 'react'
    state.age += 1
  }, 1000)
  //console.log(age.value)
  return {
    ...toRefs(state),
  }
}
}
</script>