VUE computed和watch例子

Vue中的computed和watch两者在功能和作用机制上存在明显的差异。

首先，从性质上来说，computed实际上是一种计算属性，它的工作方式与data对象中的数据属性类似。而watch则更像是一个监听机制+事件机制，它可以监听某个数据的变化，并在数据变化时执行特定的函数。

其次，在作用机制上，两者都基于Vue的依赖追踪机制，都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化。然而，computed和watch在处理数据关系场景上有所不同。watch擅长处理一个数据影响多个数据的情况，而computed则更擅长处理一个数据受多个数据影响的情况。

此外，computed属性是根据依赖关系进行缓存的计算，并且只在需要的时候进行更新。而watch属性是一个对象，键是需要观察的表达式，值是对应回调函数，回调函数得到的参数为新值和旧值。

总的来说，Vue中的computed和watch两者在性质、作用机制以及使用场景上存在明显的差异。computed更适用于处理计算属性，而watch更适合用于监听数据变化并执行特定操作。

以下是Vue中computed和watch的例子：

computed例子：

vue
<template>  
  <div>  
    <p>{{ fullName }}</p>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      firstName: 'John',  
      lastName: 'Doe'  
    };  
  },  
  computed: {  
    fullName() {  
      return this.firstName + ' ' + this.lastName;  
    }  
  }  
};  
</script>
在这个例子中，我们定义了一个computed属性fullName，它根据firstName和lastName计算得出。在模板中，我们直接使用{{ fullName }}来展示计算结果。当firstName或lastName发生变化时，fullName会自动更新并重新计算结果。

watch例子：

vue
<template>  
  <div>  
    <p>{{ fullName }}</p>  
    <button @click="changeName">Change Name</button>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      firstName: 'John',  
      lastName: 'Doe'  
    };  
  },  
  computed: {  
    fullName() {  
      return this.firstName + ' ' + this.lastName;  
    }  
  },  
  watch: {  
    firstName(newVal, oldVal) {  
      console.log('First name changed from ' + oldVal + ' to ' + newVal);  
    },  
    lastName(newVal, oldVal) {  
      console.log('Last name changed from ' + oldVal + ' to ' + newVal);  
    }  
  },  
  methods: {  
    changeName() {  
      this.firstName = 'Jane';  
      this.lastName = 'Doe';  
    }  
  }  
};  
</script>
在这个例子中，我们使用watch来监听firstName和lastName的变化。当点击"Change Name"按钮时，会触发changeName方法，将firstName和lastName的值进行更改。由于watch监听了这两个数据的变化，因此在控制台中会输出相应的日志信息。