看完这篇文章，不再害怕Vue3的源码（三）

看完这篇文章，不再害怕Vue3的源码（二）https://developer.aliyun.com/article/1426270

自定义指令和过滤器

在 Vue 3 中，自定义指令和过滤器是扩展 Vue 的功能的重要手段。

1. 自定义指令

自定义指令是指在 Vue 中，开发者可以根据需要自定义一些指令，在模板中使用指令来操作 DOM 结构和渲染视图。自定义指令可以实现一些非常有用的功能，例如自动聚焦、限制输入的字符等。在 Vue 3 中，可以使用 directive() 函数来定义和注册指令。

以下是定义一个自动聚焦的指令：

export default {
  mounted(el) {
    el.focus()
  }
}
// 注册指令
app.directive('focus', FocusDirective)

在模板中使用：

<template>
  <input v-focus>
</template>

2. 过滤器

过滤器是指在 Vue 中，过滤和格式化显示数据的通用功能。开发者可以定义一些自定义过滤器，来满足不同的数据格式化需求。在 Vue 3 中，可以使用 filter() 函数来定义和注册过滤器。

以下是定义一个格式化日期的过滤器：

import { formatDate } from '@/utils'
export default {
  /* 使用 value 作为过滤器函数的第一个参数 */
  filter(value) {
    return formatDate(value, 'yyyy-MM-dd')
  }
}
// 注册过滤器
app.filter('dateFormat', DateFormatFilter)

在模板中使用：

<template>
  <div>{{ date | dateFormat }}</div>
</template>

需要注意的是，在 Vue 3 中，过滤器的使用和指令类似，须在模板中调用，但是过滤器不支持在 template中使用函数，而指令可以支持在 template中使用函数。

Mixins

在 Vue 3 中，Mixins 是一种复用组件选项的方式。Mixins 可以让开发者在多个组件之间共享某些组件选项的代码，从而提高组件的复用性和代码的可维护性。

Mixins 可以定义在单独的对象中，这个对象会被多个组件引用。当组件使用了 Mixins，这些 Mixins 中的选项会被混合到组件中，从而实现组件选项的复用。

以下是 Mixin 的使用示例：

const myMixin = {
  data() {
    return {
      active: false
    }
  },
  methods: {
    toggleActive() {
      this.active = !this.active;
    }
  },
  created() {
    console.log('Mixin created!')
  }
}
export default {
  mixins: [myMixin],
  mounted() {
    this.toggleActive();
  }
}

在组件中使用 mixins 属性来引用 Mixin，可以使用数组的形式来引用多个 Mixin。

需要注意的是，在多个 Mixin 中如果存在冲突的选项时，Vue 3 中优先级更高的选项会覆盖优先级低的选项。冲突的选项包括 data、methods、hooks 等。此外，组件内的选项优先级会更高于 Mixin 中的选项。开发者在使用 Mixin 时，应当注意优先级的问题，并尽量避免冲突。

Provide/Inject

在 Vue 3 中，Provide/Inject 是一种跨层级组件通信的方式。Provide 和 Inject 可以让开发者在父组件中提供数据，然后子孙组件通过 Inject 从父组件中获取数据，从而实现组件之间的数据共享。

1. Provide

Provide 是在父组件中提供数据给子孙组件使用的方法。Provide 可以在 provides 选项中进行定义和注册，然后在父组件的模板中使用相关数据。

以下是 Provide 的使用示例：

const app = createApp({
  provide: {
    title: 'Vue 3'
  },
  template: `
    <div>
      <h1>{{ title }}</h1>
      <child></child>
    </div>
  `
})

2. Inject

Inject 是在子孙组件中获取提供给它的数据的方法。它可以在 inject 选项中进行注册，然后在子孙组件中通过 this.$injected 来使用。

以下是 Inject 的使用示例：

const Child = {
  inject: ['title'],
  template: `
    <div>
      <h2>{{ title }}</h2>
    </div>
  `
}

在以上示例中，父组件通过 Provide 提供了 title 数据，然后子组件通过 Inject 注入获取了该数据并在模板中使用。

需要注意的是，Provide/Inject 是一种高级的使用方式，应当在合适的场景下使用。在使用 Provide/Inject 时，要注意传递数据的类型和命名，保证代码的可维护性和扩展性。

打包和构建细节

在 Vue 3 中，使用 vue-cli 工具可以方便地进行项目的打包和构建。

1. 打包

打包是将项目中的各个模块和资源打包成一个或多个文件以便于部署和使用的过程。在 Vue 3 中，可以使用 vue-cli 工具中的 build 命令进行打包。

vue-cli 提供了多个模板和配置文件可以用于不同的应用场景。使用默认模板时，打包生成的文件都存放在 dist 目录下。

以下是使用 vue-cli 进行打包的命令：

vue-cli-service build

2. 构建

构建是指将原始的代码转换为可以直接运行在浏览器中的代码的过程。在 Vue 3 中，构建过程是自动化的，开发者不需要手动进行太多的操作，只需要进行一些简单的配置即可。

Vue 3 中的构建工具使用了现代化的打包工具，如 Webpack，Rollup，Parcel 等。这些工具可以将原始的代码打包成可执行的、优化过的代码，提高了应用程序的性能和稳定性。

在构建时，Vue 3 中会对应用程序进行代码压缩、混淆、分割等优化操作，从而减小应用的体积并提高应用的执行效率。

在 Vue 3 中，构建的相关配置选项包括 outputDir、publicPath、chainWebpack、configureWebpack 等，可以通过配置文件进行设置和调整。

需要注意的是，打包和构建是项目开发中必不可少的环节，但是打包和构建的结果往往跟代码的实现期望有所差异，开发者需要进行相关的测试和优化工作，确保应用程序的稳定性和用户体验。

VII 总结

结论

在 Vue 3 的学习过程中，我们需要掌握如下重点：

1. Vue 3 和 Vue 2 的区别：模板编译器、根组件 API、响应式 API 和虚拟 DOM API 等。
2. Vue 3 的应用创建方式：通过 createApp() 函数创建应用，使用 defineComponent() 定义组件。
3. Vue 3 中使用 Options API 和 Composition API 进行组件开发，Composition API 具有更好的可读性和代码管理性。
4. Vue 3 中的 Teleport 组件和 Suspense 组件提供了更好的组件复用和异步加载支持。
5. Vue 3 中的组合式 API 和 React Hooks 相似，可以方便地定义和处理组件内部状态和逻辑。
6. Vue 3 中的自定义指令、过滤器和 Mixins 可以扩展 Vue 的功能和提高代码的复用性。
7. Vue 3 中提供了 Provide/Inject 机制来实现跨层级组件通信。
8. Vue 3 的打包和构建可以使用 vue-cli 工具，支持多个打包和构建模板和配置选项。
9. 在 Vue 3 的学习中，应当关注其与 Vue 2 的区别、Composition API 的使用、组件复用和异步加载等。需要注意代码的优化和测试工作，以确保应用程序的稳定性和用户体验。