【composition API】computed

337 阅读1分钟

当模板的数据需要依赖其它的状态,可以通过计算属性来处理。当创建计算值,可以通过computed函数。它接收一个getter函数,并为getter返回一个不可变的响应式ref对象。与vue2.x不同的是,在vue2.x是可以直接通过option api直接定义,而vue3需要手动导入。

<template>
    <div>{{ plusOne }}</div>
</template>
<script>
import { ref, computed } from 'vue'
export default {
    const count = ref(1)
    const plusOne = computed(() => count.value + 1)
    
    return {
        plusOne
    }
}
</script>

computed可以使用一个对象get和set函数来创建一个可写的ref对象。

const count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,
  set: val => {
    count.value = val - 1
  }
})

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