企业官网建设流程全解析

电影网站如何做seo,从化网站建设方案,宿迁网络推广,windows 网站建设这里写目录标题一、Vue2和Vue3区别概览二、开发层表面差异#xff1a;直观感知的功能变化1、API 风格#xff1a;Options API vs Composition API2、模板语法#xff1a;更灵活的渲染能力#x1f525; 核心差异速查1. 根元素2. v-model3. v-if与v-for优先级4. 插槽语法5. 过…这里写目录标题一、Vue2和Vue3区别概览二、开发层表面差异直观感知的功能变化1、API 风格Options API vs Composition API2、模板语法更灵活的渲染能力 核心差异速查1. 根元素2. v-model3. v-if与v-for优先级4. 插槽语法5. 过滤器6. 事件修饰符7. 自定义指令8. 样式深度选择器变化示例Vue 2 → Vue 3 示例性能优势3、生命周期钩子调整与新增1. 钩子重命名重要2. Composition API 新格式3 对照表4、 关键点1. setup() 替代两个钩子2. 执行顺序3. 使用建议5、总结三、 Vue 2 与 Vue 3 框架层核心代码差异1、 核心架构对比2、 底层实现重构详解1. 响应式系统重写Vue 2Object.definePropertyVue 3Proxy2. 虚拟 DOM 优化Vue 2全量 DiffVue 3编译时优化 Patch Flag3. 编译器重构Vue 2运行时编译Vue 3编译时优化4. 源码架构重构vue 2MonolithicVue 3Monorepo 模块化5. TypeScript 全面支持Vue 2后期添加Vue 3原生支持6. 自定义渲染器Vue 2复杂实现Vue 3简化设计7、架构设计理念变化从 Options API 到 Composition API从运行时到编译时8、 总结1. 性能飞跃2. 开发体验3. 扩展性Vue 3 代表了 Vue 框架的一次重大飞跃。它在性能、开发体验特别是 Composition API 和 TS、灵活性和功能上都带来了显著的提升。虽然 Composition API 需要一些时间适应但其带来的逻辑组织、复用和维护性的优势对于构建现代、复杂的前端应用是至关重要的。对于新项目Vue 3 是毋庸置疑的选择对于老项目应积极评估并规划向 Vue 3 的迁移Vue2在2023年底已经停止维护。一、Vue2和Vue3区别概览特性Vue2Vue3架构响应式Options API选项式API主导Composition API组合式API主导 Options API响应式原理Object.defineProprety数据劫持Proxy数据代理性能良好显著提升构建工具Vue CLI基于 WebpackVite状态管理VueXPiniaTypeScript弱支持需额外配置原生支持Fragment单根节点限制支持多根节点Tree-Shaking有限支持原生支持Teleport无内置 ()Suspense无内置全局 APIVue 构造函数挂载全局配置创建应用实例createApp避免全局污染事件 API$on, $off, $once删除v-model1个组件仅1个 v-model支持多个 v-model (带参数)组件双向绑定更灵活指令钩子bind, inserted 等与组件生命周期对齐命名和语义更一致二、开发层表面差异直观感知的功能变化Vue2 与 Vue3 在日常开发中最直观的差异集中在 API 风格、模板语法、生命周期等高频使用场景这些变化直接影响开发效率与代码组织方式。1、API 风格Options API vs Composition API这是 Vue2 与 Vue3 最核心的开发体验差异决定了代码的组织逻辑。特性Vue2Options APIVue3Composition API Options API代码组织方式按 “选项” 划分代码将数据data、方法methods、计算属性computed等拆分到不同选项中逻辑分散在多个选项里。按 “功能逻辑” 聚合代码通过setup()函数或script setup语法将同一业务逻辑如表单验证、数据请求的代码集中在一起无需跨选项查找。代码复用依赖 Mixins、Scoped Slots 实现但存在命名冲突、逻辑来源不清晰等问题如多个 Mixins 都定义了handleClick方法。通过组合式函数Composables复用逻辑如useRequest()、useForm()逻辑来源明确无命名冲突可灵活组合。TypeScript 支持需通过vue-class-component等第三方库间接支持类型推导不完整配置复杂。原生支持 TypeScriptsetup()函数、响应式 APIref/reactive均能提供完整类型推导无需额外配置。代码示例对比实现 “计数器 数据请求” 的简单功能!--Vue2OptionsAPI逻辑分散在多个选项--templatediv{{count}}button clickadd1/button/divdiv{{user.name}}/div/templatescriptexportdefault{data(){return{count:0,user:{}// 类型无法自动推导}},methods:{add(){this.count// 依赖this上下文容易出现指向问题},fetchUser(){axios.get(/api/user).then(res{this.userres.data})}},mounted(){this.fetchUser()// 生命周期与方法分离}}/script!--Vue3script setupCompositionAPI逻辑聚合--templatediv{{count}}button clickadd1/button/divdiv{{user.name}}/div/templatescript setup langtsimport{ref,onMounted}fromvueimportaxiosfromaxios// 计数器逻辑聚合constcountref(0)// 明确的响应式变量TypeScript自动推导为number类型constadd(){count.value// 直接操作变量无this依赖}// 用户数据请求逻辑聚合constuserref{name:string}({name:})// 显式定义类型constfetchUserasync(){constresawaitaxios.get(/api/user)user.valueres.data}// 生命周期与逻辑绑定onMounted(fetchUser)/script2、模板语法更灵活的渲染能力Vue 3 模板更灵活、更强大、更简洁 核心差异速查1. 根元素Vue 2❌ 必须单根元素Vue 3✅ 支持多根Fragment2. v-modelVue 2单个v-model触发input事件Vue 3多个v-model:xxx触发update:xxx事件3. v-if与v-for优先级Vue 2v-forv-ifVue 3v-ifv-for4. 插槽语法Vue 2slotname、slot-scopeVue 3统一v-slot:name简写#name5. 过滤器Vue 2✅ 支持{{ text | filter }}Vue 3❌ 移除用方法或计算属性替代6. 事件修饰符Vue 2基本修饰符Vue 3新增.middle、.right移除按键码支持7. 自定义指令Vue 2bind、inserted、updateVue 3对齐组件生命周期mounted、updated8. 样式深度选择器Vue 2、/deep/、::v-deepVue 3统一:deep()、:slotted()、:global()变化示例Vue 2 → Vue 3 示例!-- Vue 2 --templatediv!-- 必须包裹 --Childv-modeldatatemplateslotheader标题/templatep{{ text | capitalize }}/p/Child/div/template!-- Vue 3 --templateChildv-model:datadata!-- 多根元素 --template#header标题/template!-- 新插槽语法 --p{{ capitalize(text) }}/p!-- 无过滤器 --/Child/template移除不必要的div包装插槽语法slot→#过滤器改为方法调用检查v-if/v-for逻辑使用新的v-model语法性能优势更小的包体积更好的Tree-shaking更快的渲染速度更少的内存占用结论Vue 3模板语法更现代化、更灵活新项目应直接使用老项目可逐步迁移。3、生命周期钩子调整与新增1. 钩子重命名重要Vue 2 → Vue 3 beforeDestroy → beforeUnmount destroyed → unmounted2. Composition API 新格式// Vue 2Options APIexportdefault{mounted(){/* ... */},destroyed(){/* ... */}}// Vue 3Composition APIimport{onMounted,onUnmounted}fromvuesetup(){onMounted((){/* ... */})onUnmounted((){/* ... */})}3 对照表Vue 2 钩子Vue 3 Options APIVue 3 Composition APIbeforeCreate✅ 保留❌ 移除用 setup()created✅ 保留❌ 移除用 setup()beforeMount✅ 保留onBeforeMountmounted✅ 保留onMountedbeforeUpdate✅ 保留onBeforeUpdateupdated✅ 保留onUpdatedbeforeDestroybeforeUnmountonBeforeUnmountdestroyedunmountedonUnmountedactivated✅ 保留onActivateddeactivated✅ 保留onDeactivatederrorCaptured✅ 保留onErrorCaptured4、 关键点1. setup() 替代两个钩子// Vue 2beforeCreate(){/* 组件初始化前 */}created(){/* 组件创建完成 */}// Vue 3setup(){/* 替代上面两个钩子 */}2. 执行顺序// 组件启动setup()→ beforeMount → mounted// 组件销毁beforeUnmount → unmounted3. 使用建议新项目用 Composition API (onXxx)老项目先改名称 (destroyed→unmounted)清理资源在onUnmounted中清理定时器/监听器5、总结“销毁改卸载组合API用on前缀setup替代创建钩子”关键变化Vue3移除了beforeDestroy/destroyed统一为beforeUnmount/unmounted语义更准确同时Composition API的钩子需从vue中导入避免与Options API混淆。三、 Vue 2 与 Vue 3 框架层核心代码差异1、 核心架构对比维度Vue 2Vue 3源码组织单文件、Flow 类型模块化、TypeScript响应式系统Object.definePropertyProxy虚拟 DOM全量 DiffPatch Flag 优化 Diff模板编译运行时编译编译时优化源码体积完整打包模块化、Tree-shaking性能指标基准参考快 1.3-2 倍2、 底层实现重构详解1. 响应式系统重写Vue 2Object.defineProperty// 核心原理functiondefineReactive(obj,key,val){Object.defineProperty(obj,key,{enumerable:true,configurable:true,get(){// 依赖收集dep.depend()returnval},set(newVal){if(newValval)return// 触发更新valnewVal dep.notify()}})}// ❌ 局限// 1. 无法检测对象新增/删除属性// 2. 数组变异需要拦截原型方法// 3. 需要 Vue.set/Vue.delete// 4. 递归遍历性能开销大Vue 3Proxy// 核心原理functionreactive(obj){returnnewProxy(obj,{get(target,key,receiver){// 依赖收集track(target,key)returnReflect.get(target,key,receiver)},set(target,key,value,receiver){// 触发更新constresultReflect.set(target,key,value,receiver)trigger(target,key)returnresult},deleteProperty(target,key){// 支持删除属性constresultReflect.deleteProperty(target,key)trigger(target,key)returnresult}})}// ✅ 优势// 1. 完整对象监听// 2. 更好的数组支持// 3. 支持 Map、Set// 4. 惰性代理用到才监听// 5. 性能更好2. 虚拟 DOM 优化Vue 2全量 Diff// 简单对比算法functionpatch(oldVNode,newVNode){// 全量比较所有属性if(oldVNode.tag!newVNode.tag){// 替换整个节点}// 深度递归比较子节点updateChildren(oldVNode.children,newVNode.children)}// ❌ 问题// 1. 不必要的递归// 2. 静态内容重复比对// 3. 组件更新粒度粗Vue 3编译时优化 Patch Flag// 编译时生成优化提示constvnode{type:div,props:{id:app,class:normalizeClass({active:isActive})},children:[{type:h1,children:静态标题,patchFlag:1},// 静态{type:p,children:dynamicText,patchFlag:2},// 文本动态{type:button,props:{onClick:handler},patchFlag:8// 只有事件变化}]}// Patch Flag 类型constPatchFlags{TEXT:1,// 动态文本CLASS:2,// 动态 classSTYLE:4,// 动态 stylePROPS:8,// 动态 props不含 class/styleFULL_PROPS:16,// 动态 key 或其他HYDRATE_EVENTS:32}// ✅ 优化效果// 1. 静态节点提升只创建一次// 2. 动态节点标记只更新变化部分// 3. 树结构打平减少递归层级// 4. 事件缓存避免重复绑定3. 编译器重构Vue 2运行时编译// 主要工作// 1. 解析模板 → AST// 2. 优化静态节点// 3. 生成渲染函数运行时// 生成代码示例functionrender(){with(this){return_c(div,{attrs:{id:app}},[_c(h1,[_v(_s(message))]),_c(button,{on:{click:onClick}},[_v(点击)])])}}// ❌ 问题// 1. 运行时编译开销// 2. with 语句性能差// 3. 无法深度优化Vue 3编译时优化// 主要优化// 1. 模块化编译器vue/compiler-core// 2. 源码映射Source Map// 3. 更好的错误提示// 4. Tree-shaking 支持// 生成的优化代码import{createElementVNodeas_createElementVNode,toDisplayStringas_toDisplayString,openBlockas_openBlock,createElementBlockas_createElementBlock}fromvueexportfunctionrender(_ctx,_cache){return(_openBlock(),_createElementBlock(div,{id:app},[// 静态节点提升到外部_hoisted_1,// 动态节点带 Patch Flag_createElementVNode(p,null,_toDisplayString(_ctx.message),1/* TEXT */)]))}// 静态节点提升到渲染函数外const_hoisted_1/*#__PURE__*/_createElementVNode(h1,null,静态标题,-1/* HOISTED */)4. 源码架构重构vue 2Monolithicvue/ ├── src/ │ ├── core/ # 核心 │ ├── compiler/ # 编译器 │ ├── platforms/ # 平台相关 │ └── shared/ # 共享代码 └── dist/ ├── vue.js # 完整版带编译器 ├── vue.runtime.js # 运行时版 └── vue.min.js # 压缩版 // ❌ 问题 // 1. 代码耦合度高 // 2. Tree-shaking 困难 // 3. 维护成本高Vue 3Monorepo 模块化vue-next/ ├── packages/ │ ├── compiler-core/ # 编译核心 │ ├── compiler-dom/ # DOM 编译 │ ├── runtime-core/ # 运行时核心 │ ├── runtime-dom/ # DOM 运行时 │ ├── reactivity/ # 响应式系统 ← 可单独使用 │ ├── shared/ # 共享工具 │ └── vue/ # 主包整合 └── scripts/ ├── build.js # 构建脚本 └── dev.js # 开发脚本 // ✅ 优势 // 1. 模块化设计 // 2. 更好的 Tree-shaking // 3. 响应式系统可独立使用 // 4. 更容易维护和扩展5. TypeScript 全面支持Vue 2后期添加// 需要额外的类型声明importVuefromvue// 组件选项类型exportdefaultVue.extend({props:{msg:String},data(){return{count:0}}})// ❌ 问题// 1. this 类型推导有限// 2. 装饰器语法复杂// 3. 与 Vue API 集成度低Vue 3原生支持// 源码完全用 TypeScript 编写import{defineComponent,ref}fromvueexportdefaultdefineComponent({props:{msg:{type:String,required:true}},setup(props){// 完美的类型推断constcountref(0)// props 类型安全console.log(props.msg.toUpperCase())return{count}}})// ✅ 优势// 1. 源码即类型// 2. 更好的 IDE 支持// 3. Composition API 类型友好// 4. 减少运行时错误6. 自定义渲染器Vue 2复杂实现// 需要实现完整渲染接口classMyRenderer{createElement(){/* ... */}insert(){/* ... */}remove(){/* ... */}// ... 数十个方法}// 使用复杂Vue.createRendererfunction(){returnnewMyRenderer()}Vue 3简化设计// 核心接口简化import{createRenderer}fromvue/runtime-coreconst{createApp}createRenderer({patchProp,// 处理属性insert,// 插入节点remove,// 移除节点createElement,// 创建元素createText,// 创建文本createComment,// 创建注释setText,// 设置文本setElementText,// 设置元素文本parentNode,// 父节点nextSibling// 下一个兄弟节点})// 轻松支持多平台// - vue/runtime-dom (Web)// - vue/runtime-test (测试)// - vue/runtime-canvas (Canvas)// - 自定义渲染器如小程序、Native7、架构设计理念变化从 Options API 到 Composition API// Vue 2基于选项的组织// 逻辑分散在 data、methods、computed 中exportdefault{data(){return{x:0,y:0}},mounted(){window.addEventListener(mousemove,this.update)},destroyed(){window.removeEventListener(mousemove,this.update)},methods:{update(e){this.xe.x;this.ye.y}}}// Vue 3基于逻辑的组合// 相关逻辑组织在一起import{ref,onMounted,onUnmounted}fromvuefunctionuseMouse(){constxref(0)constyref(0)constupdatee{x.valuee.x;y.valuee.y}onMounted(()window.addEventListener(mousemove,update))onUnmounted(()window.removeEventListener(mousemove,update))return{x,y}}// 逻辑复用更自然exportdefault{setup(){const{x,y}useMouse()return{x,y}}}从运行时到编译时// 编译时发现更多优化机会constCompilerOptimizations{静态提升:将静态节点提到渲染函数外,树结构打平:减少虚拟DOM层级,缓存事件处理器:避免重复创建函数,PatchFlag标记:只更新动态部分,内联函数:减少函数调用开销}8、 总结1. 性能飞跃✅Proxy 响应式性能更好支持完整对象✅编译时优化静态提升、Patch Flag✅Tree-shaking按需导入包更小2. 开发体验✅TypeScript 原生支持更好的类型推导✅组合式 API逻辑复用更灵活✅模块化设计维护和扩展更容易3. 扩展性✅自定义渲染器支持多平台✅独立响应式包可单独使用✅渐进式升级兼容 Vue 2 大部分 APIVue 3 是一次彻底的重构在保持 API 兼容性的同时拥抱现代 JavaScript 特性通过架构层面的优化实现了性能的质的飞跃。