Vue 笔记

主题

Vue ​

应用入口/全局API ​

分类Composition / Options API（Vue3）Options API（Vue2）
客户端渲染createApp() v3.0new Vue() v2.0
挂载app.mount() v3.0$mount() v2.0
卸载app.unmount() v3.0$destroy() v2.0
-app.onUnmount() v3.5同上
配置设置app.config v3.0Vue.config v2.0
版本app.version v3.0Vue.version v2.0

创建组件 ​

分类Composition API（Vue3）Options API（Vue3）Options API（Vue2）
创建-SFC v3.0SFC v2.0
---functional v2.5
functional v2.0
-defineComponent() v3.0-new Vue() v2.0
Vue.extend() v2.0
注册app.component() v3.0-Vue.component() v2.0
components v2.0
懒加载defineAsyncComponent() v3.0-import() v2.0/ES2020
\-加载状态defineAsyncComponent() v3.0-loading v2.3
\-回退方案<Suspense>--
\-动态组件<component> v3.0-<component> v2.0
性能优化<KeepAlive> v3.0-<keep-alive> v2.0
\-记忆渲染结果-v-memo v3.2-
\-渲染一次-v-once v3.0v-once v2.0

组件生命周期方法 ​

分类Composition API（Vue3）Options API（Vue3）Options API（Vue2）
创建无beforeCreate() v3.0beforeCreate() v2.0
-无created() v3.0created() v2.0
挂载onBeforeMount() v3.0beforeMount() v3.0beforeMount() v2.0
-onRenderTracked() - DEV v3.0renderTracked() - DEV v3.0无
-onMounted() v3.0mounted() v3.0mounted() v2.0
更新onRenderTriggered() - DEV v3.0renderTriggered() - DEV v3.0无
-onBeforeUpdate() v3.0beforeUpdate() v3.0beforeUpdate() v2.0
-onDeactivated() v3.0deactivated() v3.0deactivated() v2.0
-onActivated() v3.0activated() v3.0activated() v2.0
-onUpdated() v3.0updated() v3.0updated() v2.0
卸载onBeforeUnmount() v3.0beforeUnmount() v3.0beforeDestroy() v2.0
-onUnmounted() v3.0unmounted() v3.0destroyed() v2.0
错误捕获onErrorCaptured() v3.0errorCaptured() v3.0errorCaptured() v2.5
SSRonServerPrefetch() v3.0serverPrefetch() v3.0无

组件属性 ​

分类Composition API（Vue3）Options API（Vue3/2）
声明defineProps() v3.0props v2.0
属性默认值withDefaults() v3.0同上
读取useAttrs() v3.0$attrs v2.4
-var props v3.0$props v2.2
绑定v-bind v3.0v-bind v2.0
透传defineOptions() v3.3inheritAttrs v2.4
-app.config.globalProperties v3.0Vue.prototype v2.0
-app.config.optionMergeStrategies v3.0Vue.config.optionMergeStrategies v2.0
-$options v3.0$options v2.0
Children 属性-$children v2.0

组件状态 ​

分类Composition API（Vue3）Options API（Vue3）Options API（Vue2）
声明ref() v3.0data v3.0data v2.0
读取-$data v3.0$data v2.0
更新computed() v3.0computed v3.0computed v2.0
监听watch() v3.0watch v3.0watch v2.0
--$watch() v3.0$watch() v2.0
-watchEffect() v3.0--
-watchPostEffect() v3.0--
-watchSyncEffect() v3.0--
-onWatcherCleanup() v3.5--
-effectScope() v3.0--
-getCurrentScope() v3.0--
-onScopeDispose() v3.0--

组件事件 ​

分类Composition API（Vue3）Options API（Vue3）Options API（Vue2）
事件及类型声明defineEmits() v3.0emits v3.0emits v2.7
\-回调-methods v3.0methods v2.0
触发var emit() v3.0$emit() v3.0$emit() v2.0
---$listeners v2.4
绑定-@ / v-on v3.0@ / v-on v2.0
--@/v-on$on v2.0
--.once v3.0$once v2.0
--组件卸载自动完成$off
DOM 事件对象-$event v3.0$event v2.0

表单输入 ​

分类Composition API（Vue3）Options API（Vue3）Options API（Vue2）
双向绑定-v-model v3.0v-model v2.0
-defineModel() v3.4
useModel() v3.4		-model v2.2

组件渲染 ​

模板 ​

分类Composition API（Vue3）Options API（Vue3）Options API（Vue2）
模板-template v3.0template v2.0
--<template> v3.0<template> v2.0
-app.config.compilerOptions v3.0-Vue.compile() v2.0
-.whitespace v3.0--
---name v2.0
-.delimiters v3.0-delimiters v2.0
-.comments v3.0-comments v2.4
Web Componentsapp.config.isCustomElement v3.0-Vue.config.ignoredElements v2.0
-defineCustomElement() v3.0--
-customElements.define() v3.0--
-useShadowRoot() v3.5--
-useHost() v3.5$host() v3.5-
渲染函数-render() v3.0render() v2.0
--h() v3.0createElement() v2.0
h() v2.0
--mergeProps() v3.0-
--resolveComponent() v3.0-
--resolveDirective() v3.0-
--withDirectives() v3.0-
--withModifiers() v3.0-
--isVNode() v3.0-
--cloneVNode() v3.0-
强制重新渲染-$forceUpdate() v3.0$forceUpdate() v2.0
服务端渲染createSSRApp() v3.0-$isServer v2.0
vue-server-renderer v2.2
-useSSRContext() v3.0--
-renderToString() v3.0--
-renderToNodeStream() v3.0--
-pipeToNodeWritable() v3.0--
-renderToWebStream() v3.0--
-pipeToWebWritable() v3.0--
-renderToSimpleStream() v3.0--
自定义渲染createRenderer() v3.0--

指令 ​

分类Composition API（Vue3）Options API（Vue3）Options API（Vue2）
条件渲染-v-if v3.0v-if v2.0
--v-else-if v3.0v-else-if v2.0
--v-else v3.0v-else v2.0
列表渲染-v-for v3.0 / :key v3.0v-for v2.0 / :key v2.0
显示隐藏-v-show v3.0v-show v2.0
文本渲染-v-text v3.0v-text v2.0
HTML渲染-v-html v3.0v-html v2.0
跳过编译-v-pre v3.0v-pre v2.0
隐藏未编译插值-v-cloak v3.0v-cloak v2.0
渲染一次-v-once v3.0v-once v2.0
缓存模板-v-memo v3.2-
注册指令-directives v3.0directives v2.0
-app.directive() v3.0-Vue.directive() v2.0

插槽 ​

分类Composition API（Vue3）Options API（Vue3）Options API（Vue2）
出口-<slot> v3.0<slot> v2.0
声明defineSlots() v3.3slots v3.3-
命名插槽-同上slot v2.0
作用域插槽-同上slot-scope v2.5
--同上scope v2.0
读取useSlots() v3.0$slots v3.0$slots v2.0
---$scopedSlots v2.1
绑定-v-slot v3.0v-slot v2.6

组件上下文 ​

依赖注入

分类Composition API（Vue3）Options API（Vue3）Options API（Vue2）
创建和提供provide() v3.0provide v3.0provide v2.2
-app.provide() v3.0--
-app.runWithContext() v3.3--
读取和订阅---
-inject() v3.0inject v3.0inject v2.2
-hasInjectionContext() v3.3--

DOM 实例 ​

分类Composition API（Vue3）Options API（Vue3）Options API（Vue2）
引用-ref v3.0ref v2.0
\-获取ref.value$refs v3.0$refs v2.0
--$el v3.0$el v2.0
\-立即获取 DOMnextTick() v3.0$nextTick() v3.0Vue.nextTick() v2.0
$nextTick() v2.0
\-查找-$root v3.0$root v2.0
--$parent v3.0$parent v2.0
\-挂载--el v2.0
组件引用useTemplateRef() v3.5--
\-属性公开defineExpose() v3.0expose v3.0-
\-挂载<Teleport> v3.0--

过渡和动画 ​

分类Vue3Vue2
过渡&动画<Transition><transition>
-<TransitionGroup><transition-group>

异常处理 ​

分类Composition API（Vue3）Options API（Vue3）Options API（Vue2）
类型检查TypeScript-类型校验
错误捕获onErrorCaptured() v3.0errorCaptured() v3.0errorCaptured() v2.5
全局设置app.config.errorHandler v3.0-Vue.config.errorHandler v2.0
-app.config.warnHandler v3.0-Vue.config.warnHandler v2.4
-app.config.
throwUnhandledErrorInProduction v3.5		--
Vue 日志与警告--Vue.config.silent v2.0
Vue 生产提示--Vue.config.productionTip v2.2

架构设计 ​

可复用性 ​

分类Composition API（Vue3）Options API（Vue3）Options API（Vue2）
插件app.use() v3.0-Vue.use() v2.0
指令-directives v3.0directives v2.0
-app.directive() v3.0-Vue.directive() v2.0
依赖注入provide() v3.0provide v3.0provide v2.2
-app.provide() v3.0-
-app.runWithContext() v3.3-
-inject() v3.0inject v3.0inject v2.2
-hasInjectionContext() v3.3--
混入-mixins v3.0mixins v2.0
-app.mixin() v3.0-Vue.mixin() v2.0
扩展-extends v3.0extends v2.0
---Vue.extend() v2.0
过滤器--filters v2.0
---Vue.filter() v2.0

响应式 ​

分类Composition API（Vue3） - ProxyOptions API（Vue2）- Object.defineProperty
响应式对象-Vue.observable() v2.6
添加属性-Vue.set() v2.0
\--$set() v2.0
删除属性-Vue.delete() v2.0
\--$delete() v2.0
引用ref() v3.0data
\-isRef() v3.0-
\-unref() v3.0-
\-toRef() v3.3-
\-toRefs() v3.0-
\-toValue() v3.3-
\-shallowRef() v3.0-
\-triggerRef() v3.0-
\-customRef() v3.0-
代理isProxy() v3.0-
\- 响应式对象reactive() v3.0-
\-shallowReactive() v3.0-
\-isReactive() v3.0-
\- 只读对象readonly() v3.0-
\-shallowReadonly() v3.0-
\-isReadonly() v3.0-
原始对象toRaw() v3.0-
\-markRaw() v3.0-

性能优化 ​

分类Composition / Options API（Vue3）Options API（Vue2）
分析app.config.performance v3.0Vue.config.performance v2.2
-Chrome DevTools - performance-
--Vue.config.devtools v2.0
-Vue DevTools - performance-
优化--
\-逻辑优化v-once-
-v-memo-
-key-
-computed()-
-watchEffect()-
-onWatcherCleanup()-
-<KeepAlive><keep-alive>
-shallowRef()-
-shallowReactive()-
\-资源加载defineAsyncComponent()import()

版权所有 © 2024-present yincw