Vue.js 是一款流行的前端JavaScript框架，它提供了许多强大的特性，其中计算属性是其核心功能之一。计算属性在Vue实例中允许我们定义基于其他数据动态计算的值，它们提供了简洁、高效的代码来处理复杂的逻辑。
计算属性是Vue组件内部的一个特殊类型的属性，它们不是存储数据，而是基于组件的数据模型（`data`）进行计算后返回结果。Vue.js自动跟踪依赖关系，当依赖的数据发生变化时，计算属性的值也会相应更新。这种方式避免了手动监听和更新视图的繁琐过程。
在给出的示例代码中，我们看到几种不同的计算属性使用方式：
1. 方式一：在模板中直接使用表达式
```html
<div id="app-1">{{ message.split('').reverse().join('') }}</div>
```
这种方式虽然简单，但不推荐，因为它将计算逻辑嵌入到了模板中，导致模板过于复杂，不易维护。
2. 方式二：在`methods`中定义方法
```html
<div id="app-2">
{{ message2 }}
<p>反转后的内容{{ reverseMessage2() }}</p>
</div>
```
在`methods`中定义`reverseMessage2`函数，然后在模板中调用。这种方式需要手动调用方法，每次调用都会执行计算，不会缓存结果。
3. 方式三：使用`computed`属性
```html
<div id="app-3">
<p>原始{{message3}}</p>
<p>反转后{{ reverseMessage3 }}</p>
</div>
```
在`computed`对象中定义`reverseMessage3`，Vue会自动跟踪依赖并缓存结果，当依赖的`message3`改变时，`reverseMessage3`才会更新。
`$watch`是一个Vue实例的方法，用于监听数据变化。当你需要在数据变化时执行某些操作，特别是异步操作或昂贵操作时，`$watch`就派上用场了。例如，在`app4`中，当`firstName`或`lastName`改变时，`fullName`会通过`$watch`回调自动更新。
```javascript
var app4 = new Vue({
el: '#app-4',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
});
```
然而，如果只是用来创建一个依赖于其他数据的值，计算属性通常比`$watch`更简洁且性能更好。如`app5`所示，使用计算属性`fullname`替代`$watch`来组合`firstName`和`lastName`。
```javascript
var app5 = new Vue({
el: '#app-5',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullname: function () {
return this.firstName + ' ' + this.lastName
}
}
});
```
Vue.js的计算属性提供了一种声明式的、可复用的方式来处理数据和视图之间的映射，使得代码更加清晰，易于维护。而`$watch`则是在特定场景下，当需要对数据变化做出反应，特别是执行复杂操作时的有力工具。理解并熟练掌握这两者，能够帮助开发者编写出高效且易于维护的Vue应用。
