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.