目录
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文章来源:https://www.toymoban.com/news/detail-821001.html
<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>
文章来源地址https://www.toymoban.com/news/detail-821001.html
到了这里,关于Vue3的computed和watch的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!