Vue3中的computer和watch

computed的写法

在页面中

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

script中

写法1 常用

import { computed, ref } from 'vue';
let price = ref(100);

const priceAdd = () => { //函数方法 price +1
    price.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
})