vue中computed的缓存以及getter和setter

computed会基于它们的依赖进行缓存，如果数据没法改变则computed刷新时不会重新执行
什么意思呢？我们看下面的代码：

methods: {
  methodsNow: function () {
    console.log('methods')
  }
},
computed: {
	computedNow: function () {
	  console.log('computed')
	  return this.cData
	},
}

template中我们使用methods中的methodsNow和computed中的computedNow

<div>{{methodsNow()}}</div>
<div>{{computedNow}}</div>
<div>{{methodsNow()}}</div>
<div>{{computedNow}}</div>

最后我们会发现methods执行了两次，而computeds执行了一次

什么时候computed会刷新呢？当它的响应式依赖发生改变时，computed才会重新执行。
一般我们使用computed都是只用了它的getter，没有用到setter，比如上面代码中的computed，实际上是：

computed: {
	computedNow: {
		getter () {
			console.log('computed')
		  	return this.cData
		}
	},
}

计算属性settter:

<template>
  <div class="computed">
    <div>{{fullName}}</div>
    <input type="text" v-model="fullName">
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    <button @click="changeComputed">改变</button>
  </div>
</template>

<script>
export default {
  name: 'Computed',
  data () {
    return {
      firstName: '123',
      lastName: '456'
    }
  },
  methods: {
    changeComputed () {
      this.fullName = 'zhang san'
    }
  },
  computed: {
    fullName: {
      get () {
        console.log('getter执行')
        return this.firstName + ' ' + this.lastName
      },
      set (newValue) {
        console.log('setter执行')
        var names = newValue.split(' ')
        this.firstName = names[0]
        this.lastName = names[1]
        return this.firstName + ' ' + this.lastName
      }
    }
  },
  updated () {
    console.log('updated')
  }
}
</script>

<style>
  input, button{
    width: 90%;
    border: 1px solid #000;
  }
</style>

在template 中，我们可以看到，第一个input 是直接绑 v-model=“fullName”，如果我们这里直接修改了fullName的值，那么就会触发setter，同时也会触发getter以及updated函数。其执行顺序是setter -> getter -> updated，如下

这里需要注意的是，并不是触发了setter也就会触发getter，他们两个是相互独立的。我们这里修改了fullName会触发getter是因为setter函数里有改变firstName 和 lastName 值的代码。也就是说我们如果注释掉上边的setter中修改firstName 和lastName的代码后就不会执行getter，如下：

set (newValue) {
  console.log('setter执行')
  // var names = newValue.split(' ')
  // this.firstName = names[0]
  // this.lastName = names[1]
  return this.firstName + ' ' + this.lastName
}