认识Vue

文章目录

认识Vue
- 一、vue是什么
- 二、Vue核心特性
- 三、Vue跟传统开发的区别
- - [1. **开发模式：MVVM vs 模板驱动**](#1. 开发模式：MVVM vs 模板驱动)
  - [2. **组件化开发**](#2. 组件化开发)
  - [3. **状态管理**](#3. 状态管理)
  - [4. **路由管理**](#4. 路由管理)
  - [5. **构建与工程化**](#5. 构建与工程化)
  - [6. **性能优化**](#6. 性能优化)
  - [7. **学习曲线**](#7. 学习曲线)
  - [8. **适用场景**](#8. 适用场景)
  - 总结
- 四、Vue和React对比
- - [**1. 核心设计理念**](#1. 核心设计理念)
  - [**2. 开发模式**](#2. 开发模式)
  - [**3. 生态系统**](#3. 生态系统)
  - [**4. 性能优化**](#4. 性能优化)
  - [**5. 学习曲线**](#5. 学习曲线)
  - [**6. 典型应用场景**](#6. 典型应用场景)
  - [**7. 代码示例对比**](#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。

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：

vue 复制代码

<template>
  <button @click="count++">{{ count }}</button>
</template>

<script setup>
let count = ref(0);
</script>

React：

jsx 复制代码

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