一、概念
如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用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: {
// getter
get() {
return this.firstName + " " + this.lastName;
},
// setter
set(newValue) {
// 注意:我们这里使用的是解构赋值语法
[this.firstName, this.lastName] = newValue.split(" ");
},
},
},
methods: {
updateName () {
this.name = '李 四'
}
}
};
</script>