VUE => 计算属性 computed

最新推荐文章于 2020-12-12 07:13:07 发布

原创最新推荐文章于 2020-12-12 07:13:07 发布 · 137 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

3 篇文章

订阅专栏

本文深入解析Vue中的计算属性，对比复杂表达式与计算属性的优劣，通过实例演示如何使用计算属性简化代码，提高组件的可读性和可维护性。

1、什么是计算属性，有什么用

相信大家在vue的模板内用过表达式，很好用 => eg:

<template>
  <div id="app">
    {{num>=20 ? "大于等于20" : "小于20" }}
  </div>
</template>
<script>
export default {
  name: 'app',
  data(){
    return {
      num: 444,
    }
  }
}
</script>

结果：大于等于20
上面使用了一个很简单的三元表达式，很轻易的做了我们需要的一些判断，BUT 如果你需要的下面的情况呢 => eg:

<template>
  <div id="app">
  	<!--这里写了一堆的东西，各种三元转化类型再字符串骚操作 -->
  	<!--只是为了凸显复杂一点的情况 -->
    {{num>20 && num.toString().length>2 ? num*20 : String(num).split("")}}
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'app',
  components: {
    HelloWorld
  },
  data(){
    return {
      num: 444,
    }
  }
}
</script>

可能你会觉得，我这样写也没问题，我思路清晰，没错，你现在是思路清晰，当你组件的代码标签越来越多，这个页面就会很难维护，这个时候你就需要计算属性出来拯救你了 => eg:

<template>
  <div id="app">
  	<!-- 直接调用计算属性里面的方法 -->
    {{countNum}}
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
  name: "app",
  components: {
    HelloWorld
  },
  data() {
    return {
      num: 444
    };
  },
  computed: {
  	//计算属性
    countNum() {
      //如果大于20且长度大于2，则数值乘以20
      if (this.num > 20 && this.num.toString() > 2) {
        return this.num * 20;
      } else {
        //否则就切割成数组
        return this.num.toString().split("");
      }
    }
  }
};
</script>

这样就会清晰很多了