认识Vue

认识Vue

一、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。

---

2. 组件化开发

• Vue：
  • 组件化架构：将 UI 拆分为独立组件（.vue 文件），每个组件包含模板、逻辑、样式。
  • 单文件组件：代码结构清晰，支持作用域 CSS（scoped）。
  • 复用性：组件可跨项目复用，支持 Props 和 Events 通信。
• 传统开发：
  • 代码分散：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