计算属性是自动监听依赖值的变化，从而动态返回内容，监听是一个过程，在监听的值变化时，可以触发一个回调，并做一些事情。特点：
-
监测的是依赖值，依赖值不变的情况下其会直接读取缓存进行复用，变化的情况下才会重新计算
-
数据可以进行逻辑处理，减少模板中计算逻辑。
-
对计算属性中的数据进行监视
计算属性由两部分组成：get和set，分别用来获取计算属性和设置计算属性。默认只有get，如果需要set，要自己添加。另外set设置属性，并不是直接修改自身的值，而是修改它的依赖。
computed: {
fullName: {
// getter
get () {
return this.firstName + ' ' + this.lastName
// setter
set (newValue) {
//this.fullName = newValue 这种写法会报错
var names = newValue.split(' ')
this.firstName = names[0]//对它的依赖进行赋值
this.lastName = names[names.length - 1]
现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新
计算属性必须写get,set的场景
计算属性默认只有 getter，不过在需要时你也可以提供一个 setter： 当你去设置计算属性时，也就是去修改计算属性时，需要写成get,set的方式
如果没有写会直接报错，比如
<template>
<div class="a">
<button @click="add">点击{{closure}}</button>
</template>
<script>
export default {
props: {},
data() {
return {
a: 1
computed: {
closure() {
return 'abc'
methods: {
add() {
this.closure = 'defg'
</script>
正确写法
computed: {
closure: {
get() {
console.log(123)
return 'abc'
set(value) {
// 那这个地方就只能拿值而不能修改closure的值了
// this.closure = 'value' 会报错
//做一些其他逻辑
console.log(value)
methods: {
add() {
// 修改无效
this.closure = 'defg'
get set应用场景1
用v-model来实现双向绑定（推荐用watch）
visible: {
get() {
return this.value
set(val) {}
get set应用场景2
双向绑定的计算属性+vuex
<input v-model="message">
// ...
computed: {
message: {
get () {
return this.$store.state.obj.message
set (value) {
this.$store.commit('updateMessage', value)
可缓存性
<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在组件中
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：
computed: {
now: function () {
return Date.now()
计算属性可以通过闭包来实现传参
:data="closure(item, itemName, blablaParams)"
computed: {
closure () {
return (a, b, c)=> {
下载 APP
