创新互联VUE3教程：Vue3.0组合式API

本节例子中代码使用的单文件组件语法

专注于为中小企业提供网站建设、成都网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业南芬免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上千余家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

#setup

一个组件选项，在创建组件之前执行，一旦 props 被解析，并作为组合式 API 的入口点

• 入参：
  • {Data} props
  • {SetupContext} context
• 类型声明：

interface Data {
  [key: string]: unknown
}


interface SetupContext {
  attrs: Data
  slots: Slots
  emit: (event: string, ...args: unknown[]) => void
}


function setup(props: Data, context: SetupContext): Data

TIP

若要获取传递给 setup() 的参数的类型推断，请使用 defineComponent 是需要的。

• 示例：

使用模板：

使用渲染函数：

  // MyBook.vue

  
  import { h, ref, reactive } from 'vue'

  
  export default {
    setup() {
      const readersNumber = ref(0)
      const book = reactive({ title: 'Vue 3 Guide' })
      // 请注意，我们需要在这里显式地暴露ref值
      return () => h('div', [readersNumber.value, book.title])
    }
  }

• 参考：组合式 API setup

#生命周期钩子

可以使用直接导入的 onX 函数注册生命周期钩子：

import { onMounted, onUpdated, onUnmounted } from 'vue'


const MyComponent = {
  setup() {
    onMounted(() => {
      console.log('mounted!')
    })
    onUpdated(() => {
      console.log('updated!')
    })
    onUnmounted(() => {
      console.log('unmounted!')
    })
  }
}

这些生命周期钩子注册函数只能在 setup() 期间同步使用，因为它们依赖于内部全局状态来定位当前活动实例 (此时正在调用其 setup() 的组件实例)。在没有当前活动实例的情况下调用它们将导致错误。

组件实例上下文也是在生命周期钩子的同步执行期间设置的，因此在生命周期钩子内同步创建的侦听器和计算属性也会在组件卸载时自动删除。

选项 API 生命周期选项和组合式 API 之间的映射

• beforeCreate -> use setup()
• created -> use setup()
• beforeMount -> onBeforeMount
• mounted -> onMounted
• beforeUpdate -> onBeforeUpdate
• updated -> onUpdated
• beforeUnmount -> onBeforeUnmount
• unmounted -> onUnmounted
• errorCaptured -> onErrorCaptured
• renderTracked -> onRenderTracked
• renderTriggered -> onRenderTriggered
• 参考：组合式 API 生命周期钩子

#Provide / Inject

provide 和 inject 启用依赖注入。只有在使用当前活动实例的 setup() 期间才能调用这两者。

• 类型声明：

interface InjectionKey extends Symbol {}


function provide(key: InjectionKey | string, value: T): void


// without default value
function inject(key: InjectionKey | string): T | undefined
// with default value
function inject(key: InjectionKey | string, defaultValue: T): T

Vue 提供了一个 InjectionKey 接口，该接口是扩展 Symbol 的泛型类型。它可用于在提供者和消费者之间同步注入值的类型：

import { InjectionKey, provide, inject } from 'vue'


const key: InjectionKey = Symbol()


provide(key, 'foo') // 提供非字符串值将导致错误


const foo = inject(key) // foo 的类型: string | undefined

如果使用字符串 key 或非类型化 symbols，则需要显式声明注入值的类型：

const foo = inject('foo') // string | undefined

• 参考

：

• Provide / Inject
• 组合式 API Provide / Inject

#getCurrentInstance

getCurrentInstance 允许访问对高级使用或库创建者有用的内部组件实例。

import { getCurrentInstance } from 'vue'


const MyComponent = {
  setup() {
    const internalInstance = getCurrentInstance()


    internalInstance.appContext.config.globalProperties // access to globalProperties
  }
}

getCurrentInstance 仅在安装或生命周期挂钩期间有效。

在安装程序或生命周期挂钩之外使用时，请在setup上调用getCurrentInstance()，并改用该实例。

const MyComponent = {
  setup() {
    const internalInstance = getCurrentInstance() // works


    const id = useComponentId() // works


    const handleClick = () => {
      getCurrentInstance() // doesn't work
      useComponentId() // doesn't work


      internalInstance // works
    }


    onMounted(() => {
      getCurrentInstance() // works
    })


    return () =>
      h(
        'button',
        {
          onClick: handleClick
        },
        `uid: ${id}`
      )
  }
}


// also works if called on a composable
function useComponentId() {
  return getCurrentInstance().uid
}

网站题目：创新互联VUE3教程：Vue3.0组合式API
新闻来源：http://zsjierui.cn/article/djcccoh.html