````
<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>
```
