接受一个 getter 函数并为 getter 的返回值返回一个只读的反应式 ref 对象。它还可以使用带有get
和set
函数的对象来创建可写的引用对象。
类型
// read-only
function computed<T>(
getter: () => T,
// see "Computed Debugging" link below
debuggerOptions?: DebuggerOptions
): Readonly<Ref<Readonly<T>>>
// writable
function computed<T>(
options: {
get: () => T
set: (value: T) => void
},
debuggerOptions?: DebuggerOptions
): Ref<T>
示例
创建一个只读的计算参考:
const count = ref(1)
const plusOne = computed(() => count.value + 1)
console.log(plusOne.value) // 2
plusOne.value++ // error
创建一个可写的计算参考:
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
调试:
const plusOne = computed(() => count.value + 1, {
onTrack(e) {
debugger
},
onTrigger(e) {
debugger
}
})
相关用法
- Vue.js computed用法及代码示例
- Vue.js components用法及代码示例
- Vue.js customRef()用法及代码示例
- Vue.js createRenderer()用法及代码示例
- Vue.js createApp()用法及代码示例
- Vue.js cloneVNode()用法及代码示例
- Vue.js useSSRContext()用法及代码示例
- Vue.js app.directive()用法及代码示例
- Vue.js mergeProps()用法及代码示例
- Vue.js app.config.warnHandler用法及代码示例
- Vue.js pipeToWebWritable()用法及代码示例
- Vue.js app.use()用法及代码示例
- Vue.js v-pre用法及代码示例
- Vue.js h()用法及代码示例
- Vue.js serverPrefetch用法及代码示例
- Vue.js <Transition>用法及代码示例
- Vue.js inject()用法及代码示例
- Vue.js mixins用法及代码示例
- Vue.js ComponentCustomProps用法及代码示例
- Vue.js reactive()用法及代码示例
- Vue.js ComponentCustomProperties用法及代码示例
- Vue.js app.mount()用法及代码示例
- Vue.js <component>用法及代码示例
- Vue.js onMounted()用法及代码示例
- Vue.js app.config.errorHandler用法及代码示例
注:本文由纯净天空筛选整理自vuejs.org大神的英文原创作品 computed()。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。