一、概念

如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed

computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值。

如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法

1、监听值未在data中定义，以return返回值形式；

2、计算属性变量在computed中定义，属性监听在data中定义。

3、计算属性默认只有get来读取，手动修改计算属性时，会触发手写的set函数（不推荐）。

4、计算属性的值会被缓存，只有实例中相关依赖值改变时，才重新计算，性能好但不适合做异步请求。

5、计算属性是声明式的描述一个值依赖了其他值，依赖的值改变后重新计算结果更新DOM。属性监听的是定义的变量，当定义的值发生变化时，执行相对应的函数

二、基本使用

<template><div>计算属性<!-- 可以直接使用 -->{{arrLength}}</div>
</template>
<script>export default {data () {return {arr: [1,2,3,4]}},/*** 计算属性放在computed对象里面* 里面存放的是方法 方法的名字就是这个计算属性的名字* 方法的返回值就是计算属性的返回值* 只有内部数据变化才会重新计算*/computed: {/*** 计算arr数组的length*/arrLength () {// return的值就是arrLength的值return this.arr.length}}}
</script>

三、修改计算属性（一般来说计算属性不需要修改）

<template><div>计算属性<!-- 可以直接使用 -->{{ name }}<button @click="updateName">修改名字</button></div>
</template>
<script>
export default {data() {return {firstName: "张",lastName: '三'};},/*** 可写计算属性* 计算属性默认是只读的。* 当你尝试修改一个计算属性时，你会收到一个运行时警告。* 只在某些特殊场景中你可能才需要用到“可写”的属性，* 你可以通过同时提供 getter 和 setter 来创建* 不推荐直接使用*/computed: {/*** 计算arr数组的length*/name: {// getterget() {return this.firstName + " " + this.lastName;},// setterset(newValue) {// 注意：我们这里使用的是解构赋值语法[this.firstName, this.lastName] = newValue.split(" ");},},},methods: {updateName () {this.name = '李 四'}}
};
</script>