Vue计算属性详解-优快云博客

本文深入探讨Vue.js中计算属性的概念及用法，包括getter、setter的实现方式，以及计算属性与方法之间的区别。同时，文章还介绍了如何使用侦听属性来响应数据变化。

2019独角兽企业重金招聘Python工程师标准>>>

模版插入变量／表达式

实例代码：

<div id="example">
  {{ message }}
  {{ message.split('').reverse().join('') }}
</div>

其中通过{{...}}语法插入响应数据，但是只适用于简单的数值如{{ message }}，而message.split('').reverse().join('')更适合作为一个计算属性插入。

计算属性

计算属性的getter

实例代码：

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessageComputed }}"</p>
  <button @click="doSomething">aaa</button>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessageComputed: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  },
  methods: {
     doSomething: function(){
        this.message = 'Message';
     }
  }   
})

其中reversedMessage作为一个计算属性，其返回值始终取决于vm.message，当点击aaa按钮，将vm.message改为‘Message’时相应的reversedMessage返回值也会改变。

计算属性的setter

计算属性默认只有 getter ，不过在需要时也可以提供一个 setter。例子如下：

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

在运行vm.fullName = ' Summer Wang'时，setter被调用.

计算属性 VS 方法

方法

上述例子为使用计算属性显示message的reverse值，实际上方法也可以达到同样的效果，实现如下：

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessageMethod() }}"</p>
  <button @click="doSomething">aaa</button>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  methods: {
     doSomething: function(){
        this.message = 'Message';
     },
    reversedMessageMethod: function () {
      return this.message.split('').reverse().join('')
    }
  }   
})

将reversedMessage定义为方法，使用{{ reversedMessage() }}的方式插入到html中，此时点击aaa按钮reversedMessage也会响应的改变。

计算属性和方法的区别

计算属性是基于它们的依赖进行缓存的，也就是说只有其依赖发生变化时计算属性才会重新计算，只有message变化时reversedMessageComputed才会重新计算，如果message没有变化那么reversedMessageComputed始终返回之前计算的结果，并不会重新计算一次。

而方法reversedMessageMethod，每当触发重新渲染时，reversedMessageMethod将总会再次执行函数。例子：

<div id="app-7">
    <p>Original message: "{{ message }}"</p>
    <p>Computed Date: "{{ getDateComputed }}"</p>
    <button @click="getDateMethod">aaa</button>
</div>
var app7 = new Vue({
    el: '#app-7',
    data: {
        message: 'Hello'
    },
    computed: {
        // 计算属性的 getter
        getDateComputed: function () {
            return Date.now();
        }
    },
    methods: {
        getDateMethod: function () {
            this.message = Date.now();
        }
    }
});

当点击aaa按钮时，Computed Date后面的数值不会改变，而message的值会改变，是因为getDateComputed并没有重新执行，而是返回了上次执行后的缓存值。而getDateMethod重新执行了。

侦听属性

写在watch中，用于监听一些数据的变化。例如：

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    //监听firstName的变化
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    //监听lastName的变化
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

通常对于数据监听最好的做法是使用计算属性而不是watch回调。

转载于:https://my.oschina.net/u/2600761/blog/1552059