vue项目中的计算属性computed和监听属性watch怎么使用

计算属性computed可以根据已有的数据，动态地计算出新的数据，并将计算结果返回。在Vue的组件实例中，可以通过在computed选项中定义计算属性。比如，我们可以定义一个计算属性fullName，用于拼接firstName和lastName：

<template>
  <div>
    First name: <input v-model="firstName"><br>
    Last name: <input v-model="lastName"><br>
    Full name: {{ fullName }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  }
}
</script>

监听属性watch可以在数据变化时执行自定义的回调函数。在Vue的组件实例中，可以通过在watch选项中定义监听属性。比如，我们可以定义一个监听属性firstName，用于在firstName变化时更新fullName：

<template>
  <div>
    First name: <input v-model="firstName"><br>
    Last name: <input v-model="lastName"><br>
    Full name: {{ fullName }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe',
      fullName: ''
    }
  },
  watch: {
    firstName(val) {
      this.fullName = val + ' ' + this.lastName
    }
  }
}
</script>