Vue2 计算属性
概述
计算属性指的是通过一系列运算之后，最终得到一个属性值。
间的的理解，当我们拥有一些数据时，我们需要将这些数据整合到一起，这时候计算属性就会完成这个操作，整合到一起的数据会变成实例的一个新属性值。当用户改变某个数据时，计算属性也会动态的调成整合后的数据。
这个动态计算出来的属性值可以被模板结构或 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实例已有的属性。 -
只有考虑读取不考虑修改时才使用简写形式。
