计算属性computed和监听器watch都可以监听属性的变化，而后处理一些逻辑处理，但是他们都有各自适用的场合。
demo示例代码的对比

<div id="app">{{fullName}}</div>

const vm = Vue.createApp({
    data() {
        return {
            firstName: 'summer',
            lastName: 'sunny',
            fullName: 'summer sunny'
        }
    },
    watch: {
        firstName(val) {
            this.fullName = val + ' ' + this.lastName
        },
        lastName(val) {
            this.fullName = this.firstName + ' ' + val
        }
    },
    computed: {
        fullName() {
            return this.firstName + ' ' + this.lastName
        }
    }
}).mount("#app")

从上面简单的示例代码也可以看出，使用computed属性代码更加清晰，更合理一些。
使用场景：
computed: 当需要基于现有数据计算出新的数据时，简单的同步操作。
watch: 当需要在数据变化时执行异步或者开销较大的操作时。