vue中的computed和watch区别

在vue.js官方文档中看到computed和watch获取全名的一个例子：

 var var vm = new Vue({
   el: '#demo',
   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
     }
   }
 })

 var var vm = new Vue({
   el: '#demo',
   data: {
     firstName: 'Foo',
     lastName: 'Bar'
   },
   computed: {
     fullName: function () {
       return this.firstName + ' ' + this.lastName
     }
   }
 })

计算属性顾名思义就是通过其他变量计算得来的另一个属性，fullName在它所依赖firstName，lastName这两个变量变化时重新计算自己的值。

另外，计算属性具有缓存。计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 lastName和firstName都没有发生改变，多次访问 fullName计算属性会立即返回之前的计算结果，而不必再次执行函数。

而观察watch是观察一个特定的值，当该值变化时执行特定的函数。例如分页组件中，我们可以检测页码执行获取数据的函数。