Vue.js中的计算属性和监听属性都是用来处理数据的，但它们有不同的作用。

计算属性是在处理模板中需要进行复杂逻辑的数据时使用的，它会返回一个新的计算结果，并且只有在相关数据发生改变时才会重新计算。计算属性是基于依赖缓存的，只有当它依赖的数据发生了变化才会重新计算。

示例：

<template>
  <div>
    <p>原始价格：{{price}}</p>
    <p>打折后价格：{{salePrice}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 100,
      discount: 0.9,
    }
  },
  computed: {
    salePrice() {
      return this.price * this.discount
    },
  },
}
</script>

在上面的示例中，我们定义了一个计算属性 `salePrice`，它根据 `price` 和 `discount` 的值来计算打折后的价格。

监听属性是在当数据发生变化时需要执行一些额外操作时使用的，它可以监听数据的变化并在数据变化时触发一个函数。

示例：

<template>
  <div>
    <p>当前数量：{{count}}</p>
    <button @click="increment">增加数量</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    }
  },
  methods: {
    increment() {
      this.count++
    },
  },
  watch: {
    count(newVal, oldVal) {
      console.log(`count改变了，新值为${newVal}，旧值为${oldVal}`)
    },
  },
}
</script>

在上面的示例中，我们使用监听属性 `watch` 监听了 `count` 数据的变化，并在每次 `count` 变化时输出变化的信息。

需要注意的是，计算属性和监听属性都只是对数据的处理和监听，不会改变原始数据的值。