vue3 入门必知：插件开发全攻略-七爪网

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在开发组件方面的内容，已经说了不少。那么，在实际开发中，你是否遇到了一些有趣的问题？欢迎点赞、分享这篇文章，并在评论区与我们互动交流。

相关文章

微信