Vue.js 提供了两种强大的数据处理机制：计算属性（computed）和观察者（watch）。计算属性主要用于在模板中处理复杂逻辑，而观察者则用于监听和响应数据的变化。在这篇文章中，我们将深入探讨这两个概念，并通过实例来理解它们的工作原理。
我们来看计算属性。计算属性是 Vue 实例中的一个特殊属性，它们用于存放计算得出的值。在模板中，我们可以直接使用这些计算属性，Vue.js 会自动处理其依赖关系并进行缓存。只有当相关依赖发生变化时，计算属性才会重新计算。例如：
```html
<div class="test">
<p>原始的信息{{message}}</p>
<p>计算后的信息{{ComputedMessage}}</p>
</div>
```
```javascript
var myVue = new Vue({
el: ".test",
data: {
message: 12
},
computed: {
ComputedMessage: function() {
return this.message + 10;
}
}
});
```
在这个例子中，`ComputedMessage` 是一个计算属性，它依赖于 `message` 数据。每当 `message` 变化时，`ComputedMessage` 的值也会相应更新。由于 Vue.js 的缓存机制，`ComputedMessage` 不会因为不必要的重新计算而浪费性能。
另一种处理复杂逻辑的方法是使用方法（methods）。虽然方法也能达到相同的效果，但它们不会自动缓存结果，每次触发都会重新执行。例如：
```html
<div class="test">
<p>原始的信息{{message}}</p>
<p>计算后的信息{{MessageFunction()}}</p>
</div>
```
```javascript
var myVue = new Vue({
el: ".test",
data: {
message: 12
},
methods: {
MessageFunction: function() {
return this.message + 10;
}
}
});
```
在这个例子中，`MessageFunction` 是一个方法，每次渲染或重新渲染时都会调用，即使 `message` 没有变化。
接下来，我们讨论观察者（watch）。watch 用于监听并响应数据的变化，它允许我们在数据变化时执行自定义的逻辑。例如，我们可以监听 `firstName` 和 `lastName` 并组合成 `fullName`：
```html
<div class="test">
<p>原始的信息{{fullName}}</p>
<button @click="fu">test</button>
</div>
```
```javascript
var myVue = new Vue({
el: ".test",
data: {
firstName: "fur",
lastName: "bool",
fullName: "sasas dsdsd dsds"
},
computed: {
fullName: {
get: function() {
console.log("get");
return this.firstName + this.lastName;
},
set: function(value) {
var names = value.split(" ");
this.firstName = names[0];
this.lastName = names[names.length - 1];
console.log("set");
}
}
},
methods: {
fu: function() {
// 触发fullName的改变
}
}
});
```
在这个例子中，`fullName` 计算属性不仅有 `get` 方法用于获取值，还有 `set` 方法用于在值改变时执行相应的操作。点击按钮触发 `fu` 方法，这将改变 `fullName`，进而触发 `set` 方法，更新 `firstName` 和 `lastName`。
总结来说，计算属性适用于基于现有数据生成新数据的情况，它们自动跟踪依赖并提供缓存。而观察者则更适用于需要在数据变化时执行特定操作的场景，比如异步请求或者复杂的逻辑处理。合理运用这两种机制，可以使 Vue.js 应用的模板保持简洁，逻辑清晰，易于维护。
