Vue3.x 关于组件的那些变化（新手必看篇）
一、组件内的 data 为什么总是函数形式？
我们试着先做一个计数器案例，把 data 的返回形式修改成一个对象。具体的代码如下：
<template> <div> <button @click="num++">+</button> {{num}} <button @click="num--">-</button> </div> </template> <script> const retData = { num:0 } export default { data(){ return retData } } </script>
运行结果，看着是正常的，并无异常。但我们都知道，vue 项目中，之所以采用组件形式，就是为了重复多次使用，所以我们多次使用我们的组件试试。
神奇的效果发生了，当我们改变第一个组件的数值时，第二个组件的数据也被修改。修改第二个组件的时候，第一个组件的数据也同步更新。
原因：同一个组件被复用多次，会创建多个实例，如果data是一个对象的话，这些实例用的是同一个构造函数，指针指向的就会是同一个地方，就导致了两个组件的数据会同时更新。
为了保证组件内的数据各自独立，不会相互影响，要求每个组件的data必须是函数形式，目的就是把数据放入一个新对象内，这样就不会出现上述问题了。
说这的主要意义就是告诉我们，在 Vue3.x 中的 data 选项总是为函数形式，返回响应式数据。
Vue2.x VS Vue3.x 实例创建
二、函数式组件的变化
在Vue3.x中，functional:true 组件选项被移除。vue3.x 不推荐使用函数式组件。
有些小伙伴就会惊叹，妈呀，俺都不知道函数式组件是啥，你说得再简单我也不懂呐，所以就讲讲函数式组件干啥的，原来的 functional 属性放哪？
2.1、在Vue2.x中的函数式组件：
函数式组件也是组件的一种类型，主要用来定义那些没有响应数据，也不需要任何生命周期钩子函数，只 props 来接收传递来的数据。
类型1：基于模板的函数式组件
<template functional > <div> 函数式组件内容 </div> </template>
类型2：组件注册
Vue.componenet('fun-comp':{
functional:true,
props:{
msg:{
type:String,
default:'组件数据'
}
},
render:(h,context)=>{
return h('div',['组件内容','++',context.props.msg])
}
})
类型3：中间件实现 render 方法
// FunComps.js 文件代码 export default { functional:true, props:{ render:{ type:Function }, params:{} }, render:(h,ctx)=>{ return ctx.props.render(h,ctx.props.params) } } //组件调用 <fun-comp :render="renderHandle" :params="['111','222']" />
renderHandle 这个函数，在外层可以任意控制，这样不但节省开销，而且复用性也很高。
2.2、在Vue3.x中的函数式组件：
在 SFC 中不能使用 functional 特性声明是函数式组件，移除了 functional:true 特性。
// 新建一个 FunComp.vue 文件 <script> import { h } from "vue" function Footer(props,context){ return h(`h${props.level}`,context.attrs , context.slots ) } Footer.props = ['level'] export default Footer </script> //使用函数式组件 <template> <FunComp level="1.0.0" >Vue3.x函数式组件内容</FunComp> </template> <script > import FunComp from '../../components/FunComp.vue' export default{ component:{ FunComp }, } </script>
这下应该清楚到底移除的属性在哪了！接着看看异步组件有什么改变。。。
三、异步组件的变化
Vue3.x 异步组件要求使用 defineAsyncComponent 方法创建。
由于 Vue3 中函数式组件必须定义为纯函数，所以异步组件有如下变化：
- 必须明确地使用 defineAsyncComponent 方法包裹
- component 选项已经被重命名为 loader
- loader 函数不再接收 resolve 和 reject 回调方法 。且必须返回一个 Promise 对象 。
3.1、不带配置的异步组件对比
在 Vue2.x中异步组件使用：
{ path:'/', component: ()=> import("@/view/home/index") }
在 Vue3.x 中异步组件使用：
import { defineAsyncComponent } from 'vue'
{
path:"/",
component:defineAsyncComponent(()=>{ import("@/view/home/index.vue") })
}
3.2、带配置的异步组件
const asyncPageWithOptions = defineAsyncComponent({ loader:()=> import("../view/index/index.vue"), delay:200, timeout:3000, errorComponent:ErrorComponent, loadingComponent:LoadingComponent })
loader 选项是以前的 component 选项。
四、自定义组件白名单的变化
Vue3.x中，自定义元素检测发生在模板编译时，如果要添加 vue 之外的自定义元素，需要在编译器选项中设置 isCustomElement 选项。
使用构建工具时，模板都会用 vue-loader 预编译，在 vite.config.js 中配置它提供的 vueCompilerOption 即可：
import { defineConfig,vueCompilerOption } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
vueCompilerOptions:{
isCustomElement:tag => tag==='pie-chart'
}
})
此时遇到 pie-chart 元素时，直接跳过，不对其进行编译。
五、动态组件
vue3.x 中设置动态组件时，is 属性只能用于 component 标签上。
使用方法：
<component :is="currentView"></component> //currentView 是一个表达式
让多个组件使用同一个挂载点，并动态切换组件。
5.1、动态组件的缓存
好多时候多个组件来回切换时，组件的实例都是重新创建的，而我们需要保存它的状态，此时就需要缓存动态组件。
在Vue2.x中：
<keep-alive> <component :is="currentView"></component> </keep-alive>
在 Vue3.x中：keep-alive 必须使用在 router-view内部
<router-view> <keep-alive> <component :is="currentView"></component> </keep-alive> </router-view>
