计算属性的使用

计算属性

计算属性computed和方法methods很像，用法基本一样，可以理解为能够在里面写一些计算逻辑的属性，在某些情况下，使用计算属性可以减少模板中的计算逻辑，且因为计算属性有数据缓存，当数据没有发生变化时，不在执行计算的过程。

一、计算属性computed和methods的对比

1、两种方式的最终结果是一致的。
2、因为计算属性是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变的时候它们才会重新调用函数赋值（计算属性有缓存，计算属性会把函数执行一次，把结果存起来，依赖的值改变，会重新赋值。）

HTML代码

<div id="test">
    <h2>{{ firstname }} {{ lastname }}</h2>
    <h2>{{ fullname }}</h2>
    <h2>{{ fullname }}</h2>
    <h2>{{ fullname }}</h2>
    <h2>{{ fullname }}</h2>
    <h2>{{ fullname }}</h2>
    <h2>{{ getFullname() }}</h2>
    <h2>{{ getFullname() }}</h2>
    <h2>{{ getFullname() }}</h2>
    <h2>{{ getFullname() }}</h2>
    <h2>{{ getFullname() }}</h2>
  </div>

JS代码

<script>
export default {
name: "test",
data() {
  return {
    firstname: "hello",
    lastname: "world",
  };
},
computed: {
  fullname() {
    console.log("fullname");
    return this.firstname + " " + this.lastname;
  },
},
methods: {
  getFullname() {
    console.log("getFullname");
    return this.firstname + " " + this.lastname;
  },
},
};
</script>

页面显示
这里可以看出来计算属性和方法输出结果完全一致。

控制台输出

但在控制台中可以看出来计算属性computed在运行时只调用了一次函数，但在methods中每次都调用了。
所以对于任何复杂逻辑都应当使用计算属性。

二、计算属性的setter和getter

每一个计算属性都包含一个getter和setter，一般默认利用getter来读取。
在需要的时候也可以使用setter函数来进行一些操作。（注意：set方法是有参数的）

computed: {
set(newValue) {
	console.log('输出一些东西')
}
get() {
	fullname() {
    console.log("fullname");
    return this.firstname + " " + this.lastname;
  },
 }
}