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>
Logo

前往低代码交流专区

更多推荐