Vue中使用方法、计算属性或观察者的方法实例详解

熟悉 Vue 的都知道 方法methods、计算属性computed、观察者watcher 在 Vue 中有着非常重要的作用，有些时候我们实现一个功能的时候可以使用它们中任何一个都是可以的，但是它们之间又存在一些不同之处，每一个都有一些适合自己的场景，我们要想知道合适的场景，肯定先对它们有一个清楚的了解，先看一个小例子。

<div id="app">
 <input v-model="firstName" type="text">
 <input v-model="secondName" type="text">
 <p>{{fullName}}</p>
</div>

methods 方式

var vm = new Vue({
 el: "#app",
 data: {
 firstName: "Mo",
 secondName: "deng",
 fullName: ""
 },
 methods: {
 getFullName () {
  this.fullName = this.firstName + "" + this.secondName;
 }
 },
 mounted () {
 this.getFullName();
 }
});

computed 方式

var vm = new Vue({
 el: "#app",
 data: {
 firstName: "liu",
 secondName: "deng"
 },
 computed: {
 fullName () {
  return this.firstName + "" + this.secondName;
 }
 }
});

watcher 方式

var vm = new Vue({
 el: "#app",
 data: {
 firstName: "liu",
 secondName: "deng",
 fullName: "liudeng"
 },
 watch: {
 firstName: function (value) {
  this.fullName = value+ "" + this.secondName
 },
 secondName: function (value) {
  this.fullName = this.firstName + "" + value
 }
 }
});

我们看到上面三种方法实现一个相同的效果，虽然效果相同，但是我们每个方法之间会有所区别。

methods 方法

在我们使用 Vue 时可能会有很多方法会被放到这里，比如它可能是我们的事件处理方法，一些操作方法的逻辑等等，但是它不能跟踪任何依赖，而且还会在每次组件重新加载时都会执行，这就会导致我们的方法会执行很多次，如果我们的 UI 操作频繁的话，会导致性能的问题，所以在一些开销比较大的计算时，我们应该尝试其他方案进行优化处理。

computed 计算属性

从名字我们其实大概的可以看出，它是一个依赖于其他属性的，当依赖的属性发生变化的时候就会触发我们计算属性的逻辑，而且是基于它们依赖的属性进行缓存的，也就是说只有当依赖的属性发生变化的时候才会从新求值。

相比 methods 的优势在于不必每次从新执行定义的函数，这给我们的性能上有着很大的优势，对我们已经存在的数据属性非常好的处理方式，例如我们案例中 fullName 的计算，优势非常明显。

watcher 观察者