vue3中的computed与watch

1.computed

        1)接受一个getter函数，根据getter的返回值返回一个不可变的响应式ref对象

                

const count = ref(1);
const dep_count = computed(() => {
    return count.value + 1;
})

        2)接受一个包含get和set函数的对象，用来创建一个可写的ref对象

const count = ref(1);

const dep_count = computed({
    get: () => count.value + 1,
    set: () => val => {
        count.value = val * 10
    }
})

dep_count.value = 5

console.log(count.value) //50

2.watch

        

let count = ref(1);
let message = ref('你好');
let worker = reactive({
    name: '小二',
    salary: '10K',
    job: {
           job1 : {
              positon: '普通职员'
           } 
         }
 })

1)监听ref创建的单个响应式数据

watch(count, (newValue, oldValue) => {
      console.log('count变化了', newValue, oldValue);
});

2)监听ref创建的多个响应式数据,newValue和oldValue也是Array

watch([count, message], (newValue, oldValue) => {
    console.log('count或message变化了', newValue, oldValue)
},{immediate: true, deep: true})

3)监听reactive创建的响应式数据的全部属性

        注意：1.无法正确获取到oldValue 2.强制开启深度监听

watch(worker, (newValue, oldValue) => {
    console.log('worker变化了', newValue, oldValue)
})

4）监听reactive创建的响应式数据的单个属性

watch(
   () => worker.name,
   (newValue, oldValue) => {
       console.log('worker中的name属性发生变化了', newValue, oldValue)
    }
)

特殊情况

watch(worker.job, (newValue, oldValue) => {
   console.log('worker中的job属性发生变化了', newValue, oldValue)
},{deep: true})

5）监听reactive创建的响应式数据的多个属性

watch(
    [
       () => worker.name,
       () => worker.salary,
    ],
    (newValue, oldValue) => {
       console.log('worker中的name或者salary属性发生变化了', newValue, oldValue)
    }
)