Vue3.0正式版问世已半载，其插件稳定运行，各组件库亦纷纷适配。这是前端开发的一大突破。如今，全面采用Vue3.0的开发应用指日可待。其中，众多新特性与变革亟待我们深入研究。
Vue3.0发展现状
Vue3.0已经拥有了足够的时间，官方插件也趋于稳定，比如vue和vuex都已经升级到了稳定版本。此外，像ant-vue这样的组件库也已经推出了兼容Vue3.0的2.0正式版。移动端组件库也较早地实现了与Vue3.0的兼容。这些情况表明，Vue3.0在项目移植方面具有很大的潜力。越来越多的公司和开发者开始考虑将现有项目升级到Vue3.0，或者直接基于Vue3.0来开发新项目。在具体应用中，许多公司会对Vue3.0的新特性对开发效率和项目维护成本的影响进行评估。
Vue3.0的普及使得相关技术社区愈发热闹。各式各样的开发教程和开源项目层出不穷。比如，一些开源的脚手架工具现在都支持Vue3.0项目创建，默认选项。这对初学者提供了丰富的学习资料，而对于经验丰富的开发者，则提供了更多的参考实例。
新特性之组合式api与选项式api
Vue3.0的一个显著变化是将Vue2的选项式API改为了组合式API。以开发组件为例，Vue2的选项式API遵循着一套既定的结构和流程。然而，组合式API为开发者提供了更多的灵活性。尽管如此，Vue3.0并未完全摒弃选项式API，这为那些习惯传统方式的开发者提供了便利。在具体的项目实践中，有些团队可能会逐步转向使用组合式API，而另一些较为保守的团队则可能继续沿用选项式API。
<div class=\"d-input\" :class=\"rootClass\">
<div class=\"d-input-placeholder\">{{ placeholder }}</div>
<input
ref=\"root\"
autocomplete=\"new-password\"
:type=\"type\"
:readonly=\"readonly\"
:disabled=\"disabled\"
:value=\"modelValue\"
@focus=\"focusHandler\"
@blur=\"blurHandler\"
@input=\"inputHandler\"
>
</div>
在代码编写过程中，组合式API大大简化了逻辑的复用。比如，面对复杂的交互逻辑或数据共享需求，我们可以利用组合式API提取并复用代码。此外，在大型项目中，这种复用特性能有效提升代码的维护性和阅读流畅度。
import { ref, reactive, computed, watchEffect } from 'vue'
import { useInputStatus } from './useInput'
export default {
name: 'DInput',
inheritAttrs: false,
props: {
modelValue: {
type: [String, Number],
default: ''
},
placeholder: {
type: String,
default: '请输入内容...'
},
readonly: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
// 仅支持文本框和密码框
type: {
type: String,
default: 'text',
validator: (value: string) => ['text', 'password'].includes(value)
}
},
emits: ['update:modelValue', 'focus', 'blur'],
setup (props: any, { emit }: any) {
const root = ref(null)
const status = reactive({
active: false, // 聚焦 || 有值，placeholder上移，边框变红
filled: true // 失焦，边框变灰（会同时placeholder上移，边框变灰）
})
const isFocus = ref(false)
const rootClass = computed(() => ({
active: status.active,
filled: status.filled
}))
watchEffect(() => {
status.active = isFocus.value || !!props.modelValue
})
function focusHandler (e: Event) {
isFocus.value = true
useInputStatus(status, props.modelValue, 'focus')
emit('focus', e)
}
function blurHandler (e: Event) {
isFocus.value = false
useInputStatus(status, props.modelValue, 'blur')
emit('blur', e)
}
function inputHandler (event: { target: { value: any } }) {
const { value } = event.target
emit('update:modelValue', value)
}
return {
root,
status,
rootClass,
focusHandler,
blurHandler,
inputHandler
}
}
}
新增的emits选项
Vue3.0引入了emits选项。这一选项与props相似，并具备验证功能。在构建组件时，准确指定事件触发的名字至关重要。比如，在用户交互组件中，当点击按钮引发事件时，通过emits选项明确设定事件名称，能使组件逻辑更加明了。
在大型多人协作的开发项目中，emits选项对于代码的规范性扮演着至关重要的角色。若不同开发者编写的组件间缺乏明确的交互事件标准，很容易造成混乱。幸运的是，emits选项为我们提供了一个标准化的定义机制。
jsx在Vue3.0中的应用
在Vue3.0中，某些情况下，使用jsx编写组件会更加灵活。将.vue组件转换为jsx组件需要遵循特定的步骤。尤其是在对性能和灵活性有较高要求的场景中，jsx的优势便尤为明显。比如，在动态生成组件或对组件进行高度定制化渲染时，jsx的表现尤为出色。
实时数据可视化项目里，有时会根据用户输入或数据获取结果，动态生成可视化组件。jsx在这方面能提供直观、简洁的动态逻辑实现。相较传统模板语法，jsx对前端程序员来说更符合JavaScript编写习惯，从而降低了学习难度。
App概念取代Vue.use()方法
import { App } from 'vue'
import DInput from './d-input/DInput.vue'
import DInputJSX from './d-input-jsx'
const components = [DInput, DInputJSX]
const install = (app: App) => {
components.forEach(component => app.component(component.name, component))
}
export default install
Vue3.0版本弃用了Vue.use()，转而引入了App概念。开发者现在通过创建实例来在应用实例中使用组件。这一改动让代码的组织方式发生了转变。过去，随着大型项目中组件数量和层级的增加，Vue.use()可能会带来一些难以定位的问题。而采用App实例后，组件的组织与管理变得更加清晰易懂。
开发企业级应用时，新结构让项目更加清晰，模块间的依赖关系也更为明确。以电商Web应用为例，其中多处涉及组件的复用和交互，采用App实例方式，能更有效地规划组件的加载与使用顺序。
import { createApp } from 'vue'
import vueDzUi from '@/components/vue3-dz-ui/lib'
createApp(App).use(vueDzUi)
setup函数中的改变
setup函数里没有this的存在，这是一个明显的不同。因此，开发者必须调整在Vue2中养成的编程习惯。比如，在获取组件数据或调用组件方法时，不能再依赖this来快速操作。这样的改变对于提升代码的规范性来说，具有一定的价值。
在Vue3.0中，对于函数式调用组件的处理方式与Vue2有所不同。在Vue2里，这类组件是依托于Vue的特定属性来挂载的。而Vue3.0引入了新的实现方法，尽管有所改变，却有助于框架向更合理的方向发展。谈及Vue3.0在开发组件方面的内容，已经说了不少。那么，在实际开发中，你是否遇到了一些有趣的问题？欢迎点赞、分享这篇文章，并在评论区与我们互动交流。
