Vue3中的computer和watch

computed的写法

在页面中

<div>{{ calcNumber }}</div>

script中

写法1 常用

import { computed, ref } from 'vue';
let price = ref(100);const priceAdd = () => { //函数方法 price +1price.value ++;
}//计算属性
let calcNumber = computed(() => {return `${price.value}元`//计算属性必须return出去 计算属性相对于函数方法返回 是有缓存的 
})

写法2

let calcNumber2 = computed({ // get(){return `${price.value}元`},set(newValue){ //set方法通过获取到新的值 然后去派发更新 函数的触发等操作let newPrice = `${newValue}-元`showPrice.value = newPrice}
})

computed何时会触发（回调函数）

通过写法2来帮助理解

    /*** get 依赖收集阶段 满足两个条件 1 需要读取计算属性 2. 存在脏数据 （isDirty为true）* 1.读取计算属性的时候且是脏数据（isDirty=true） 会触发上述的()=>{} 也就是回调函数* 2.初始化的时候会触发回调函数 isDirty = true*  读取后的时候，如果依赖的值没有发生变化，不会触发回调函数 此时 isDirty = false *  当计算属性依赖的值发生变化的时候，会重新触发回调函数 isDirty = true* *//*** * set 派发更新阶段 * 先派发更新 然后执行*/

computed 缓存机制 优化

//如果computed所依赖的值没有发生变化，会去检查这个isDirty是否为true 为false则不会触发回调函数 所依赖的值没有发生变化 isDirty = false 触发缓存机制 不在触发回调函数 

Watch

watch监听的数据

1.ref数据
2.reactive数据 —— ref数据能监听的话 reactive一般都可以 ref的对象类型实际是用reactive实现的
3.函数的返回值 （getter函数）
4.包含上述的数组

写法

import { ref, watch } from 'vue';
let dataList = ref({name:"沐浴露",price: 100,id: 1,number:1,
});//定义price
/*** 监听这个price的变化，当price变化的时候执行回调函数* @param {ref} value 需要监听的值* @param {function} callback 需要执行的回调函数 接收两个参数 newVal, oldVal 可以只写一个 newval* @param {object} options 配置项 第三个参数可写可不写 根据实际情况* 如果监听的是reactive对象 默认开启deep: true*/
watch(dataList, (newVal, oldVal) => {console.log(newVal, oldVal);
},{ //当监听的是一个对象时 不能监听到深度的数据 所以需要开启第三个参数的配置immediate: true, //是否立即执行deep: true ,//是否深度监听
}
);

取消监听写法

const stopWatch  = watch(dataList, (newVal, oldVal) => {console.log(newVal, oldVal);newVal.number>2 && stopWatch(); //停止监听
},{ //当监听的是一个对象时 不能监听到深度的数据 所以需要开启第三个参数的配置immediate: true, //是否立即执行deep: true ,//是否深度监听
}
);

第一个参数为函数且返回一个值 & 监听多个值

/*** 第一个参数为函数且返回一个值 */
cosnt stop = watch(()=>dataList.value.number, (newVal, oldVal) => {newVal>2 && stop(); //停止监听
})/*** 监听多个值 采用 watch([()=>xxx , ()=>xxx], (newVal, oldVal) => {})* or* watch([value1,value2,...],(new, old )=>{})*/
cosnt stop = watch([()=>dataList.value.number,()=>dataList.value.price], (newVal, oldVal) => {newVal>2 && stop(); //停止监听
})
watch([num1,val2], (newVal, oldVal) => {console.log(newVal, oldVal);
})

watchEffect的用法 和watch的区别

watchEffect 监听多个值，当监听的值发生变化时，自动执行回调函数

watch 和 watchEffect的区别：

1. watchEffect 不需要手动传入监听的值，它会自动监听回调函数中使用到的值 数据变化时重新执行该函数
   watch 需要手动传入监听的值，数据变化时执行回调函数

2. watchEffect 会立即执行一次 并在依赖的数据变化时再次执行
   watch 不会立即执行 只有数据变化时才会执行

3. watchEffect 默认开启deep immediate

/*** @param {function} callback 回调函数*/
watchEffect(() => {dataList.value.number>2
})