Vue3.x|Vue3.x 关于组件的那些变化（新手必看篇） Vue3.x关于组件的那些变化（新

一、组件内的 data 为什么总是函数形式？我们试着先做一个计数器案例，把 data 的返回形式修改成一个对象。具体的代码如下：

运行结果，看着是正常的，并无异常。但我们都知道，vue 项目中，之所以采用组件形式，就是为了重复多次使用，所以我们多次使用我们的组件试试。
神奇的效果发生了，当我们改变第一个组件的数值时，第二个组件的数据也被修改。修改第二个组件的时候，第一个组件的数据也同步更新。

文章图片

原因：同一个组件被复用多次，会创建多个实例，如果data是一个对象的话，这些实例用的是同一个构造函数，指针指向的就会是同一个地方，就导致了两个组件的数据会同时更新。
为了保证组件内的数据各自独立，不会相互影响，要求每个组件的data必须是函数形式，目的就是把数据放入一个新对象内，这样就不会出现上述问题了。
说这的主要意义就是告诉我们，在 Vue3.x 中的 data 选项总是为函数形式，返回响应式数据。
Vue2.x VS Vue3.x 实例创建

文章图片

二、函数式组件的变化在Vue3.x中，functional:true 组件选项被移除。vue3.x 不推荐使用函数式组件。
有些小伙伴就会惊叹，妈呀，俺都不知道函数式组件是啥，你说得再简单我也不懂呐，所以就讲讲函数式组件干啥的，原来的 functional 属性放哪？
2.1、在Vue2.x中的函数式组件：
函数式组件也是组件的一种类型，主要用来定义那些没有响应数据，也不需要任何生命周期钩子函数，只 props 来接收传递来的数据。
类型1：基于模板的函数式组件

类型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) } }//组件调用

renderHandle 这个函数，在外层可以任意控制，这样不但节省开销，而且复用性也很高。
2.2、在Vue3.x中的函数式组件：
在 SFC 中不能使用 functional 特性声明是函数式组件，移除了 functional:true 特性。

// 新建一个 FunComp.vue 文件//使用函数式组件

这下应该清楚到底移除的属性在哪了！接着看看异步组件有什么改变。。。
三、异步组件的变化 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|Vue3.x 关于组件的那些变化（新手必看篇）】vue3.x 中设置动态组件时，is 属性只能用于 component 标签上。
使用方法：