Vue3的computed和watch

目录

1、computed

2、computed完整写法

 3、watch

4、watch监听对象具体属性

5、watch 监听reactive数据

---

1、computed

基于现有的数据计算出新的数据

<script setup >

import {ref,computed} from 'vue'
const num=ref(1)
const doubleNum=computed(()=>{
    return num.value*2
})
const goods=ref([
    {
    id:1001,
    price:5000,
    name:'小米手机'
},
{
    id:1002,
    price:4000,
    name:'华为手机'
},
{
    id:1003,
    price:6000,
    name:'三星手机'
}
])
//筛选出价格大于等于5000的商品
const filterGoods=computed(()=>{
    return goods.value.filter(item=>item.price>=5000)
})
</script>

<template>
<div>hello,world</div>
<p>{{ num }}- {{ doubleNum }}</p>
<p>{{ filterGoods }}</p>
</template>

<style scoped>

</style>

2、computed完整写法

<script setup >

import {ref,computed} from 'vue'
const firstName=ref('')
const lastName=ref('')
//简写  只提供get
// const fulName=computed(()=>{
//     return firstName.value+lastName.value
// })
//完整写法

const fulName=computed({
    //get:function(){} 与 get() {} 等价
    //get:()=>{}  箭头函数不可简写
    get(){
        return firstName.value+lastName.value
    },
    set(newV){
        firstName.value=newV.substring(0,1)
        lastName.value=newV.substring(1)
    }
})
</script>

<template>
<div>hello,world</div>
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
<input type="text" v-model="fulName">
</template>

<style scoped>

</style>

 3、watch

1 . 侦听一个数据

第一个参数：监听的数据 第二个回调函数

2.侦听多个数据

第一个参数监听的数据构成的数组 ​ 第二个参数回调函数

3.立刻调用 (第三个参数位一个对象，里面可放immediate:true)

4.深度监听 (第三个参数位一个对象，里面可放 deep:true)

<script setup >

import {ref,watch} from 'vue'
const num=ref(1)
// const age=ref(10)
const obj=ref({
    id:1,
    name:'电视',
    price:3000
})
// 1  侦听一个数据
//第一个参数：监听的数据    第二个回调函数

watch(num,(newV,oldV)=>{
    console.log(newV,oldV)
})
//2  侦听多个数据
//第一个参数监听的数据构成的数组
//第二个参数回调函数
// watch([num,age],([newNum, newAge],[oldNum, oldAge])=>{
//   console.log(newNum, newAge);
// })

// watch([num,age],([newNum,newAge],[oldNum,oldAge])=>{
//     console.log(newNum,newAge)
// })
 
 //3  立刻调用   immediate
//  watch(num,(newV,oldV)=>{
//     console.log('立刻调用')
//     console.log(newV,oldV)
//  },{
//     immediate:true
//  })

//4  深度监听
watch(obj,(newV,oldV)=>{
    console.log(newV,oldV)
},{
    deep:true
})
const changeObj=()=>{
    obj.value.price -=200
}


</script>

<template>
<div>hello,world</div>
<p>{{ num }}</p>
<p>{{ obj }}</p>
 <button @click="changeObj">修改obj</button>
</template>

<style scoped>

</style>

4、watch监听对象具体属性

<script setup >

import {ref,watch} from 'vue'
const obj=ref({
    id:1,
    name:'电视',
    price:3000
})
//深度监听
// 第一个参数 可以是函数，函数的返回值就是被侦听的数据

//分开监听数据的变化
//只有价格改变才监听
// watch(()=>obj.value.price,(newV,oldV)=>{
//     console.log(newV,oldV)
// },{
//     deep:true
// })

// watch(()=>obj.value.name,(newV,oldV)=>{
//     console.log(newV,oldV)
// },{
//     deep:true
// })

//监听数据变化写在一起
watch([()=>obj.value.price,()=>obj.value.name,()=>obj.value.id],(newV,oldV)=>{
    console.log(newV[0],oldV)
},{
    deep:true
})
const changeObj=()=>{
    // obj.value.price -=200
    obj.value.name='手机'
    // obj.value.id=200
}
</script>

<template>
<div>hello,world</div>
<button @click="changeObj">修改obj</button>
</template>

<style scoped>

</style>

5、watch 监听reactive数据

watch监控reactive数据，假如需要深层次监控属性需要手动开启deep:true或省略

watch监控ref数据，深层次监控属性 ，必须手动开启deep:true，不能省略，省略相当于默认 false

<script setup >

import {reactive,watch} from 'vue'
const user=reactive({
    name:'admin',
    age:18,
    job:{
        jobName:'web前端工程师',
        salary:6000
    }
})
//侦听的是reactive数据，默认对第一层属性开启deep:true,此时无论有没有传入deep选项
//侦听的是ref引用数据，默认deep：false，监控的对象属性发生改变不会被监控到

watch(user,(newV,oldV)=>{
    console.log(newV)
},{
    deep:true //关闭深度监控无效
})

const changeAge=()=>{
    user.age++
    //假如需要侦听深层次数据，需要手动开启deep:true
    user.job.salary += 2000
}
</script>

<template>
<div>hello,world</div>
<p>{{ user }}</p>
<button @click="changeAge">修改age</button>
</template>

<style scoped>

</style>