VUE3新特征(watch函数、生命周期函数、父子通信)

  2.4、watch函数

        ④、watch侦听属性

<script>
import { ref,watch } from 'vue';
const count = ref(0)
const username =ref('xiaopaopao')
const setCount=()=>{
   count.value++
 }
 const setUsername=()=>{
   username.value='wahaha'
 }

//调用侦听工具（函数）
watch(count,()=>{
  console.log("侦听count，数据发生变化")
})

</script>

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

        1）侦听一个数据

        2）侦听多个数据

//监听多个数据
<script>
import { ref,watch } from 'vue';
const count = ref(0)
const username =ref('小泡泡')
const setCount=()=>{
  count.value++
}
const setUsername=()=>{
  username.value='哇哈哈'
}
调用侦听工具（函数）
watch(count,()=>{
  console.log("侦听count，数据发生变化")
})
//监听多个数据
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>

        3）深度侦听

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

<script>
//配置深度侦听
const state =ref({
  count:0,
  id:0,
  name:'gaga'
})

const setState = ()=>{
  state.value.count++
}

const setStateName = ()=>{
  state.value.name='haha'
}

watch(state,()=>{
  console.log("state的count发生变化了")
},{
  deep:true//开启深度侦听，如果对象中包含多个属性，所有属性默认都会被侦听，如果是多个参数，所有参数都会被侦听
})
</script>

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

        4）精确侦听

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

<script>
const state =ref({
  count:0,
  id:0,
  name:'gaga'
})

const setState = ()=>{
  state.value.count++
}

const setStateName = ()=>{
  state.value.name='haha'
}
watch(()=>state.value.count,()=>{
  console.log("侦听了 对象的count属性")
})
</script>
<template>
  <button @click="setState">{{state.count}}</button>
  <button @click="setStateName">{{state.name}}</button>
</template>

2.5、生命周期函数

⑤、生命周期函数

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

        2）setup、onMounted加载时、onUnmounted组件卸载、onBeforeUpdate更新前、onUpdate

        3）2.0版本的生命周期函数名，少on

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

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

2.6、父子通信

⑥、父子通信

1）父传子

父组件代码

<script>
//父子数据传递-父传子
import SonCom from './SonComponent.vue' //导入子组件

import { ref } from 'vue';
const count = ref(100)

//定时函数，在设定时间后执行，时间单位毫秒
//参数一：执行过程，参数二：设定时(时间毫秒)
setTimeout(()=>{count.value+=200},2000)

</script>

子组件代码

<script setup>
//子组件接受父组件传递过来的数据
const prop =defineProps({
    message:String,
    count:Number
    
})
console.log(prop)
// defineProps({
//     message:String
// })
</script>
<template>
    <h1>子组件</h1>
    父组件传入的数据:{{ message }}<br>
    响应数据{{ count }}
</template>

2）子传父

子组件代码

<script>
//子组件向父组件中传递数据
 const emit = defineEmits(['get-son-message']) //声明向父组件传递数据
 const sendMsg = ()=>{
     emit('get-son-message','子组件中的数据') //向emit中存入数据，key值是创建emit时设置好的
 }
</script>
<template>


 <button @click="sendMsg">向父组件中传递数据</button> 

</template>

父组件代码

<script>
    // //父子数据传递-父传子
import SonCom from './SonComponent.vue' //导入子组件

import { ref } from 'vue';
 const count = ref(100)

//定时函数，在设定时间后执行，时间单位毫秒
//参数一：执行过程，参数二：设定时(时间毫秒)
 setTimeout(()=>{count.value+=200},2000)

 const getSonMessage =(msg)=>{
  console.log(msg)
 }
</script>
<template>

<SonCom @get-son-message ="getSonMessage"> </SonCom>
</template>

3）获取页面元素

        暴露数据

父组件

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

</script>

<template>
         <h1 ref="refH1">我是dom元素中的H1标记</h1>
     <SonCom ref="refSoncom">向父组件中传递数据</SonCom>
</template>

子组件

<script>
//暴露属性
import { ref } from 'vue';
const name =ref('test vue')
defineExpose({
    name
})
</script>