VueJs中的computed函数

# VueJs中的computed函数

# 快速导航

# 前言

在Vue3中引入了一个computed函数,它与Vue2.0的computed配置功能一致

# Vue3.0的计算属性

使用computed时,需要从vue当中引入如下所示

import { computed } from 'vue'
export default {
    setup() {
    // 计算属性一简写
    let fullName = computed(() => {
        return person.firstName+'-'+person.lastName
    })
    // 计算属性一完整
    let fullName = computed({
        get() {
          return person.firstName+'-'+person.lastName
        },
        set(value) {
          const nameArr = value.split('-');
           person.firstName = nameArr[0];
           person.lastName = nameArr[1];
        }
    })
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

computed()接收一个getter函数,返回一个只读的响应式ref对象,该ref通过.value暴露getter函数的返回值,它也可以接收一个

带有get和set函数的对象来创建一个可写的ref对象

如下示例代码所示

const count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,
  set: (val) => {           // 要是需要可写时,需要用到set
    count.value = val - 1
  }
})

plusOne.value = 1
console.log(count.value) // 0