computed计算属性

计算属性

1. 计算属性是基于响应式进行缓存的，如果所依赖的属性未发生改变，那么会返回之前的值，不会再次执行函数。只有依赖的属性发生改变，才会再次执行函数

var vm = new Vue({
  el: "#example",
  data() {
    message: 'Hello'
  },
  computed: {
    
    reversedMessage: function() {
      return this.message.split('').join
    },
    
    now: function() {
      return Date.now()
    }
  }
})

2. 计算属性默认只有getter,不过也可以提供一个setter,默认setter不会被执行，只有计算属性被重新赋值才会触发computed的set方法

computed: {
  fullNama: {
    
    get: function() {
      return this.firstName + ' ' + this.lastName
    },
    
    set: function(newValue) {
      vat names = newValue.split('')
      this.firstName = names[0],
      this.lastName = names[names.length - 1]
    }
  }
}