『VUE』12. computed计算属性的使用提高性能（详细图文注释）

news2025/1/20 10:46:08

方法作为类似数据变量的写法

注意到了,方法没有return也可以以类似前面的数据变量的写法在模板中使用.

ComputedDemo.vue

<template>
  <h3>计算属性</h3>
  <p>message[1]{{ message[1] }}</p>
  <p>{{ message[1] + 1 > 19145120 ? "yes" : "no" }}</p>
  <p>
    我是没有return的方法的内容-{{
      getResult_methods_NO_return()
    }}-我是没有return的方法的内容
  </p>
  <p>
    我是有return的方法的内容-{{ getResult_methods() }}-我是有return的方法的内容
  </p>
</template>

<script>
export default {
  data() {
    return {
      message: ["mzh", "19145120", "wg191"],
      methods_count: "A",
      computed_count: "B",
    };
  },

  methods: {
    getResult_methods_NO_return() {
      console.log("methods_count", this.methods_count);
    },
    getResult_methods() {
      console.log("methods_count", this.methods_count);
      return this.methods_count;
    },
  },
};
</script>

在这里插入图片描述

处理数据返回的方法,优化性能

请注意,前面的方法写法每一次渲染都是会重新执行方法进行一次计算的.大大增加了开销.
如果使用computed,则会缓存计算结果,只执行一次.除非有了变动.

在 Vue 中，计算属性（computed）会在满足以下情况时再次执行：

依赖的响应式数据发生变化：当计算属性所依赖的响应式数据发生变化时，计算属性会重新计算。Vue 会追踪计算属性所依赖的数据，并在这些数据发生变化时自动触发计算属性的重新计算。
计算属性被访问时：当计算属性被访问时，Vue 会检查计算属性所依赖的响应式数据是否发生变化，如果有变化，则计算属性会重新计算。这确保了计算属性的值是响应式的，并且会在需要时更新。
总的来说，计算属性会在它所依赖的数据发生变化、或者在模板中使用计算属性时被访问时重新执行。Vue 内部会智能地处理这些依赖关系，确保计算属性的值能够及时更新并保持响应式。

使用computed例子

注意到了使用了三个getResult_methods() 和三个 getResult_computed 结果在控制台中出现了三个a,一个b说明前者三次执行,后者一次执行.请注意computed必须带return!

<template>
  <h3>计算属性</h3>

  <div>测试多组性能~</div>
  <p>{{ getResult_methods() }}</p>
  <p>{{ getResult_methods() }}</p>
  <p>{{ getResult_methods() }}</p>
  <p>{{ getResult_computed }}</p>
  <p>{{ getResult_computed }}</p>
  <p>{{ getResult_computed }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ["mzh", "19145120", "wg191"],
      methods_count: "A",
      computed_count: "B",
    };
  },

  methods: {
    getResult_methods_NO_return() {
      console.log("methods_count", this.methods_count);
    },
    getResult_methods() {
      console.log("methods_count", this.methods_count);
      return this.methods_count;
    },
  },
  computed: {
    getResult_computed() {
      console.log("computed_count", this.computed_count);
      return this.computed_count;
    },
  },
};
</script>