• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • onServerPrefetch()

    组件实例,在服务器上呈现之前,注册一个要解析的异步函数。

    类型

    function onServerPrefetch(callback: () => Promise<any>): void
    


    细节

    如果回调返回一个Promise,服务器渲染器将等到Promise被解析后再渲染组件。

    此钩子仅在服务器端渲染期间调用,可用于执行仅服务器数据获取。


    例子

    <script setup>
    import { ref, onServerPrefetch, onMounted } from 'vue'
    
    const data = ref(null)
    
    onServerPrefetch(async () => {
      // component is rendered as part of the initial request
      // pre-fetch data on server as it is faster than on the client
      data.value = await fetchOnServer(/* ... */)
    })
    
    onMounted(async () => {
      if (!data.value) {
        // if data is null on mount, it means the component
        // is dynamically rendered on the client. Perform a
        // client-side fetch instead.
        data.value = await fetchOnClient(/* ... */)
      }
    })
    </script>
    

    上篇:onDeactivated()