概述
计算属性指的是通过一系列运算之后,最终得到一个属性值。
间的的理解,当我们拥有一些数据时,我们需要将这些数据整合到一起,这时候计算属性就会完成这个操作,整合到一起的数据会变成实例的一个新属性值。当用户改变某个数据时,计算属性也会动态的调成整合后的数据。
这个动态计算出来的属性值可以被模板结构或 methods 方法使用。
使用
<body>
<div id="app">
<p>greeting1:{{greeting1}}</p>
<p>greeting2:{{greeting2}}</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/gh/brokyz/cdn/vue/vue-2.7.10.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
start: "Hello, Vue!",
end: "bye~",
},
computed: {
// 简写
greeting1() {
return this.start + this.end;
},
// 完整写法
greeting2: {
get() {
return this.start + this.end;
},
// 如果有修改计算属性的需求可以设置set(),根据值去修改依赖的属性。
// set(value){}
},
},
});
</script>
此时虽说我们没有手动创建 greeting 属性,但是计算属性的函数会给我们自动创建一个关联对应属性的属性。我们可以直接调用。当对应的属性发生改变时,r计算属性也会跟着动态改变。
特点:
- 虽然计算属性在声明时被定义为方法,但计算属性的本质是一个属性。
- 计算属性会缓存计算的结果,只有计算属性依赖的数据发生变化时,才会重新进行计算。
注意:
-
当计算属性第一次被渲染调用时,getter被调用,计算属性会存于缓存,之后只要计算属性所依赖的数据不发生改变,都会从缓存读取这个计算属性不会再次调用getter。
-
当计算属性所依赖的数据发生改变时,getter再次被调用,计算属性改变,并会重新存于缓存。
-
如果我们在vue实例外声明
let a = 1
,在计算属性中将其作为依赖,那么a发生变化时,页面不会发生变化。因为声明在vue实例外面,脱离了vue的控制。所以计算属性要使用vue实例已有的属性。 -
只有考虑读取不考虑修改时才使用简写形式。