认识Vue
文章目录
- 认识Vue
- 一、vue是什么
- 二、Vue核心特性
- 数据驱动（MVVM)
- 组件化
- 指令系统
- 三、Vue跟传统开发的区别
- 1. **开发模式：MVVM vs 模板驱动**
- 2. **组件化开发**
- 3. **状态管理**
- 4. **路由管理**
- 5. **构建与工程化**
- 6. **性能优化**
- 7. **学习曲线**
- 8. **适用场景**
- 总结
- 四、Vue和React对比
- **1. 核心设计理念**
- **2. 开发模式**
- **3. 生态系统**
- **4. 性能优化**
- **5. 学习曲线**
- **6. 典型应用场景**
- **7. 代码示例对比**
- **计数器实现**
- **总结与选择建议**
- **选择建议**：
- 相同点
- 区别
一、vue是什么
Vue.js（/vjuː/，或简称为Vue）是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。2016年一项针对JavaScript的调查表明，Vue有着89%的开发者满意度。在GitHub上，该项目平均每天能收获95颗星，为Github有史以来星标数第3多的项目同时也是一款流行的JavaScript前端框架，旨在更好地组织与简化Web开发。Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互PS: Vue作者尤雨溪是在为AngularJS工作之后开发出了这一框架。他声称自己的思路是提取Angular中为自己所喜欢的部分，构建出一款相当轻量的框架最早发布于2014年2月
二、Vue核心特性
数据驱动（MVVM)
MVVM`表示的是 `Model-View-ViewModel
- Model：模型层，负责处理业务逻辑以及和服务器端进行交互
- View：视图层：负责将数据模型转化为UI展示出来，可以简单的理解为HTML页面
- ViewModel：视图模型层，用来连接Model和View，是Model和View之间的通信桥梁
组件化
1.什么是组件化一句话来说就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式，在Vue中每一个.vue文件都可以视为一个组件2.组件化的优势
- 降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求，例如输入框，可以替换为日历、时间、范围等组件作具体的实现
- 调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或者根据报错的组件快速定位问题，之所以能够快速定位，是因为每个组件之间低耦合，职责单一，所以逻辑会比分析整个系统要简单
- 提高可维护性，由于每个组件的职责单一，并且组件在系统中是被复用的，所以对代码进行优化可获得系统的整体升级
指令系统
解释：指令 (Directives) 是带有 v- 前缀的特殊属性作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
- 常用的指令
- 条件渲染指令
v-if - 列表渲染指令
v-for - 属性绑定指令
v-bind - 事件绑定指令
v-on - 双向数据绑定指令
v-model
- 条件渲染指令
没有指令之前我们是怎么做的？是不是先要获取到DOM然后在…干点啥
三、Vue跟传统开发的区别
1. 开发模式：MVVM vs 模板驱动
- Vue：
采用 MVVM 模式（Model-View-ViewModel），通过数据驱动视图。- 数据绑定：双向绑定（
v-model）自动同步数据和视图。 - 响应式系统：数据变化自动触发视图更新，无需手动操作 DOM。
- 虚拟 DOM：高效更新真实 DOM，减少性能损耗。
- 数据绑定：双向绑定（
- 传统开发：
通常采用 MVC 模式或直接操作 DOM：- 手动 DOM 操作：通过
document.getElementById或 jQuery 直接修改 DOM。 - 事件驱动：需手动绑定事件监听器（如
onclick）。 - 数据与视图分离：数据更新后需手动刷新页面或局部 DOM。
- 手动 DOM 操作：通过
2. 组件化开发
- Vue：
- 组件化架构：将 UI 拆分为独立组件（
.vue文件），每个组件包含模板、逻辑、样式。 - 单文件组件：代码结构清晰，支持作用域 CSS（
scoped）。 - 复用性：组件可跨项目复用，支持 Props 和 Events 通信。
- 组件化架构：将 UI 拆分为独立组件（
- 传统开发：
- 代码分散：HTML、CSS、JavaScript 分离，复用困难。
- 全局污染：传统 jQuery 插件易导致变量命名冲突。
- 组件化弱：需依赖第三方库（如 Bootstrap）实现组件化。
3. 状态管理
- Vue：
- Vuex/Pinia：集中式状态管理，适合复杂应用。
- 响应式数据：状态变化自动同步到视图。
- 模块化：支持拆分模块管理大型状态。
- 传统开发：
- 全局变量：依赖
window对象或单例模式管理状态。 - 事件广播：通过
jQuery.trigger或自定义事件传递数据。 - 维护困难：状态分散，调试复杂。
- 全局变量：依赖
4. 路由管理
- Vue：
- Vue Router：声明式路由，支持动态路由、嵌套路由、懒加载。
- SPA 体验：单页面应用，页面切换无刷新，用户体验流畅。
- 传统开发：
- 多页面应用（MPA）：每次跳转需重新加载页面。
- 哈希路由：通过
window.location.hash模拟路由，体验较差。 - 后端路由依赖：需后端配合返回不同 HTML 页面。
5. 构建与工程化
- Vue：
- 现代化工具链：支持 Vue CLI、Vite 等，提供模块化、热更新、代码分割。
- TypeScript 支持：原生兼容 TypeScript，强类型提升代码质量。
- 生态丰富：Vue DevTools、Vuetify 等工具和组件库。
- 传统开发：
- 构建简单：依赖 Webpack 基础配置或无构建工具。
- 模块化有限：需手动实现 AMD/CommonJS 模块化。
- 调试困难：无虚拟 DOM，需手动跟踪 DOM 变化。
6. 性能优化
- Vue：
- 虚拟 DOM：批量更新 DOM，减少重绘和回流。
- 异步组件：按需加载组件，优化首屏性能。
- Tree Shaking：现代打包工具支持按需引入代码。
- 传统开发：
- 频繁 DOM 操作：直接操作真实 DOM，性能瓶颈明显。
- 无优化手段：依赖开发者手动优化（如缓存 DOM 查询）。
7. 学习曲线
- Vue：
- 结构化学习：官方文档完善，提供 CLI 工具快速上手。
- 渐进式框架：可逐步学习 Composition API、Vuex 等高级特性。
- 传统开发：
- 底层知识要求：需熟悉 DOM、事件循环、AJAX 等。
- 兼容性问题：需处理浏览器兼容性（如 IE）。
8. 适用场景
- Vue：
- 复杂单页面应用（SPA）。
- 需要快速迭代和维护的中大型项目。
- 强调开发效率和代码可维护性的团队。
- 传统开发：
- 简单静态页面或小型项目。
- 需要直接操作 DOM 的特殊场景（如游戏、复杂动画）。
- 后端渲染模板（如 Django/Jinja2）。
总结
| 维度 | Vue | 传统开发 |
|---|---|---|
| 架构 | MVVM + 组件化 | MVC/MVP + 分散代码 |
| 数据绑定 | 双向绑定，响应式 | 手动操作 DOM |
| 性能 | 虚拟 DOM 优化 | 直接操作真实 DOM |
| 工程化 | 现代化工具链，TypeScript 支持 | 依赖 Webpack 基础配置 |
| 适用场景 | 中大型 SPA，复杂交互 | 简单页面，静态内容 |
选择建议：
- 若项目复杂度高、需长期维护，Vue 的组件化、状态管理和工程化能力显著提升效率。
- 若为简单页面或需直接操作 DOM（如游戏），传统开发可能更直接。
总结就是：
- Vue所有的界面事件，都是只去操作数据的，Jquery操作DOM
- Vue所有界面的变动，都是根据数据自动绑定出来的，Jquery操作DOM
四、Vue和React对比
Vue 和 React 是当前最流行的两大前端框架，它们在设计理念、开发模式、生态系统等方面有显著差异。以下是两者的详细对比：
1. 核心设计理念
| 维度 | Vue | React |
|---|---|---|
| 核心思想 | 渐进式框架，强调“渐进式增强” | 专注于视图层，倡导“组合式开发” |
| 数据绑定 | 双向绑定（v-model） | 单向数据流（通过 props 传递） |
| 模板语法 | 基于 HTML 的模板，类似原生 JS | JSX（JavaScript + XML 混合语法） |
| 响应式原理 | 基于 Object.defineProperty | 基于 Proxy（React 18+） |
2. 开发模式
| 维度 | Vue | React |
|---|---|---|
| 组件化 | 单文件组件（.vue 文件） | 函数组件/类组件（JS/TS 文件） |
| 状态管理 | Vuex（官方状态管理库） | Redux/MobX/Recoil（第三方库） |
| 路由管理 | Vue Router（官方路由库） | React Router（第三方库） |
| 构建工具 | Vue CLI / Vite | Create React App / Vite |
3. 生态系统
| 维度 | Vue | React |
|---|---|---|
| 社区生态 | 官方维护完善（如 Pinia、Vuetify） | 庞大的第三方库（Redux、React Router、Next.js） |
| 学习资源 | 中文文档友好，适合新手 | 英文资源丰富，学习曲线较陡峭 |
| 企业应用 | 国内企业使用较多（如阿里、腾讯） | 全球范围内广泛应用（如 Meta、Netflix） |
4. 性能优化
| 维度 | Vue | React |
|---|---|---|
| 虚拟 DOM | 自动优化，差异算法高效 | 手动优化（React.memo、useMemo） |
| 服务端渲染 | Nuxt.js（官方 SSR 框架） | Next.js（官方 SSR 框架） |
| Tree Shaking | 支持（Vue 3） | 支持（React 18+） |
5. 学习曲线
| 维度 | Vue | React |
|---|---|---|
| 入门难度 | 低（模板语法直观） | 中高（需掌握 JSX、Hooks 等概念） |
| 灵活性 | 配置较少，约定优于配置 | 高度灵活，需自行决策架构 |
| TypeScript | 原生支持良好 | 官方推荐，生态完善 |
6. 典型应用场景
| 场景 | Vue | React |
|---|---|---|
| 快速开发 | 适合中小型项目，快速迭代 | 适合复杂大型项目，需长期维护 |
| 企业级应用 | 国内企业（如阿里云控制台） | 全球企业（如 Meta、Instagram） |
| 跨平台开发 | Uni-app（Vue 生态） | React Native（React 生态） |
7. 代码示例对比
计数器实现
Vue：
<template><button @click="count++">{{ count }}</button>
</template><script setup>
let count = ref(0);
</script>
React：
import { useState } from 'react';function Counter() {const [count, setCount] = useState(0);return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
总结与选择建议
| 框架 | 优势 | 劣势 | 推荐场景 |
|---|---|---|---|
| Vue | 学习成本低，文档友好，适合快速开发 | 生态相对较小，国际化不足 | 中小型项目、国内企业、偏好模板语法 |
| React | 社区庞大，生态完善，灵活性强 | 学习曲线陡峭，需手动优化性能 | 大型复杂项目、全球化应用、偏好函数式编程 |
选择建议：
- 选 Vue：快速上手、追求开发效率、团队偏好 HTML 模板语法。
- 选 React：长期维护、需要高度灵活性、项目依赖丰富第三方库（如 Next.js）。
相同点
- 都有组件化思想
- 都支持服务器端渲染
- 都有Virtual DOM（虚拟dom）
- 数据驱动视图
- 都有支持native的方案：
Vue的weex、React的React native - 都有自己的构建工具：
Vue的vue-cli、React的Create React App
区别
- 数据流向的不同。
react从诞生开始就推崇单向数据流，而Vue是双向数据流 - 数据变化的实现原理不同。
react使用的是不可变数据，而Vue使用的是可变的数据 - 组件化通信的不同。
react中我们通过使用回调函数来进行通信的，而Vue中子组件向父组件传递消息有两种方式：事件和回调函数 - diff算法不同。
react主要使用diff队列保存需要更新哪些DOM，得到patch树，再统一操作批量更新DOM。Vue使用双向指针，边对比，边更新DOM
与方法重载(Overload)详解)
