```` <template> <div> <button @click="changeEvent">加{{count}}</button> <button @click="add">setup加{{num}}</button> <p>{{ user.age }}</p> <p>{{ username }}</p> <p>{{ changeUser }} 计算</p> <p>{{ user.reverseType }}</p> </div> </template> <script> import { ref, reactive, toRefs, computed, watchEffect, watch } from 'vue' export default { name: "App", data() { return { count: 0 } }, setup() { const num = ref(0) const user = reactive({ username: "徐徐", age: 30, type: "哎123", reverseType: computed(() => { return user.type.split('').reverse().join(''); }) }) // 会自动判断监听哪个 watchEffect(() => { // console.log(num); console.log(user.age, '触发监听'); }) // 单独监听 watch(num, (n, o) => { console.log('新Num', n); console.log('旧num:', o); }) // 多个监听 watch([num, user], (n, o) => { console.log(num, user); }) function add() { num.value++ // 需要 value user.age++ } return { num, add, user, ...toRefs(user) } }, watch: { // 可以监听到 setup 里的值 num(n) { console.log(n, "gaibian"); } }, computed: { changeUser() { return this.num + "改" } }, methods: { changeEvent() { this.count++ } } }; </script> ```