Vue

Vue3

指令

插值语法：

• mustache：{ {variable} }，最基础的数据绑定方式，用于将数据动态渲染为纯文本内容。

文本渲染：

• v-text：dataProperty，用于将数据作为纯文本动态渲染到元素中。
• v-html：dataProperty，用于将数据作为原始 HTML 解析并渲染到元素中。
• v-pre：空，用于跳过指定元素及其子元素的编译过程，直接保留原始内容。

绑定：

• v-bind：表达式，用于动态绑定HTML属性、组件prop或DOM属性到Vue实例的数据。
• v-on：表达式，用于监听 DOM 事件或自定义事件，并执行对应的 JavaScript 代码或方法。
• v-model：表达式，用于在表单输入元素或自定义组件上实现双向数据绑定，是 v-bind 和 v-on 的语法糖。

条件渲染：

• v-show：布尔表达式，用于通过切换 CSS 的 display 属性来控制元素的显示与隐藏。
• v-if、v-else、v-else-if：条件表达式，用于实现条件渲染，根据表达式的真假动态控制元素的渲染或销毁。元素会从DOM中移除。

列表渲染：

• v-for：表达式，用于基于数据源(数组、对象、数值范围)循环渲染多个元素或组件。
• key：唯一标识，用于标识虚拟 DOM 节点身份的特殊属性，它在 Vue 的响应式更新机制中起到优化渲染性能和维护组件状态的关键作用。

其他：

• v-once：空，用于标记元素或组件仅渲染一次，后续数据变化时不再更新。
• v-cloak：空，用于在 Vue 实例完成编译前隐藏未编译的模板内容，避免页面加载时出现原始模板符号({ { } })的短暂闪烁。必需配合 CSS 样式，CSS 必须全局生效。

全局API

应用实例：

• createApp()：(rootComponent, rootProps?)，用于创建一个 Vue 应用实例，是 Vue 3 应用开发的入口函数。
• app.use()：(plugin,...options?)，用于为 Vue 应用安装插件(如 Vue Router、Pinia等)或自定义功能扩展。
• app.mount()：(containerSelector | element)，将 Vue 应用实例挂载到 DOM 元素。
• app.component()：(name,component?)，用于全局注册或获取组件。
• app.directive()：(name, directive?)，用于注册或获取全局自定义指令。
• app.mixin()：(mixin)，用来全局注册一个混入对象。会将该对象的所有组件选项(data,methods,...)合并到每个组件中。

通用：

• nextTick()：(callback?)，通常用来在下一次 DOM 更新刷新后执行某些操作。

组合式API

setup：

• setup()：(props?, context?)，是组件逻辑的入口点，用于替代 Vue2 的 data、methods、computed 等选项。

响应式：

• ref()：<T>(initialValue:T)，用来定义一个响应式的、可更改的 ref 对象，该对象可以通过.value访问其内部值。
• reactive()：<T extends object>(initialObject:T)，用于创建深度响应式的对象或数组。底层通过Proxy实现。
• computed()：<T>(getter | options)，用于声明基于响应式依赖的计算属性，适合处理需要动态计算的逻辑，且结果会被缓存。
• watch()：<T>(source,callback,options?)，用于监听响应式数据变化并执行回调函数，适合处理异步操作、复杂逻辑或需要观察特定数据变动的场景。
• watchEffect()：(effect,options?)，会立即执行并跟踪函数内部访问的所有响应式数据。任何响应式数据发生变化时，回调函数会重新执行。
• readonly()：<T extends object>(object:T)，用于将一个响应式对象或普通对象变为只读对象，防止其被修改。
• shallowReadonly()：(target)，用于创建一个浅层只读代理对象，其顶层属性为只读，但嵌套对象仍保持可变。

生命周期钩子：

• onBeforeMount()：(callback)，注册一个钩子，在组件被挂载之前被调用。
• onMounted()：(callback)，注册一个钩子，在组件挂载完成后执行。
• onBeforeUpdate()：(callback)，注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。
• onUpdated()：(callback)，注册一个钩子，在组件因为响应式状态变更而更新其 DOM 树之后调用。
• onBeforeUnmount()：(callback)，注册一个钩子，在组件实例被卸载之前调用。
• onUnmounted()：(callback)，注册一个钩子，在组件实例被卸载之后调用。
• onActivated()：(callback)，注册一个钩子，若组件实例是<KeepAlive>缓存树的一部分，当组件被插入到DOM中时调用。
• onDeactivated()：(callback)，注册一个钩子，若组件实例是<KeepAlive>缓存树的一部分，当组件从DOM中被移除时调用。

依赖注入：

• provide()：<T>(key,value)，提供一个值，可以被后代组件注入。
• inject()：<T>(key,defaultValue?)，注入一个由祖先组件或整个应用通过app.provide()提供的值。

script setup：

• <script setup>：，是组合式 API 的编译时语法糖，旨在简化组件逻辑的编写，提高代码的可读性和开发效率。
• defineProps()：(propsDefinition)，用于在script setup中声明组件的props。
• defineEmits()：(emitsDefinition)，在script setup中声明组件可触发的事件。
• defineExpose()：(exposed)，在script setup中显式暴露组件实例的公共属性。
• defineSlots()：()，@vue3.3，是 script setup 中引入的类型声明函数，用于显式定义组件的插槽类型，为 TypeScript 提供类型检查和智能提示支持。它仅在类型推导阶段生效，不会产生运行时逻辑。
• useSlots()：()，用于在 setup() 函数中访问组件的 插槽内容。
• useAttrs()：()，用于在 setup() 或 script setup 中访问组件接收的未声明为 props 的属性，如 class、style、自定义属性和事件监听器。这些属性默认会被自动绑定到组件的根元素，除非设置 inheritAttrs: false，通过 useAttrs() 可以手动控制它们的传递。

组件

基本组件：

• <Transition>：mode? type? duration? appear?，用于在元素或组件的挂载和卸载DOM 时添加动画效果。它通过自动应用 CSS 类名或 JavaScript 钩子函数实现平滑过渡。
• <TransitionGroup>：tag? move-class? css? ，用于在列表元素的进入、离开和位置变化时应用动画效果，特别适用于动态列表的平滑过渡。
• <KeepAlive>：include? exclude? max?，用于缓存动态组件的实例，避免重复渲染，从而优化性能。
• <Teleport>：to disabled?，用于将子组件或 DOM 元素 “传送”到 DOM 中的其他位置，常用于处理模态框Modal、通知Toast、弹出菜单等需要脱离父容器布局的场景。
• <Suspense>：()，用于管理异步依赖如异步组件或异步数据加载的组件，允许在等待异步操作完成时展示备用内容如加载状态。

特殊元素：

• <component>：:is key?，用于动态渲染组件或 HTML元素，通过 :is 属性绑定目标类型。常用于实现标签页切换、动态组件加载等场景。
• is：string | Component，用于 动态组件 和 解决 HTML 原生元素的解析限制。
• <slot>：name?，用于实现组件内容分发(插槽)，在组合式API中，它允许父组件向子组件传递模板片段，并支持动态内容和作用域数据传递。
• <template>：，用于定义组件模板的核心标签。
• ref：ref变量，用于获取 DOM 元素或子组件实例引用的特殊属性。

TS

• defineComponent()：(options)，在定义Vue组件时提供类型推导的辅助函数。
• PropType<T>：<TS类型>，用于 定义复杂props类型 的类型工具，尤其在结合TS时，它可以明确指定 props 的具体结构或构造函数类型。

SSR

• createSSRApp()：(rootComponent,rootProps?)，用于 服务端渲染 (SSR) 的应用程序创建函数，它在组合式API中的使用与客户端渲染CSR类似，但需要遵循特定的 SSR 配置和生命周期规则。
• renderToString()：(app)，用于SSR的核心函数，它将 Vue 应用实例渲染为 HTML 字符串。在组合式API中，需结合 createSSRApp() 和 SSR 生命周期钩子使用。
• useId()：()，用于为无障碍属性或表单元素生成每个应用内唯一的 ID。

Vue2

指令

插值语法：

• mustache：{ {variable} }，最基础的数据绑定方式，用于将数据动态渲染为纯文本内容。

文本渲染：

• v-text：dataProperty，用于将数据作为纯文本动态渲染到元素中。
• v-html：dataProperty，用于将数据作为原始 HTML 解析并渲染到元素中。
• v-pre：空，用于跳过指定元素及其子元素的编译过程，直接保留原始内容。

绑定：

• v-bind：表达式，用于动态绑定HTML属性、组件prop或DOM属性到Vue实例的数据。
• v-on：表达式，用于监听 DOM 事件或自定义事件，并执行对应的 JavaScript 代码或方法。
• v-model：表达式，用于在表单输入元素或自定义组件上实现双向数据绑定，是 v-bind 和 v-on 的语法糖。

条件渲染：

• v-show：布尔表达式，用于通过切换 CSS 的 display 属性来控制元素的显示与隐藏。
• v-if、v-else、v-else-if：条件表达式，用于实现条件渲染，根据表达式的真假动态控制元素的渲染或销毁。元素会从DOM中移除。

列表渲染：

• v-for：表达式，用于基于数据源(数组、对象、数值范围)循环渲染多个元素或组件。
• key：唯一标识，用于标识虚拟 DOM 节点身份的特殊属性，它在 Vue 的响应式更新机制中起到优化渲染性能和维护组件状态的关键作用。

其他：

• v-once：空，用于标记元素或组件仅渲染一次，后续数据变化时不再更新。
• v-cloak：空，用于在 Vue 实例完成编译前隐藏未编译的模板内容，避免页面加载时出现原始模板符号({ { } })的短暂闪烁。必需配合 CSS 样式，CSS 必须全局生效。

全局API

应用实例：

• createApp()：(rootComponent, rootProps?)，用于创建一个 Vue 应用实例，是 Vue 3 应用开发的入口函数。
• app.use()：(plugin,...options?)，用于为 Vue 应用安装插件(如 Vue Router、Pinia等)或自定义功能扩展。
• app.mount()：(containerSelector | element)，将 Vue 应用实例挂载到 DOM 元素。
• app.component()：(name,component?)，用于全局注册或获取组件。
• app.directive()：(name, directive?)，用于注册或获取全局自定义指令。
• app.mixin()：(mixin)，用来全局注册一个混入对象。会将该对象的所有组件选项(data,methods,...)合并到每个组件中。

通用：

• nextTick()：(callback?)，通常用来在下一次 DOM 更新刷新后执行某些操作。

选项式API

渲染选项：

• template：HTML字符串 | ID选择器，定义组件结构的地方，通常用于描述组件的 HTML 结构。使用 Vue 的模板语法，可以让我们通过声明式的方式构建 UI，结合数据、指令和事件来动态地渲染内容。
• render：(h)，用于直接控制虚拟DOM生成的核心方法，常用于替代模板语法来实现更灵活的渲染逻辑。
• h()：(tag, props?, children?)，用于创建虚拟DOM节点VNode。

状态选项：

• data：() => ({})，返回组件响应式数据的对象。
• props：string[] | Object，声明从父组件接收的属性。可以是一个数组、一个对象，或者一个函数。
• computed：{ Getter|{Getter,Setter?},...}，用于声明依赖于其他数据的计算属性。
• methods：{Record<string,Function>}，用于定义组件的方法，通常用于事件处理、逻辑操作或触发副作用(如 API 请求)。所有方法会被混入组件实例，可通过 this 直接调用。
• watch：{attr,...}，监听响应式数据的变化，并在变化时执行自定义逻辑，如异步操作、复杂逻辑、副作用。
• emits：数组形式|对象形式，显式声明组件可以触发的自定义事件，用于子组件向父组件通信。
• expose：string[]，用于显式声明组件对外暴露的公共属性或方法，通过模板引用访问时，只能访问暴露的内容。

生命周期钩子：

• beforeCreate：()=>void，注册一个钩子，在Vue实例初始化之后立即调用。
• created：()=>void，注册一个钩子，在Vue实例完成数据观测(data、props初始化)后，但尚未挂载DOM时调用。
• beforeMount：()，类似 onBeforeMount()，注册一个钩子，在组件被挂载之前被调用。
• mounted：()，类似 onMounted()，注册一个钩子，在组件挂载完成后执行。
• beforeUpdate：()，类似 onBeforeUpdate()，注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。
• updated：()，类似 onUpdated()，注册一个钩子，在组件因为响应式状态变更而更新其 DOM 树之后调用。
• beforeUnmount：()，类似 onBeforeUnmount()，注册一个钩子，在组件实例被卸载之前调用。
• unmounted：()，类似 onUnmounted()，注册一个钩子，在组件实例被卸载之后调用。
• activated：()，类似 onActivated()，注册一个钩子，若组件实例是<KeepAlive>缓存树的一部分，当组件被插入到DOM中时调用。
• deactivated：()，类似 onDeactivated()，注册一个钩子，若组件实例是<KeepAlive>缓存树的一部分，当组件从DOM中被移除时调用。

组合选项：

• provide：()，类似 provide()，提供一个值，可以被后代组件注入。
• inject：()，类似 inject()，注入一个由祖先组件或整个应用通过app.provide()提供的值。
• mixins：()，类似 app.mixin()，用来全局注册一个混入对象。会将该对象的所有组件选项(data,methods,...)合并到每个组件中。
• extends：cpn，用于组件继承的选项，允许一个组件基于另一个组件进行扩展，复用其选项并覆盖或增强特定逻辑。

其他：

• name：string，用于显式声明组件的名称。主要用于调试、递归组件、动态组件、缓存控制。
• components：{name: cpn,...}，用于在当前组件中局部注册子组件，使得这些子组件可以在当前组件的模板中使用。
• derectives：()，类似 app.directive()，用于注册或获取全局自定义指令。

组件实例：

• $data：()，类似 data，返回组件响应式数据的对象。返回组件响应式数据的对象。
• $props：()，类似 props，声明从父组件接收的属性。可以是一个数组、一个对象，或者一个函数。
• $el：，Vue实例的内置属性，指向该实例关联的根DOM元素。在组件中对应组件模板的根元素。
• $options：，Vue实例的内置属性，用于访问组件定义的 原始选项对象。
• $slots：slot，Vue实例的内置属性，用于访问组件接收的 插槽内容。
• $refs：，Vue 实例的内置属性，用于直接访问模板中通过 ref 属性标记的 DOM元素 或 子组件实例。
• $parent：，Vue实例的内置属性，用于直接访问当前组件的 父组件实例。
• $watch()：()，类似 watch，监听响应式数据的变化，并在变化时执行自定义逻辑，如异步操作、复杂逻辑、副作用。
• $emit()：()，类似 emits，显式声明组件可以触发的自定义事件，用于子组件向父组件通信。
• $forceUpdate()：()，Vue实例的内置方法，用于 强制触发当前组件及其子组件的重新渲染的应急手段。
• $nextTick()：()，类似 nextTick()，通常用来在下一次 DOM 更新刷新后执行某些操作。

mitt

• mitt()：(all?)，用于创建一个事件总线实例，支持事件的监听、触发和移除。
• emitter.all：{eventName: Handler[]}，用于存储所有已注册的事件类型及其对应的事件处理器列表，用于调试或高级操作。
• emitter.on()：(type,handler)，用于 监听指定类型的事件，当该事件被触发时，执行绑定的处理函数。支持监听具体事件类型或使用通配符 * 监听所有事件。
• emitter.off()：(type,handler?)，用于 移除指定事件类型的监听器，支持移除单个处理函数或清空某事件类型的所有监听器，避免内存泄。
• emitter.emit()：(type,data?)，用于 触发指定类型的事件，并传递相关数据给所有监听该事件的处理器。

Vue Router

HTML5

History

• history.length：number，只读，返回一个表示会话历史中的条目数量的整数，包括当前加载的页面。
• history.state：State，用于访问/操作浏览器历史记录中的状态对象。主要用于SPA中的导航操作。
• history.back()：()，用于让浏览器回到历史记录中的前一个页面。可理解为模拟用户点击浏览器的“后退”按钮。
• history.forward()：()，用于让浏览器前进到历史记录中的下一个页面。可理解为模拟用户点击浏览器的“前进”按钮。
• history.go()：(delta)，用于在浏览器历史记录栈中进行前进或后退操作。
• history.pushState()：(state,title?,url?)，用于将一个新的历史记录条目添加到浏览器的历史记录栈中，而不会刷新页面。
• history.replaceState()：(state,title?,url?)，用于替换当前浏览器历史记录中的条目。
• onpopstate：(event)=>void，是一个浏览器的事件监听器，用于监听浏览器历史记录的变化。

Vuex

Pinia