computed计算属性和watch

computed是Vue.js中的一个计算属性，用于根据数据属性的变化自动计算出新值。

watch是Vue.js中的一个观察属性，用于在数据属性发生变化时执行指定的函数，可以用来实现监控数据变化的需求。

相关问题

computed计算属性和watch区别

Computed属性是根据已有的数据计算出新的数据并返回，而当监测的数据发生变化时会自动更新，而watch是监测某个数据的变化，然后执行一些特定的逻辑，两者的主要区别就是目的不同，computed返回计算后的值，watch监听某个变量的变化并执行特定的逻辑。

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>