目录

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 -=200obj.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:trueuser.job.salary += 2000
}
</script><template>
<div>hello,world</div>
<p>{{ user }}</p>
<button @click="changeAge">修改age</button>
</template><style scoped></style>