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值，单一的// 新的值---- 监听// 旧的值---- undefinedwatch(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})