Vue3学习笔记(柒)

86 阅读1分钟

【6月日新计划更文活动】第19天

computed函数

  • 与Vue2中computed配置功能一致
  • 写法
import { reactive, computed } from 'vue'

export default {
 ...
    // 计算属性 —— 简写(不考虑计算属性被修改的情况)
    obj.fullName = computed(() => {
      return obj.firstName + '-' + obj.lastName
    })

    // 计算属性 —— 完整写法(考虑 读和写)
    obj.fullName = computed({
      get() {
        return obj.firstName + '-' + obj.lastName
      },
      set(value) {
        const nameArr = value.split('-')
        obj.firstName = nameArr[0]
        obj.lastName = nameArr[1]
      }
    })
}