# Vue系列之1-概览

# 前言

2018年接触Vue,到现在已经3年了,中间通过自学、公司项目零零散散地学习了Vue的使用和原理。如今的前端,Vue和React已经是必备的技能,因此有必要回顾和总结,对Vue有一个系统性的认知。

本文是对Vue的系统性总结,主要涵盖以下几个部分:

  1. 概览:涵盖vue的诞生背景,它和其他mvvm的区别,以及未来的发展趋势等内容
  2. 使用:涵盖安装、基本使用、组件、高级特性等内容
  3. 周边工具:涵盖vue-router路由、vuex状态管理
  4. 原理:涵盖vue原理的三大因素,模板编译、数据响应式、虚拟dom和diff算法
  5. 常见问答:主要是汇总一些常见的vue问题和解答
  6. Vue3:涵盖新特性、原理和vite

希望通过本系列,能帮助你构建起vue的知识体系~

# 概览

Vue (opens new window) (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

通过官方定义,我们知道Vue的一些特点:

  • 轻量级渐进式框架(便于与第三方库或既有项目整合)
  • 生态丰富(vue-cli、vue-router、vuex、社区UI组件库...)
  • 易于上手(入门简单、中文文档友好)

那么,vue解决了什么问题?

  • HTML:从0到1
  • CSS:提供装饰
  • JavaScript(DOM):支持页面动态化(例如倒计时)
  • jQuery:解决浏览器兼容问题、优雅API(解放前端,造轮子)
  • Angular/React/Vue:数据驱动视图,让开发者从DOM操作中解放(如倒计时,自加器)

前端三大框架对比

框架 发布年份 出自 star数 特性
Angular 2010年 Google 73.7k 双向数据绑定
React 2013年 Facebook 169k VirtualDOM、Redux
Vue 2014年 尤雨溪EvanYou 184k 更轻量、易于上手、中文文档友好
  • 框架趋同/互相借鉴

    • Vue借鉴knockout模板引擎、借鉴Angular双向数据绑定、借鉴React虚拟dom/redux/JSX
    • 跨端开发(Ionic/ReactNative/Weex)
    • 桌面开发(electron支持vue/react)
    • 总之,你有我有全都有,大家好才是真的好
  • 类vue的开发模式(新赛道):小程序、uniapp

  • vue3.0 vs react hooks

# 总结

本章主要介绍了vue的诞生背景,和其他mvvm的区别,以及未来的发展趋势等内容。

# 参考资料

上次更新: 1/5/2022, 9:25:14 AM