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

62 阅读3分钟

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

说点题外话

上几篇用了好几篇介绍了

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

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

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

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

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

说正文

image.png

一、过滤器

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>

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

image.png

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

image.png

我们发现,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

image.png

说再见

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

难忘今宵

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