Global API

createApp

Returns the application instance that provides the application context. The entire tree of components mounted by the application instance shares the same context.

const app = vue.createApp({})
Copy the code

H

Returns a returned “virtual node,” often shortened to VNode: a common object that contains information describing to the Vue what kind of node to render on the page, including the description of any child nodes.

render() {
  return Vue.h('h1', {}, 'Some title')}Copy the code

defineComponent

On the implementation side, defineComponent does nothing but return the object passed to it. However, in terms of type, the return value has manual rendering capabilities, a composite type of constructors supported by TSX and IDE tools.

import { defineComponent } from 'vue'

const MyComponent = defineComponent({
  data() {
    return { count: 1}},methods: {
    increment() {
      this.count++
    }
  }
})
Copy the code

defineAsyncComponent

For basic usage, defineAsyncComponent can accept the returned factory function Promise. After Resolve retrieves the component definition from the server, Promise’s callback should be invoked. You can also call Reject (Reason) to indicate a load failure.

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() = >
  import('./components/AsyncComponent.vue')
)

app.component('async-component', AsyncComp)
Copy the code

With local registration, you can also directly provide a function Promise that returns the following:

import { createApp, defineAsyncComponent } from 'vue'

createApp({
  // ...
  components: {
    AsyncComponent: defineAsyncComponent(() = >
      import('./components/AsyncComponent.vue'))}})Copy the code

resolveComponent

ResolveComponent can only be used in render or setup functions.

import { resolveComponent } from 'vue'
render() {
  const MyComponent = resolveComponent('MyComponent')}Copy the code

resolveDynamicComponent

ResolveDynamicComponent can only be used in render or setup functions.

import { resolveDynamicComponent } from 'vue'
render () {
  const MyComponent = resolveDynamicComponent('MyComponent')}Copy the code

resolveDirective

ResolveDirective can only be used in render or setup functions.

import { resolveDirective } from 'vue'
render () {
  const highlightDirective = resolveDirective('highlight')}Copy the code

withDirectives

WithDirectives can only be used in the Render or setup function.

import { withDirectives, resolveDirective } from 'vue'
const foo = resolveDirective('foo')
const bar = resolveDirective('bar')

return withDirectives(h('div'), [
  [foo, this.x],
  [bar, this.y]
])
Copy the code

createRenderer

The createRenderer function takes two generic parameters: HostNode and HostElement, which correspond to the Node and Element types in the host environment. For example, for the runtime time domain, HostNode would be the DOM Node interface and HostElement would be the DOMElement interface.

import { createRenderer } from 'vue'
const{ render, createApp } = createRenderer<Node, Element>({ patchProp, ... nodeOps })Copy the code

nextTick

Postponement of the callback after the next DOM update cycle. Use it as soon as you change some data to wait for DOM updates.

import { createApp, nextTick } from 'vue'

const app = createApp({
  setup() {
    const message = ref('Hello! ')
    const changeMessage = async newMessage => {
      message.value = newMessage
      await nextTick()
      console.log('Now DOM is updated')}}})Copy the code

Options

Instance Properties

Instance Methods

Directives

Spectives

Directives

Special Attributes

Built-In Components

Reactivity API

Composition API

setup

The component option is executed before the component is created, and this component option is executed after the props parsing and is used as an entry point to the composite API

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

function setup(props: Data, context: SetupContext) :Data
Copy the code

Example:

<template>
	<div>
    	{{ readersNumber }}
        {{ book.title }}
    </div>
</template>

<script>
  import { ref, reactive } from 'vue'

  export default {
    setup() {
      const readersNumber = ref(0)
      const book = reactive({ title: 'Vue 3 Guide' })

      // expose to template
      return {
        readersNumber,
        book
      }
    }
  }
</script>
Copy the code

Lifecycle Hooks

Lifecycle hooks can be registered using the onX feature imported directly:

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

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

These lifecycle hook registrations can only be used synchronously during setup() because they rely on internal global state to locate the current active instance (the component instance that setup() is currently being invoked). Calling them without a current active instance results in an error. The component instance context is also set during the synchronous execution of the lifecycle hook. As a result, the monitors and calculated properties that were created synchronously within the lifecycle hooks are also deleted automatically when the component is uninstalled.

Provide/Inject

Provide and inject Enable dependency injection. Both can only be called during setup(), the current active instance.

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

const key: InjectionKey<string> = Symbol()

provide(key, 'foo') // providing non-string value will result in error

const foo = inject(key) // type of foo: string | undefined
Copy the code

getCurrentInstance

GetCurrentInstance allows access to internal component instances that are useful to advanced usage or library creators.

import { getCurrentInstance } from 'vue'

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

    internalInstance.appContext.config.globalProperties // access to globalProperties}}Copy the code

When using outside Settings or lifecycle hooks, please call getCurrentInstance() on setup and use the instance instead.

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
}
Copy the code

conclusion

I haven’t finished it yet. Keep working on it.