有关vue中的计算属性与方法、计算属性与监听属性的区别

一、计算属性与方法

      首先两者返回的结果一样，但是

      1、计算属性他是依赖于响应式缓存的，也就是说当响应式信息没有改变时，它会利用原先的缓存进行显示，而不用不停的去调用方法

　　　　　　例如：有一个计算属性A,需要大量的计算才可以得到A,同时有一个依赖于A的计算属性B，那么如果没有缓存的话，为了得到B就需要多次执行A,想想是不是有时候没有必要呢

       所以他们的区别就在于你在实际的开发中，是否需要缓存，需要的话就用计算属性，不需要就用方法

         实例：

             计算属性

                     computed: {

                         // 计算属性的getter

                        reversedMessage: function () {

                                           // `this` 指向 vm 实例

                                       return this.message.split('').reverse().join('')

                                                                }

                                      }

             方法：

                   // 在组件中

                  methods: {

                          reversedMessage: function () {

                                         return this.message.split('').reverse().join('')

                                                                         }

                                    }

二、计算属性与侦听属性

     侦听属性：是vue提供的一种可以观察和响应vue数据变化的一个方法。

    但是如果你要观察数据变化还是用计算属性比较好，因为侦听属性写起来相对来说没有计算属性结构那个直观，而且有些繁琐
   官网实例如下：

<div id="demo">{{ fullName }}</div>

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 vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
//计算属性
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

那个更好？一目了然

那侦听属性没有用吗？怎么可能，官网写了它当然有用。

当需要在数据变化时执行异步或开销较大的操作时

比如在得到结果前设置一个中间状态、操作异步等这些计算属性是做不到的（可以去参考官网哦，哪里有实例讲的很清楚的https://doc.vue-js.com/v2/guide/computed.html）