Vue 2 和 Vue 3 的核心差异和改动点的全面对比

Vue3和Vue2的差异总结对比（含代码案例）

Vue.js 3相比Vue.js 2带来了一些语法上的变化，这些变化主要是为了提高性能和类型安全性，同时也为我们提供更好的开发体验。

Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建， 并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。 vuejs版本在2.7之后版本我们认为他是优化和重构的性能语法更优秀且易用的新版本, 我们一般就认为他是vue3,相比较过去的vue2的旧版本,它更加容易维护,具有更加丰富的API和语法糖, 也支持了typescript技术的使用.当然它一些新特性和功能的源码实现也和旧版相比较差异较大

1、配置式中存在。

方法直接在对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。这个方法允许你精确地添加或修改对象的属性，包括属性的值、可枚举性、可写性、可配置性等。：用于创建计算属性。计算属性是基于响应式数据派生出的新数据，当依赖的数据变化时，计算属性会自动更新。被用来劫持对象属性的 getter 和 setter，从而在数据发生变化时触发视图的更新。在 setup 函数中，你可以定义响应式数据、计算属性、方法等，并返回它们供模板使用。：用于侦听响应式数据的变化，并在数据变化时执行相应的回调函数。

本文讲解了vue2和vue3的区别，包括：生命周期、多节点、虚拟DOM和diff算法、响应式多个方面。

vue3相比vue2

Vue2升级Vue3带来更快的改动主要有两方面1、vue3重新审视了 vdom，更改了自身对于 vdom的对比算法。vdom从之前的每次更新，都进行一次完整遍历对比，改为了切分区块树，来进行动态内容更新。也就是只更新 vdom的绑定了动态数据的部分，把速度提高了6倍；2、 把 definePerproty改为了 proxy，对于 JavaScript引擎更加友好，响应更加高效。本篇文件先写到这后续我们在深入Vue3升级改动。欢迎各位大神关注《全栈技术圈》，让技术更加简单易懂。

摘要：ref 不会递归处理对象的嵌套属性，仅对顶层数据进行响应式处理。若需深度响应式，应使用 reactive。示例中，ref 存储的嵌套对象 profile 修改后视图不会更新，而 reactive 能确保嵌套属性（如 age）触发更新。总结：ref 适合基本类型或简单对象（需 .value），reactive 适合复杂对象（自动深度响应式）。

Vue中ref与reactive的核心差异解析：ref通过包装对象(value属性)处理基础类型和对象，而reactive专为复杂对象设计，基于Proxy实现属性级响应。主要区别在于：1)数据类型适用性-ref全能，reactive仅对象；2)访问方式-ref需.value操作，reactive直接访问；3)响应机制-ref追踪.value变化，reactive代理属性访问。选择依据：基础类型用ref，复杂对象用reactive，组合式API中推荐统一使用ref提升代码一致性。理解这些差异能避免响应式失效问

本文详细介绍了Vue 3的实例选项语法，包括数据选项、DOM选项、生命周期钩子等核心概念。通过一个完整的待办事项应用示例，展示了各选项的实际应用场景，如data定义响应式数据、methods编写组件方法、computed计算属性、watch监听数据变化等。示例代码包含详细注释，涵盖组件注册、指令定义、事件处理等常见功能，并演示了从父组件到子组件的数据传递和通信方式。文章适合Vue 3初学者全面了解组件选项的用法和组合方式。

【代码】（一）vue3项目初始化(create-vue)

单点登录(SSO)系统技术实现摘要（148字） 本文展示了基于JWT令牌的SSO系统前端实现方案。核心流程包括：1）应用入口组件通过Token验证用户状态，未认证时重定向至统一登录页；2）登录页面处理认证请求，成功后携带Token回调至原应用。系统采用Vue3框架实现，关键点包括：Token存储于localStorage、认证状态管理、错误处理机制及安全回调URL处理。代码示例完整呈现了SSO的客户端交互流程，包括登录验证、Token传递和登出处理，体现了"一次认证，多系统通行"的设计理

数据是自己mock的 可以替换为接口！

然后再项目最外层和inde.html同级目录下新建.env.development和.env.production两个项目并且定义你想要的环境变量名:注意要以VITE_开头。// console.log('Map Token:', env.VITE_APP_MAP_TOKEN) // 应该能正常输出。// 使用 loadEnv 加载环境变量，第二个参数是项目根目录路径，第三个参数是要匹配的前缀。然后vite.config.js文件。index.htm里面使用。首先我们需要下载一个插件。