【Vue学习笔记_04】computed计算属性

配套可执行代码示例 => GitHub

计算属性：对数据进行一些操作后再显示，本质是属性。

基本使用

下面这个例子比较了对数据进行一些操作后再展示的三种方法。直接拼接语法繁琐，通过methods性能较低，因此这个时候使用computed最为合适。

computed与methods的区别：computed有缓存，在多次使用时，只会调用一次；而methods没有缓存，使用几次调用几次，因此性能较低。

<div id="app">
  <!--直接拼接：语法繁琐-->
  <h2>{
  {firstName + ' ' + lastName}}</h2>
  <!--通过methods：性能较低-->
  <h2>{
  {getFullName()}}</h2>
  <!--通过computed-->
  <h2>{
  {fullName}}</h2>
</div>

<script>
  const app = new Vue({
     
    el: '#app',
    data: {
     
      firstName: 'Perry',
      lastName: 'Lee'
    },
    methods