Vue学习笔记之methods、computed与watch

methods、computed和watch这3个属性在Vue中较为常用，可以进行方法的定义以及数值的计算，以下是对这3个属性进行介绍及相关的区别。

methods属性

methods属性是定义方法的主要区域，在此属性中，可以定义各种自定义函数名的方法以及参数，基本用法与一般的\

var vm = new Vue({
    data() {
        return {
            data1: 0
        }
    },
    methods: {
        getData() {
            // 返回data1的值
            this.data1 = 1
            return this.data1
        }
    }
})

调用methods方法中的方式有几种，如：

// 使用Vue实例来进行调用
vm.getData()

// 在HTML元素中调用
<div>{{getData()}}</div>

// 在另一个方法中调用
getAnotherData() {
    this.getData()
}

// 作为事件的回调函数
<a @click="getData"></a>

computed属性

computed属性同样是能够定义自定义的方法，如：

var vm = new Vue({
    data() {
        return {
            data1: 0
        }
    },
    computed: {
        getData() {
            // 返回data1的值
            return this.data1
        }
    }
})

调用computed的方式也有几种，如：

// 使用Vue实例来进行调用
vm.getData

// 在HTML元素中调用
<div>{{getData}}</div>

computed和methods的区别

computed属性和methods属性的定义和调用方式都非常的类似，这让很多人会产生迷惑，是否两者可以相互混着用，或者是框架设计上的问题，答案当然是否定的。

1、首先，methods直译过来的意思是“方法”，一般是用来定义Vue实例下的全局方法，用于在其他地方调用；computed则为“计算”属性，其更多的是为了处理模版表达式中过多的逻辑问题。此处使用官方的例子举例：

// 此处要完成一个字符串反转的功能，模版中的表达式过于冗长
<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

// 使用computed属性则可以简化模板表达式
// 将复杂的逻辑发在computed中
computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }

2、computed属性除了提供getter外，还提供setter，当设置computed属性中的方法时，会自动改变值。

var vm = new Vue({
  el: '#app',
  data() {
    return {
      name: ''
    }
  },
  computed: {
    nameVal: {
      get: function () {
        return this.name
      },
      set: function (newVal) {
        this.name = newVal
      }
    }
  }
});

// 设置name的值，此时name为'apple'
vm.nameVal = 'apple'

computed属性set新值的方式是使用属性赋值的方式，而一般methods中的方法则采用传递参数的方式：nameVal('apple')

3、computed属性和methods属性最大的区别在于前者具有缓存功能，而后者则没有。computed属性只有在它的相关依赖发生变化时才会重新求值，只要没有值的改变，就不会去再次执行该函数。

以下是使用计算属性计算当前的时间戳，通过now方法返回当前的时间戳，time1显示的是第一次计算的结果，然后通过vm.now再一次调用，并在time2中显示，demo如下：

<div id="app">
    <div id="time1">{{now}}</div>
    <div id="time2"></div>
</div>

<script>
    var vm = new Vue({
      el: '#app',
      computed: {
        now() {
            return Date.now()
        }
      }
    });

    var str = vm.now;
    document.getElementById('time2').innerHTML = str;
</script>

结果显示为：

1517364585280
1517364585280

从以上的结果可以看出，在第二次使用vm.now调用的时候，由于相关的依赖没有发生改变，得到的结果与第一次调用now方法的结果是相同的，即表明computed具有缓存功能。

computed属性也并非无法去除这个缓存功能的，Vue还提供了一个控制缓存的开关供用户选择——。上面的demo可以改造为：

<div id="app">
    <div id="time1">{{now}}</div>
    <div id="time2"></div>
</div>

<script>
    var vm = new Vue({
      el: '#app',
      computed: {
        now: {
          cache: false,
          get: function () {
            return Date.now()
          ｝
        }
      }
    });

    var str = vm.now;
    document.getElementById('time2').innerHTML = str;
</script>

结果显示为：

1517364584518
1517364594521

此时可以明显地看到，两次获取的当前时间戳不一样，即缓存功能被关闭了。如果你在使用computed属性进行计算的时候，又希望实时更新它的值，那么可以使用cache属性来实现，但相对的，计算的开销要大一些。

watch属性

watch属性是用来侦听数据的变化，当侦听的数值发生变化时，会触发相对应的方法。一般侦听数值的方法是以数值同名作为方法名，方法接收两个参数，newValue和oldValue，分别代表新值和旧值，demo如下：

var vm = new Vue({
  el: '#app',
  data() {
    return {
      name: 'Neil'
    }
  },
  watch: {
    name() {
      for (var i in arguments) {
        console.log('arguments: ' + arguments[i])
      }
    }
  }
});

以上的demo是定义了一个数值字符串name，当name的值发生改变的时候，会打印出所有的参数。那么现在使用vm.name='Peter'来改变name的值，结果如下：

arguments: Peter
arguments: Neil
"Peter"

通过结果可以看到，即便方法中没有带任何参数，仍然可以通过arguments来获取参数的值，即newValue为’Peter’，oldValue为’Neil’（初始值），当你需要使用参数来完成相关逻辑的时候，最好还是使用参数名的方式进行调用，同时不要弄反了顺序。