VUE3新增特征

watch侦听属性

 1、侦听一个数据

<script setup>
//watch侦听属性
import {ref,watch} from 'vue'
const count = ref(0)
const setCount=()=>{
  count.value++
}
//调用侦听工具（函数）
watch(count,()=>{
   console.log("侦听count,数据发生变化")
 })
</script>
<template>
   <button @click="setCount">{{ count }}</button>
</template>

<style scoped>

</style>

 2、侦听多个数据

<script setup>
//watch侦听属性
import {ref,watch} from 'vue'
const count = ref(0)
const username = ref('xiaopaopao')
const setCount=()=>{
  count.value++
}
const setUsername=()=>{
  username.value = 'wahaha'
}
//监听多个数据
watch([count,username],([newCount,newUsername],[oldCount,oldUsername])=>{
  console.log("count或username的值发生变化了",[newCount,newUsername],[oldCount,oldUsername])
})
</script>

<template>
    <button @click="setCount">{{ count }}</button>
    <button @click="setUsername">{{ username }}</button>
</template>

<style scoped>

</style>

3、 深度侦听，默认情况属于浅层侦听，只能侦听至第一层，如果希望侦听对象里的属性需要配置深度侦听

<script setup>
import {ref,watch} from 'vue'
//配置深度侦听
const state =ref({count:0})
const setState = ()=>{
  state.value.count++
}
watch(state,()=>{
  console.log("state的count发生变化了")
},{
  deep:true//开启深度侦听
})
</script>

<template>
    <button @click="setState">{{ state.count }}</button>
</template>

<style scoped>

</style>

开启深度侦听，如果对象中包含多个属性，所有属性默认都会被侦听，如果是多个参数，所有参数都会被侦听 

<script setup>
import {ref,watch} from 'vue'
const state =ref(
  {
    count:0,name:'gaga'

  })
const setState = ()=>{
  state.value.count++
}
const setStateName = () =>{//执行setStateName触发一个箭头函数执行里边的
  state.value.name = 'haha'
}
watch(state,()=>{
  console.log("state的count发生变化了")
},{
  deep:true//开启深度侦听，如果对象中包含多个属性，所有属性默认都会被侦听，如果是多个参数，所有参数都会被侦听
})
</script>

<template>
<button @click="setState">{{ state.count }}</button>
   <button @click="setStateName">{{ state.name }}</button>
</template>

<style scoped>

</style>

4、精确侦听，如对象中有多个，希望只侦听某一个属性需要配置精确侦听

<script setup>
import {ref,watch} from 'vue'
const state =ref(
  {
    count:0,name:'gaga'

  })
const setState = ()=>{
  state.value.count++
}
const setStateName = () =>{//执行setStateName触发一个箭头函数执行里边的
  state.value.name = 'haha'
}
//侦听对象中的某一个属性
watch(()=>state.value.count,()=>{
  console.log("侦听了state对象的count属性")
})
</script>

<template>
    <button @click="setState">{{ state.count }}</button>
   <button @click="setStateName">{{ state.name }}</button>
</template>

<style scoped>

</style>

 生命周期函数（钩子函数）

1、组件从创建到销毁的过程称为生命周期，可以利用生命周期函数在创建或销毁过程中进行逻辑操作

2、Setup、onMounted加载时、onUnmounted组件卸载、onBeforeUpdate更新前、onUpdate更新后

3、2.0版本的生命周期函数名，没有on

<script setup>
//生命周期函数
import { onMounted } from 'vue';

onMounted(()=>{
  console.log("调用了onMounted函数1")
})
onMounted(()=>{
  console.log("调用了onMounted函数2")
})
onMounted(()=>{
  console.log("调用了onMounted函数3")
})
</script>
<template>
  
</template>

<style scoped>

</style>

 父子通信：父组件向子组件传递数据或子组件向父组件传递数据

1、 父传子：defineProps

2、子传父：defineEmits

3、暴露属性：defineExpose

获取页面元素

<script setup>
//获得页面元素
import {ref} from 'vue'
const refH1 = ref(null)
onMounted(()=>{
  console.log("refH1.value.innerText")
})
</script>

<template>
<h1 ref="refH1">我是DOM元素中的H1标记</h1>
</template>

<style scoped>

</style>