vue相关技术

vue

• 组合式 API 和选项式 API的区别

  • 组合式 API 编写的组件使用 script setup 或显式的 setup() 函数。
  • 组件对象的属性通常称为选项。这就是选项式 API 得名的原因。

• 生命周期钩子 (lifecycle hooks)​

  • Vue 组件实例会经历一个生命周期。例如，它会被创建、挂载、更新和卸载。
  • 最常用的是 onMounted（创建和插入DOM结点）、onUpdated（重新渲染） 和 onUnmounted
  • 在组合式 API 则使用函数，例如 onMounted()。在选项式 API 中，每个钩子都作为单独的选项提供，例如 mounted。

• 指令

  • 内置的指令包括 v-if、v-for、v-bind、v-on 和 v-slot。
  • v-model 可以在组件上使用以实现双向绑定，推荐的实现方式是使用 defineModel() 宏
    • defineModel() 返回的值是一个 ref。
    • 它可以像其他 ref 一样被访问以及修改，不过它能起到在父组件和当前变量之间的双向绑定的作用：
    • 它的 .value 和父组件的 v-model 的值同步；

• 事件 (event)

  • v-on 指令用于在模板中监听事件。
  • 事件处理
    • 可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件；
    • 内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。
    • 方法事件处理器：一个指向组件上定义的方法的属性名或是路径。
    • 在内联处理器中调用方法：
      • 这允许我们向方法传入自定义参数，@click="say('hello')"；
      • 也可以使用箭头函数，@click="(event) => console.log('test', event)"
  • 组件事件
    • 在组件的模板表达式中，可以直接使用 $emit 方法触发自定义事件
    • @click="$emit('someEvent')"
    • 父组件可以通过 v-on (缩写为 @) 来监听事件，MyComponent @some-event="callback"；
    • 在template中使用的$emit方法不能在组件的script setup部分中使用，但 defineEmits() 会返回一个相同作用的函数供我们使用：
    • 组件可以显式地通过 defineEmits() 宏来声明它要触发的事件
      • const emit = defineEmits(['inFocus', 'submit'])
      • function buttonClick() { emit('submit')}
  • 事件校验
    • 所有触发的事件也可以使用对象形式来描述。
    • 要为事件添加校验，那么事件可以被赋值为一个函数，接受的参数就是抛出事件时传入 emit 的内容，返回一个布尔值来表明事件是否合法。

• 提供 / 注入 (provide / inject)

  • 是一种组件间通信的形式，该组件的所有后代组件都可以选择使用；
  • 与 prop 不同，提供值的组件不知道哪些组件正在接收该值。
  • provide 也可以在应用级别使用，使得该值对该应用中的所有组件都可用。

• 响应式API

  • 包括 ref()、reactive()、computed()、watch() 和 watchEffect() 等。
  • 响应式作用 (reactive effect)
    • 指的是跟踪函数的依赖关系，并在它们的值发生变化时重新运行该函数的过程。
    • watchEffect() 是最直接的创建作用的方式。Vue内部的其他各个部分也会使用作用。例如组件渲染更新、computed() 和 watch()。
  • 响应性是指在数据变化时自动执行操作的能力。例如，当数据值变化时更新 DOM，或进行网络请求。
  • ref 是 Vue 响应性系统的一部分
    • 它是一个具有单个响应式属性 (称为 value) 的对象。
    • Ref 有多种不同的类型。例如，可以使用 ref()、shallowRef()、computed() 和 customRef() 来创建 ref。
    • 函数 isRef() 可以用来检查一个对象是否是 ref，isReadonly() 可以用来检查 ref 是否允许被直接重新赋值

• 插件 (plugin)

  • 插件是一种能为 Vue 添加全局功能的工具代码，是向应用程序添加功能的一种方式。
  • app.use(plugin) 可以将插件添加到应用中。插件本身可以是一个函数，也可以是一个带有 install 函数的对象。
  • 安装函数会接收到安装它的应用实例和传递给 app.use() 的额外选项作为参数：
  • 插件没有严格定义的使用范围，但是插件发挥作用的常见场景主要包括以下几种：
    • 通过 app.component() 和 app.directive() 注册一到多个全局组件或自定义指令。
    • 通过 app.provide() 使一个资源可被注入进整个应用。
    • 向 app.config.globalProperties 中添加一些全局实例属性或方法；
    • vue-router库就包含了上述三种的使用

• 组件

  • 组件是 Vue 提供的将 UI 拆成较小部分的主要机制，既可以提高可维护性，也允许代码重用。例如按钮或复选框。多个组件也可以组合成更大的组件。
  • 一个 Vue 组件是一个对象。所有属性都是可选的，但是必须有用于组件渲染的模板或渲染函数二选一。
  • 大多数 Vue 应用都是通过单文件组件 (.vue 文件) 编写的。单文件组件编译器会将它们转换为用作文件默认导出的一个对象。
  • 组件这个词也可以更宽泛地用来指代组件实例。每一个组件都维护着自己的状态，每当使用一个组件，就创建了一个新的实例。
  • 在实际应用中，组件常常被组织成层层嵌套的树状结构，可以在每个组件内封装自定义内容与逻辑；
  • 通过 script setup，导入的组件都在模板中直接可用。
  • 也可以全局地注册一个组件，使得它在当前应用中的任何组件上都可以使用，而不需要额外再导入；
  • 在单文件组件中，推荐为子组件使用 PascalCase 的标签名使用 /> 来关闭一个标签，也可以使用 kebab-case 形式并显式地关闭这些组件的标签；
  • Props 是一种特别的 attributes，你可以在组件上声明注册。必须在组件的 props 列表上声明它。这里要用到 defineProps 宏；
  • defineProps(['title']), , BlogPost title="My journey with Vue"，在for中遍历的使用多次组件可以用:title；
  • 组件与父组件进行交互，看上方“组件事件”的两种emit使用方式；
  • 向组件中传递内容：通过插槽来分配内容，通过 Vue 的自定义 slot /> 元素来实现，作为一个占位符，父组件传递进来的内容就会渲染在这里。
  • 动态组件：
    • 使用 component :is="..." 来在多个组件间作切换，比如 Tab 界面，被切换掉的组件会被卸载，
    • 但可以通过KeepAlive组件强制被切换掉的组件仍然保持“存活”的状态。

nuxt

• 功能：
  • 项目结构和配置：了解 Nuxt 项目的目录结构，以及如何配置 nuxt.config.js 文件来满足项目的需求；
  • 中间件：理解和运用 Nuxt 的中间件机制，实现诸如权限验证、路由跳转控制等功能。
  • 状态管理：有自己的简单状态管理工具，也可以与pinia集成；
  • 模块使用：Nuxt 有很多丰富的模块可以扩展功能，例如 @nuxtjs/auth，@tailwindss等很多扩展整合功能；
  • 支持自动API路由：
    • 在 server/api 目录下创建文件来定义后端 API 逻辑，处理特定的请求和返回相应的数据；
    • 路由以api开头，用文件名定义http方法类型，[...].ts这种文件名可以处理全部http请求方法；
• nuxt扩展了 Vue.js 的以下几个主要方面：
  • 服务器端渲染（SSR）支持：Nuxt.js 为 Vue.js 应用提供了内置的服务器端渲染功能，使页面能够在服务器端生成完整的 HTML 并发送给客户端；
  • 路由系统：提供了更强大和自动化的路由配置方式，包括动态路由、嵌套路由等，简化了路由的管理和维护。自动pages页面路由，按不同的目录组织功能；
  • 数据获取：引入了特定的钩子函数（如 asyncData 和 fetch），方便在服务器端和客户端获取数据，并在渲染页面之前预取数据。
  • 布局系统：允许轻松创建和管理应用的布局模板，实现不同页面之间的统一布局和布局切换。
  • 模块生态：Nuxt.js 拥有丰富的模块生态，方便集成各种功能，如 API 调用、状态管理、样式处理等。
  • 构建和部署优化：提供了一系列默认的构建配置和优化策略，以便生成高效的生产环境代码，并支持多种部署方式。
  • 开发环境支持：在开发过程中，提供了热模块替换（HMR）、自动代码分割等功能，提高开发效率。
  • 约定优于配置：遵循一定的项目结构和命名约定，减少了配置的复杂性，使开发者能够更快速地搭建和开发应用。
• vue和nuxtjs都有命令行工具可以创建模板项目，不用在网上找集成了某某组件的模板；

typescript

• 基础类型：包括数字、字符串、布尔值、数组、元组、枚举、any、void、never 等类型的理解和使用。
• 接口（Interfaces）：用于定义对象的形状和结构，确保对象具有特定的属性和方法。
• 类（Classes）：包括类的定义、属性、方法、访问修饰符（public、private、protected）、继承等。
• 函数：函数的类型定义、参数类型、返回值类型。
• 泛型（Generics）：使函数和类可以更通用，适用于多种类型。
• 类型别名（Type Aliases）和类型断言（Type Assertions）：用于创建自定义类型名称和强制类型转换。
• 模块（Modules）：了解如何组织代码为模块，以及模块的导入和导出。
• 装饰器（Decorators）：用于为类、方法、属性等添加额外的行为或元数据。
• 类型推论（Type Inference）：理解 TypeScript 如何自动推断变量和表达式的类型。
• 高级类型操作：如交叉类型（Intersection Types）、联合类型（Union Types）、映射类型（Mapped Types）等。
• 与现有 JavaScript 代码的集成：包括如何在 TypeScript 项目中使用第三方 JavaScript 库。
• 类型兼容性和类型守卫（Type Guards）：用于在运行时进行类型检查和条件判断。