vue3知识点（四）---组合api

一、ref

定义响应式变量，一般是直接类型，创建一个引用类型，一个key为value的对象

<template>
  <p>{{msg}}</p>
</template>
setup(props){
   const msg = ref('hello world')
   console.log(msg.value) //获取属性
   return {msg}
}

二、toRef

三、toRefs

把响应式对象结构成单个响应式变量

<template>
<p>{{count}}</p>
</template>
 const countData = reactive({   // 1、reactive定义响应式对象
        count:1,
        doubleCount:computed(()=>countData.count*2)  // computed 定义计算属性
    })
 return toRefs(countData)

四、reactive

用在引用类型变量,使用toRefs解构，在模板中调用，直接使用变量名称；也可以

解构调用：
<template>
{{tableOption.title}}
</template>
setup(){
  const state = reactive({
      tableOption:{
        title:'我的表头'
       }
  })  
 return {...toRefs(state)} 
}
 
不解构调用：
<template>
{{state .tableOption.title}}
</template>
setup(){
  const state = reactive({
      tableOption:{
          title:'我的表头'
       }
  })  
 return {state} 
}

五、computed

setup(){
const countData = reactive({ 
        count:1,
        doubleCount:computed(()=>countData.count*2)  
    })
}

六、watch

监听ref属性：
watch(count,(newVal,oldVal)=>{
    console.log(newVal）
 })

监听reactive属性
const countData = reactive({   
        count:1,
        doubleCount:computed(()=>countData.count*2)  
    })
    let timer 
    onMounted(()=>{
        timer =  setInterval(()=>{
            countData.count ++
        },1000)
    })
    watch(()=>countData.count,(newVal,oldVal)=>{
        // console.log(`reactive 监听 from ${oldVal} to ${newVal}`)
    })

监听props:

 props:{
    age:{
        type:String
     }
},
setup(props){
        const {age} = toRefs(props)
       console.log(age.value)
        watch(age,(newVal,oldVal)=>{
            console.log(newVal)
        })
}

七、props