computed用于解决模版中复杂的逻辑运算，或者逻辑需要被复用的地方。

  1. // bad
  2. const App = {
  3.   template: `
  4.     <h1>{{ studentCount > 0 ? "学生数量："+ studentCount : "暂无学生" }}</h1>
  5.     <h1>{{ studentCount > 0 ? "学生数量："+ studentCount : "暂无学生" }}</h1>
  6.   `,
  7.   data() {
  8.     return {
  9.       studentCount: 1
  10.     };
  11.   },
  12. };

:::info 以上代码的问题有两个方面：
1、模版的逻辑和样式要尽可能的绝对分离，模版上不要做太多的逻辑。
2、如果另一个地方要显示同样的逻辑，这样就会导致需要运算两次。 :::

计算属性的特点

1、多次复用相同值的数据，计算属性只会调用一次

  1. const App = {
  2.   template: `
  3.     <h1>{{ studentCountInfo }}</h1>
  4.     <h1>{{ studentCountInfo }}</h1>
  5.   `,
  6.   data() {
  7.     return {
  8.       studentCount: 1
  9.     };
  10.   },
  11.   computed: {
  12.     studentCountInfo() {
  13.       // Invoked 只会被执行一次
  14.       console.log("Invoked");
  15.       return this.studentCount > 0 ? "学生数量：" + this.studentCount : "暂无学生";
  16.     }
  17.   }
  18. };
  20. const vm = createApp(App).mount("#app");

2、计算属性只会在内部逻辑依赖的数据发生变化的时候才会重新调用。

  1. const App = {
  2.   template: `
  3.     <h1>{{ studentCountInfo }}</h1>
  4.     <h1>{{ studentCountInfo }}</h1>
  5.     <button @click="clickBtn">按钮</button>
  6.     <button @click="clickBtn2">按钮</button>
  7.   `,
  8.   data() {
  9.     return {
  10.       studentCount: 1
  11.     };
  12.   },
  13.   computed: {
  14.     studentCountInfo() {
  15.       console.log("Invoked");
  16.       return this.studentCount > 0 ? "学生数量：" + this.studentCount : "暂无学生";
  17.     }
  18.   },
  19.   methods: {
  20.     clickBtn() {
  21.       this.studentCount = new Date();
  22.     },
  23.     clickBtn2() {
  24.       this.studentCount = 2;
  25.     }
  26.   }
  27. };

只有数据变化后，才会打印 Invoked
3、计算属性会缓存其依赖的上一次计算出的数据结果

computed 和 methods 的区别

  1. 在使用时，computed可以当做属性使用，而methods则可以当做方法调用。

  2. computed可以具有getter和setter方法，因此可以赋值，而methods是不行的。

    1. const App = {
    2. // ...
    3. computed: {
    4.  studentCountInfo() {
    5.    console.log("Invoked");
    6.    return this.studentCount > 0 ? "学生数量：" + this.studentCount : "暂无学生";
    7.  },
    8.  result: {
    9.    get() {},
    10.    set() {}
    11.  }
    12. }
    13. }

  3. computed无法接收多个参数，而methods可以。

  4. computed是有缓存的，而methods没有。
  5. computed属性会暴露到应用/组件的实例上。

WX20230113-100156.png