vue3基础

watch

监听一个值：

import {ref, watch} from "vue";
const count = ref(0)
watch(count,(newValue,oldValue)=>{
  console.log(newValue,oldValue)
},{
  immediate:true,
  deep:true
})

监听一个对象,如果修改一个对象的属性触发watch，需要添加deep

监听多个值: 任意一个值变化都会执行

import {ref, watch} from "vue";
const count = ref(0)
const name = ref("cc")

watch([count,name],([newCount,newName],[oldCount,oldName])=>{
  console.log(newCount,newName,oldCount,oldName)
})

精确监听对象的某个属性，，deep为true会监听对象所有属性，，有些时候只需要监听其中一个属性的变化：

import {ref, watch} from "vue";
const info = ref({name:"cc",age:20})

watch(()=>info.value.age,(newValue,oldValue)=>{
  console.log(newValue,oldValue)
})

deep属性一旦开启，就会执行递归遍历，有一定的性能损耗，绝大多数情况下，不开启deep，使用精确侦听

生命周期函数

连续多次调用钩子函数： 会依次执行

import {onBeforeMount, onMounted} from "vue";

 onMounted(()=>{
   console.log("mounted")
 })
onMounted(()=>{
  console.log("mounted222")
})

父子通信

父传子： defineProps()
子传父：defineEmits()

<script setup>
// 编译器宏函数
const props = defineProps({
  message:String,
  hehe:String
})

console.log(props)

// var emit = defineEmits(["get-message"])
var emit = defineEmits(["get-message"])
const getMessage = ()=>{
  emit("get-message","cc")
}
</script>

<template>
<div>son  --{{message}}</div>
  <div> {{ props.hehe}}</div>
  <button @click="getMessage">btn</button>
</template>

获取dom实例

ref引用组件实例，，因为默认情况下在setup里面，组件内部的属性和方法是不开放给父组件的，如果需要开放，需要在自组件中使用defineExpose()暴露出属性

const test = "123232"
defineExpose({
  test:test
})

跨层组件通信

provide提供变量和方法
inject 接收变量和方法：
底层组件可以修改顶层组件，， 使用顶层组件传递下来的函数

<script setup>
import father from "./components/father.vue"
import {provide, ref} from "vue";

const count = ref(0)
provide("key",count)

const add = ()=>{
  count.value++
}

provide("add",add)
</script>

<template>

<father></father>


</template>

<script setup>


import {inject} from "vue";

const message = inject("key")
const add =inject("add")
</script>

<template>
son -- {{message}}
  <button @click="add">add</button>
</template>