Vue 3.0 项目技术点(个人使用)

全局API

createApp

返回提供应用程序上下文的应用程序实例。应用程序实例挂载的整个组件树共享相同的上下文。

const app = vue.createApp({})

H

返回一个返回的“虚拟节点”，通常缩写为VNode：一个普通对象，其中包含向Vue描述应在页面上呈现哪种节点的信息，包括任何子节点的描述。

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

defineComponent

在实现方面defineComponent，除了返回传递给它的对象外，什么都不做。但是，就类型而言，返回值具有人工渲染功能，TSX和IDE工具支持的构造函数的综合类型。

import { defineComponent } from 'vue'

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

defineAsyncComponent

对于基本用法，defineAsyncComponent可以接受返回的工厂函数Promise。resolve从服务器检索组件定义后，应调用Promise的回调。您也可以致电reject(reason)以指示加载失败。

import { defineAsyncComponent } from 'vue'

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

app.component('async-component', AsyncComp)

使用本地注册时，您还可以直接提供返回以下内容的函数Promise：

import { createApp, defineAsyncComponent } from 'vue'

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

resolveComponent

resolveComponent只能在render或setup功能中使用。

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

resolveDynamicComponent

resolveDynamicComponent只能在render或setup功能中使用。

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

resolveDirective

resolveDirective只能在render或setup功能中使用。

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

withDirectives

withDirectives只能在render或setup功能中使用。

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

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

createRenderer

createRenderer函数接受两个通用参数： HostNode和HostElement，它们对应于主机环境中的Node和Element类型。例如，对于运行时域，HostNode将是DOM Node接口，HostElement将是DOMElement接口。

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

nextTick

推迟在下一个DOM更新周期后执行的回调。更改一些数据以等待DOM更新后，请立即使用它。

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')
    }
  }
})

Options

Instance Properties

Instance Methods

Directives

Spectives

Directives

Special Attributes

Built-In Components

Reactivity API

Composition API

setup

组件选项在创建组件之前执行，该组件选项在props解析后执行，并用作组合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

例子：

<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>

Lifecycle Hooks

可以使用直接导入的onX功能注册生命周期挂钩：

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

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

这些生命周期挂钩注册功能只能在期间同步使用setup()，因为它们依赖于内部全局状态来定位当前活动实例（当前setup()正在被调用的组件实例）。在没有当前活动实例的情况下调用它们将导致错误。组件实例上下文也在生命周期挂钩的同步执行期间设置。结果，在卸载组件时，在生命周期挂钩内同步创建的监视程序和计算属性也会自动删除。

Provide/Inject

provide并inject启用依赖项注入。两者都只能在setup()当前活动实例期间调用。

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

getCurrentInstance

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

import { getCurrentInstance } from 'vue'

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

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

当使用的外面设置或生命周期挂钩，请致电getCurrentInstance()上setup，并使用实例，而不是。

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
}

总结

暂时没有写完，继续努力吧。