vue3.0 computed
计算属性:返回一个 ref 对象。使用:import { computed } from 'vue'setup(){const x=computed(()=>{return xx})(1)调用(调用返回的ref对象,注意自动解套的情况):xx.value(2)默认为不可修改的getter函数,传入包含get和set的对象,变成可修改const xx=computed({get: () =&
·
1、计算属性:
返回一个 ref 对象。
2、使用:
import { computed } from 'vue'
setup(){
const x=computed(()=>{
return xx
})
(1)调用(调用返回的ref对象,注意自动解套的情况):
x.value
(2)默认为不可修改的getter函数,传入包含get和set的对象,变成可修改
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
}
3、添加追踪器:(仅在开发模式下生效)
const plusOne = computed(() => count.value + 1, {
onTrack(e) { 当 count.value 作为依赖被追踪时触发
...
debugger 推荐在这些回调内放置一个debugger语句以调试依赖
},
onTrigger(e) { 当 count.value 被修改时触发
...
debugger
}
})
console.log(plusOne.value) 访问plusOne,应该触发onTrack
count.value++ 修改count.value,应该触发onTrigger
类型声明:
function computed<T>(getter: () => T): Readonly<Ref<Readonly<T>>>
function computed<T>(options: { get: () => T; set: (value: T) => void }): Ref<T>
更多推荐
已为社区贡献20条内容
所有评论(0)