vue3 computed watch 拓展reduce函数

computed 

computed 计算属性计算属性 就是当依赖的属性的值发生变化的时候，才会触发他的更改，如果依赖的值，不发生变化的时候，使用的是缓存中的属性值。

	import {
		reactive,
		ref,
		computed
	} from "vue"


	//price 改变，m同步变化 
	const returnData = reactive({
		price: 66,
	})

	//加工数据
	//函数形式
	const totalPrice = computed(() => {
		return `￥` + (returnData.price * 1).toFixed(2)
	})
	
	

    //对象形式
	let NewTotalPrice = computed({
		get: () => {
			return returnData.price
		},
		set: (value) => {
			returnData.price = '￥' + value
		}
	})

reduce 知识拓展文章

简单用法

var  arr = [1, 2, 3, 4];
var sum = arr.reduce((x,y)=>x+y)
var mul = arr.reduce((x,y)=>x*y)
console.log( sum ); //求和，10
console.log( mul ); //求乘积，24

参考文章：

reduce()方法详解-CSDN博客

watch侦听器

watch 需要侦听特定的数据源，并在单独的回调函数中执行副作用

watch第一个参数监听源

watch第二个参数回调函数cb（newVal,oldVal）

watch第三个参数一个options配置项是一个对象{

immediate:true //是否立即调用一次

deep:true //是否开启深度监听

}

	//侦听器,监听ref值，单一的
	// 新的值---- 监听
	// 旧的值---- undefined
	watch(watchData, (newVal, oldVal) => {
		console.log('新的值----', newVal);
		console.log('旧的值----', oldVal);
	}, {
		immediate: true,
		deep: true
	})

	function watchdatachange() {
		watchData.value = "监听变化"
	}


	//侦听器,监听ref值，监听多个单一数据
	//打印的值
	// 新的值---- (2) ['监听变化', '监听第二个数据']
	//  旧的值---- (2) ['监听', '监听第二个数据']
	watch([watchData, watchDatatwo], (newVal, oldVal) => {
		console.log('新的值----', newVal);
		console.log('旧的值----', oldVal);

	}, {
		immediate: true,
		deep: true
	})



    //使用reactive监听深层对象开启和不开启deep 效果一样
	//监听 reactive 的值跟 ref 不一样  ,侦听多值
	watch(returnData, (newVal, oldVal) => {
		console.log('新的值----', newVal);
		console.log('旧的值----', oldVal);
	}, {
		immediate: true
	})


	//监听 reactive 的值跟 ref 不一样  ,侦听单一值
	watch(() => returnData.watchData, (newVal, oldVal) => {
		console.log('新的值----', newVal);
		console.log('旧的值----', oldVal);
	}, {
		immediate: true
	})