<template>
<h1 @click="changeName">改变用户名称:{{ name }}</h1>
<h1 @click="changeNum">计数{{ num }}</h1>
</template>
import { ref, reactive, toRefs, watchEffect, watch } from 'vue'
export default {
data () {
return {
}
},
methods: {
},
setup () {
const num = ref(0)
function changeNum () {
num.value += 20
}
const user = reactive({
age: '18',
name: '小明',
})
function changeName () {
user.name = '小红'
}
watchEffect(() => {
console.log(user.name)
console.log('user.name改变了')
})
watch(num, (newNum, prevNum) => {
console.log(newNum, prevNum);
console.log('num改变');
})
watch([num, user], (newNum, prevNum) => {
console.log(newNum, prevNum);
console.log('num,user改变');
})
return { num, changeNum, ...toRefs(user), changeName }
},
}
</script>