博客

createApp

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

const app = createApp({})

你可以在 createApp 之后链式调用其它方法

参数

• 参数1：可以接收一个根组件对象，以vue项目为例

import App from "./App.vue";
const app = createApp(App);

• 参数2：接收根组件的
  
prop

  属性

const app = createApp(App,{name:'11'});

//App.vue
  props: {
    name: {
      type: String,
    },
  },
  created() {
    console.log("名称：", this.name);
  },

第二个参数基本用不到。

注：


createApp

除了在创建应用时使用（看自己项目的入口文件）接收第一个参数，更多的使用方式是下面这种：

 //创建实例
 const app = createApp({
   render() {
     return h(MessageComponent, { messageType, title });
   },
 });

可以看一下我的另一篇文章：

vue以API的方式加载组件

h

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

参数


接收三个参数：type，props 和 children

• type（String | Object | Function）：HTML 标签名、组件、异步组件或函数式组件。使用返回 null 的函数将渲染一个注释。此参数是必需的。

//html标签
render() {
  return h('h1', {}, 'Some title')
}

//组件
render() {
   return h(MessageComponent, { messageType, title });
},

//其他的没用过，不介绍

• props（Object）：一个对象，与我们将在模板中使用的 attribute、prop 和事件相对应。可选。这个是单向的，只能往组件模板里传递

• children（String | Array | Object）：子代 VNode，使用 h() 生成，或者使用字符串来获取“文本 VNode”，或带有插槽的对象。

h('div', {}, [
  'Some text comes first.',
  h('h1', 'A headline'),
  h(MyComponent, {
    someProp: 'foobar'
  })
])

渲染结果：

<div>
  Some text comes first.
  <h1>A headline</h1>
  <my-component></my-component>
</div>

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

defineAsyncComponent

创建一个只有在需要时才会加载的异步组件。

参数


对于基本用法，defineAsyncComponent 可以接受一个返回 Promise 的工厂函数。Promise 的 resolve 回调应该在服务端返回组件定义后被调用。你也可以调用 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')
    )
  }
})

高阶用法参考官方文档

nextTick

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

2.x中就经常使用，不介绍

mergeProps

属性合并

将包含 VNode prop 的多个对象合并为一个单独的对象。其返回的是一个新创建的对象，而作为参数传递的对象则不会被修改。

可以传递不限数量的对象，后面参数的 property 优先。事件监听器被特殊处理，class 和 style 也是如此，这些 property 的值是被合并的而不是覆盖的。

useCssModule

• useCssModule 只能在 render 或 setup 函数中使用。
• 允许在 setup 的单文件组件函数中访问 CSS 模块

<script>
import { h, useCssModule } from 'vue'
export default {
  setup() {
    const style = useCssModule()
    return () =>
      h(
        'div',
        {
          class: style.success
        },
        'Task complete!'
      )
  }
}
</script>
<style module>
.success {
  color: #090;
}
</style>