setup语法糖

在vue3.0中，setup函数中的变量必须return出来才能给template使用，3.2中使用setup语法糖无需return变量就可以在template中使用了，而且引入的组件可以直接使用，无需再通过components进行注册。setup 语法糖中可直接使用 await，不需要写 async ， setup 会自动变成 async setup

父子组件传值props，子组件给父组件传值emit

父组件

<script setup>
  import HelloWorld from "./components/HelloWorld.vue"
  import {ref} from "vue"
  const msg=ref("父组件传值")
  let message=ref("")
  const go=(val)=>{
    message.value=val
  }
</script>

<template>
 <HelloWorld :msg="msg" @event="go"></HelloWorld>
  {{message}}

</template>

子组件

<script setup>
    import {ref} from "vue"
    const msg=ref("父组件传值")
    const emit=defineEmits(["event"])
    const btn=()=>{
        emit("event","子组件的值")
    }
</script>

<template>
    <h>{{msg}}</h><br>
    <h>我是子组件</h><br>
    <button @click="btn">子组件传值</button>
</template>

provide 和 inject 祖孙传值

父组件

<script setup>
  import HelloWorld from "./components/HelloWorld.vue"
  import {ref} from "vue"
  import {provide} from "vue"
  const name=ref("张飞")
  provide("provideData",{
    name
  })
</script>

<template>
 <HelloWorld ></HelloWorld>
</template>

子组件

<script setup>
    import {inject} from "vue"
  const provideData=inject("provideData")

</script>

<template>
    <h>{{provideData.name}}</h><br>
</template>

toRefs的使用

只能搭配Reactive,不能搭配Ref

<script setup>
  import HelloWorld from "./components/HelloWorld.vue"
  import {ref,reactive,toRefs} from "vue"
  const state=reactive({
    username:"root"
  })
  const {username}=toRefs(state)
  const change=()=>{
   username.value=""
  }
</script>

<template>
 {{username}}<br>
  <button @click="change">改变</button>
</template>

Watch函数（这个函数代码为了省事引用某博文）

  watch(
            ()=>message.value,
            (val,preVal)=>{
                //val为修改后的值,preVal为修改前的值
                console.log("message",val,preVal)
            },
            {
                //如果加了这个参数，值为true的话，就消除了惰性，watch会在创建后立即执行一次
                //那么首次执行，val为默认值,preVal为undefined
                immediate:true,
                //这个参数代表监听对象时，可以监听深度嵌套的对象属性
                //比如message是一个对象的话，可以监听到message.a.b.c，也就是message下的所有属性
                deep:true,
            }
        )

   watch(
            ()=>[message.value,count.value],
            ([messageVal,messagePreVal],[countVal,countPreVal])=>{
                //监听多个源用数组传入
                console.log("messageVal,messagePreVal",messageVal,messagePreVal)
                console.log("countVal,countPreVal",countVal,countPreVal)
            },
        )