傑森前端

來研究一下vue3.0如何使用computed

首先組合式api的關係先引入

import { reactive, computed } from 'vue'

vue.js部分

簡寫寫法只能唯讀。

完整寫法要有一個，

get讀取，

set設定值。

<script>
import { reactive, computed } from 'vue'
export default {
  name: 'HelloWorld',
  setup() {
    let person = reactive({
      fN: '王',
      lN: '大明'
    })
    // 可以直接在原有物件上添加computed屬性
    // 計算屬性簡寫預設readonly
    // person.fullName = computed(() => {
    //   return person.fN + '-' + person.lN
    // })
    // 完整寫法可讀可改
    person.fullName = computed({
      get() {
        return person.fN + person.lN
      },
      set(value) {
        const nameArr = value.split('')
        console.log(nameArr)
        if (nameArr.length) {
          person.fN = nameArr[0]
          person.lN = nameArr.slice(1).join('')
        }
      }
    }
    )

    return {
      person
    }
  }
}
</script>

模板

<template>
  {{ person.fullName }}
  <input type="text" v-model="person.fullName" />
</template>

總結

感覺和vue2差不多不過可以在原有的物件上面添加屬性值是computed合成出來的，只能說真香。