<template>
  <h1>子组件</h1>
  <input type="text" v-model="keyWord">
  <h2>{{keyWord}}</h2>
</template>

<script>
import { customRef } from 'vue'
export default {
  name: 'Demo',
  setup(props, context) {
    // /自定义一个ref :myRef
    function myRef(value){
        let timer
        return customRef((track,trigger)=>{
            return{//return get/set对象
                get(){
                    console.log(`被读取数据${value}`)
                    track()//2再通知vue追踪数据value的变化，才能真正拿到最新的value值
                    return value
                },
                set(newValue){
                    console.log(`被改为${newValue}`)
                    clearTimeout(timer)
                    timer = setTimeout(()=>{
                        value = newValue

                       //1改过之后trigger通知vue去重新解析页面模版，即重新调用get(),此时value已经被修改了
                        trigger()
                    },1000)
                }
            }
        })
    }
    let keyWord = myRef('zzl')
    return {
      keyWord
    }
  },
}
</script>

provide与inject祖后代组件间通信

• 父组件有一个provide选项来提供数据，组件有一个inject选项来开始使用这些数据

祖组件

setup(props, context) {
      let person = reactive({name:'wxl',age:'23'})
      provide('personData',readonly(person))
}

后代组件

setup(props, context) {
      const person = inject('personData')
}

组合式API的优势

• 使用传统的配置式API，新增或者修改一个需求，就需要再data、methods、computed等里面修改,
• 但是组合式API利用hooks函数，可以让相关功能的代码有序的组织在一起。

/hooks/userPoint.js

import { reactive,onMounted,onBeforeUnmount } from "vue";
export default function(){
    //实现鼠标打点的相关数据
    let point = reactive({
        x:0,
        y:0
    })

    //实现鼠标打点的相关方法 
    function savePoint(event){
        point.x=event.pageX
        point.y=event.pageY
    }
    
    //实现鼠标打点的相关生命周期钩子
    onMounted(()=>{
        // window.addEventListener('click',function(){})
        window.addEventListener('click',savePoint)
    })
    onBeforeUnmount(() => {
        window.removeEventListener('click',savePoint)
    })

    //返回数据
    return point
}

App.vue

<template>
  <h1>父组件</h1>
  <h2>x:{{point.x}}----y:{{point.y}}</h2>
</template>

<script>
import userPoint from './hooks/userPoint.js'
export default {
  name: 'App',
  setup() {
    let point = userPoint()
    return {point}
  }
}
</script>

teleport标签

<template>
  <h1>后代组件</h1>
  <teleport to='#tcBox'>
    <div class="box">
      我会被传送给ID为tcBOx下，以便不占用我所处后代层级的大小，当然也可以放在body等下
    </div>
  </teleport>
</template>

异步组件

defineAsyncComponent异步引入

异步引用非路由使用的组件，因为在路由里可以用另一种方法异步加载，但是它们的目的都是为了分包，都是为了加载速度快。

<Suspense>
    <template v-slot:default>
      <child></child>
    </template>
    <template v-slot:fallback>
      <h3>加载中...</h3>
    </template>
  </Suspense>
</template>

<script>
import {defineAsyncComponent} from 'vue'
////异步组件，defineAsyncComponent接收一个peomise，而import返回的就是promise。
const child = defineAsyncComponent(()=>import{'./components/Demo.vue'})

export default {
  components:{child},//此时这个组件都是异步加载的了
  name: 'App',
}

name:'child',
  async setup(props,context) {
    let p = new Promise((resolve,reject)=>{
      //...
    },3000)
    return{
      await p
  }

Suspense

它是一个内置的全局组件，有两个插槽。

• default：如果default可以显示，就显示default的内容
• fallback：如果default无法显示，那么就会显示fallback插槽的内容

<suspense>
    <template #default>
      <p></p>
    </template>
    <template #fallback>
      <p></p>
    </template>
</suspense>