vue3.0 全局API

2022-03-16 本文已影响0人清风昙

createApp
返回一个提供应用上下文的应用实例。应用实例挂载的整个组件树共享同一个上下文，可以在 createApp 之后链式调用其它方法，这些方法可以在应用 API 中找到。

const app = Vue.createApp({})

该函数接收一个根组件选项对象作为第一个参数：

const app = Vue.createApp({
  data() {
    return {
      ...
    }
  },
  methods: {...},
  computed: {...}
  ...
})

使用第二个参数，我们可以将根 prop 传递给应用程序：

const app = Vue.createApp(
  {
    props: ['username']
  },
  { username: 'Evan' }
)
<div id="app">
  <!-- 会显示 'Evan' -->
  {{ username }}
</div>

h
返回一个”虚拟节点“，通常缩写为 VNode：一个普通对象，其中包含向 Vue 描述它应在页面上渲染哪种节点的信息，包括所有子节点的描述。它的目的是用于手动编写的渲染函数：

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

接收三个参数：type，props 和 children
type:HTML 标签名、组件或异步组件。使用返回 null 的函数将渲染一个注释。此参数是必需的。
props:一个对象，与我们将在模板中使用的 attribute、prop 和事件相对应。
children:子代 VNode，使用 h() 生成，或者使用字符串来获取“文本 VNode”，或带有插槽的对象。

defineComponent
从实现上看，defineComponent 只返回传递给它的对象。但是，就类型而言，返回的值有一个合成类型的构造函数，用于手动渲染函数、TSX 和 IDE 工具支持。

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

或者是一个 setup 函数，函数名称将作为组件名称来使用

import { defineComponent, ref } from 'vue'

const HelloWorld = defineComponent(function HelloWorld() {
  const count = ref(0)
  return { count }
})

vue3.0 全局API

猜你喜欢

热点阅读