开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 10 天，点击查看活动详情

说点题外话

上几篇用了好几篇介绍了

选项式中侦听器watch的用法：和Vue3和解的Day6--侦听器watch

组合式新增的侦听器watchEffect：和Vue3和解的Day8--侦听器watchEffect在组合式中

组合式中使用侦听器watch：和Vue3和解的Day9--侦听器watch在组合式中

需要复习的或者学习的可以查看以上链接

这一篇说说过滤器和计算属性computed

说正文

一、过滤器

vue2中才存在过滤器，在vue3中官方废除了过滤器

1.1 概念和基本使用

过滤器是vue中的一个特性，作用是用于对文本进行格式化的作用。分为全局过滤器和私有过滤器(本地过滤器)2种。

我们也可以简单的理解过滤器是一个加工厂，把数据加工一下展示

过滤器有两种使用地方：mustache插值和v-bind表达式

这里我将过滤器设置为price变量过滤为2倍

1.1.1 全局过滤器

// mustache插值
{{ price | filterPrice }}

// v-bind表达式
<div v-bind="price | filterPrice"></div>

一般在main.js中

Vue.filter("priceFilter", value => {
    return value * 2
})

1.1.2 私有过滤器

// mustache插值
{{ price | filterPrice }}

// v-bind表达式
<div v-bind="price | filterPrice"></div>


data() {...},
filters: {
  filterPrice(val) {
    return val * 2
  }
}

关于vue2中过滤器的基本使用就这些，因为是vue3的学习记录，不再多叙述vue2的知识点

二、计算属性

因为在vue3中取消了过滤器，官方建议使用计算属性实现过滤器。

2.1 基本计数器过滤

先看一个基本使用案例，还是一个计数器

<template>
  <div>
    <h2>{{ price }}</h2>
    <h2>{{ filterPrice }}</h2>
    <button @click="addPrice">+1</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const price = ref(100)
    const filterPrice = price.value * 2

    const addPrice = () => {
      price.value++
      console.log(filterPrice);
    }

    return {
      price,
      filterPrice,
      addPrice
    }
  }
}
</script>

这是一个基本的计数器，此时页面的展示结果如下

当我们点击按钮触发price进行计数的时候，会发生什么呢？会如我们所愿filterPrice一起跟着改变吗？点击button之后结果如下

我们发现，price的值在变化，但是触发addPrice之后filterPrice的数值并没有发生变化，说明我们现在获取的filterPrice不是我们想要的响应式的数据，我们在vue3中可以借用computed实现数据响应式，因为computed的返回值是ref对象

2.2 计算属性computed

computed返回值是ref对象，computed在组合式中有两种写法：传入getter函数和传入一个对象

先回忆一下computed在vue2选项式中的两种写法

computed: {
    // 函数形式
    filterPrice(){ 
      return this.price * 2
    },
    
    // 对象形式
    filterPrice: {
      get:function(){
        return this.price * 2
      },
      set: function(newValue){
        console.log(newValue)
      }
    }
  },

2.2.1 传入一个getter函数

const filterPrice = computed(() => price.value * 2)

和侦听器watch的写法很类似，直接接收一个getter函数，在里面写数据代码即可

2.2.2 传入一个对象

第二种写法就是直接传入一个对象，对象里面包含getter和setter

const filterPrice = computed({
  get: function() {
    return price.value * 2
  },
  set: newValue => {
    console.log(newValue)
  }
})

getter和setter函数是匿名函数或者箭头函数都可以

这里再补充一个很重要的知识点，我们可以看见在vue2选项式中我们使用price诏告非变量的时候是this.price，但是在vue3的组合式中我们是price.value省略了this，这是因为在setup函数中没有this实例，所以无法调用this

说再见

这一篇详细的说了我们日常开发中最常用的计算属性computed，那么基础部分算是打通了，下一篇就学习上难度的知识点了组件通信

难忘今宵

千万不要和风打架，就算你武功高，风没伤到你，你伤风了，也会感冒。

和Vue3和解的Day10--vue的过滤器和计算属性computed