vue3函数式组件定义的新方法以及异步组件使用的变化

函数式组件定义的新方法

函数式组件仅能通过简单函数方式创建，functional选项废弃。
函数式组件变化较大，主要有以下几点：

性能提升在vue3中可忽略不计，所以vue3中推荐使用状态组件

函数时组件仅能通过纯函数形式声明，接收props和context两个参数

SFC中不能添加functional特性声明函数是组件

{ functional: true }组件选项移除。

声明一个函数式组件，Functional.vue

<script>
import { h } from 'vue'

const Heading = (props, context) => {
 return h(`h${props.level}`, context.attrs, context.slots)
}

Heading.props = ['level']

export default Heading
</script>

//首页进行引用

<template>
  <h1>{{ msg }}</h1>
  <button @click="count++">count is: {{ count }}</button>
  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
  <functional level='3'>dynamic element</functional>
</template>

<script>
import Functional from './Functional.vue'
export default {
  components: { Functional },
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      count: 0
    }
  }
}
</script>

异步组件使用的变化

由于vue3中函数式组件必须定义为纯函数，异步组件定义时有如下变化：

必须明确使用defineAsyncComponent包裹

component 选项重命名为 loader

Loader 函数不在接收 resolve and reject 且必须返回一个Promise

定义一个异步组件

<template>
  <h1>{{ msg }}</h1>
  <button @click="count++">count is: {{ count }}</button>
  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
  <functional level='3'>dynamic element</functional>
  <AsyncComp></AsyncComp>
</template>

<script>
import { defineAsyncComponent } from 'vue'
import Functional from './Functional.vue'
export default {
  components: { 
    Functional,
    AsyncComp:defineAsyncComponent(()=>import('./Next.vue'))
  },
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      count: 0
    }
  }
}
</script>