Vue的计算属性

在上文的学习中，我们知道，在模板中可以直接通过插值语法显示一些data中的数据。但是某些情况下，我们可能需要对数据进行转化后再显示，或者需要将多个数据结合起来进行显示。面对这个需求，Vue提供了计算属性，让我们可以编写代码处理数据后再显示

<div id="app">
    书籍总价值：{{totalPrice}}
</div>
...
<script>
  new Vue({
    el: '#app',
    data: {
     books: [
       {name: 'Vuejs1', price: 99, count: 3},
       {name: 'Vuejs2', price: 89, count: 1},
       {name: 'Vuejs3', price: 19, count: 5},
     ]
    },
    computed: {
      totalPrice() {
        return this.books.reduce((prev, current) => {
          prev += current.price * current.count
          return prev
        }, 0)
      }
    }
  })
</script>

其中，每个计算属性computed都有一个getter和setter，用于获取值和设置值；

...
<div id="app">
    <div>{{lastName}}</div>
    <div>{{firstName}}</div>
    <div>{{fullName}}</div>
</div>
...
<script>
  const vm = new Vue({
    el: '#app',
    data: {
     lastName: 'Li',
     firstName: 'kob'
    },
    computed: {
      fullName: {
        get() {
          return this.firstName + ' ' + this.lastName;
        },
        set(val) {
          console.log('---调用了fullName的set方法---');
          const fullName = val.split(' ');
          this.firstName = fullName[0];
          this.lastName = fullName[1];
        }
      }
    }
  })
</script>

在之前的学习中，我们知道其实可以直接用methods就可以实现我们的需求，那为什么还需要一个计算属性呢？。这时我们就需要了解计算属性的特点，计算属性会进行缓存，如果多次使用，计算属性也只会调用一次。由此，在一些特殊场景就需要计算属性来帮助我们实现这些需求。

Vue的过滤器

除了计算属性外，我们在开发中也常有需要将一些数据格式化或者转化成另一种格式的场景，Vue也提供给开发人员自定义过滤器对这些数据进行处理/格式化的能力。

比如格式化时间：

<body>
  <div id="app">
    <div>{{datetime | formatDate}}</div>
  </div>
</body>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      datetime: 1569219175397
    },
    filters: {
      formatDate(value) {
        date = new Date(value)
        return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
      }
    }
  })
</script>

如果某个过滤器希望可以全局都可以引用，就可以新建一个filters.js文件，在该文件中：

import Vue from 'vue'
Vue.filter('formatDate', function (value) {
    date = new Date(value)
    return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
});

使用前需要全局引用，在main.js中：

...
import './xxx/filters'
...

之后，就可以在任一Vue文件中如同本文件过滤器一样使用：<div>{{datetime | formatDate}}</div>。

学习Vue基础（3）

Vue的计算属性

Vue的过滤器