为啥学习Vue框架？？

Posted 2023-03-13

vue框架算是最近前端开发很好的工具。可以突破以前所没有实时更新页面。很有发展前景，很多大公司现在正在使用。

Vue框架诞生于2014年，其作者为中国人——尤雨溪，也是新人最容易入手的框架之一，不同于React和Angular,其中文文档也便于大家阅读和学习。Vue用于构建交互式的Web界面的库，是一个构建数据驱动的Web界面渐进式框架，该框架遵循CMD规范，并且提供的设计模式为MVVM模式（Model->View->View-Model）和一个可组合的组合型组件系统，具有简单的、灵活的API(接口)。该框架继承了React的虚拟DOM技术和Angular的双向数据绑定技术，是一款较新的功能性框架。

在这里介绍下什么是虚拟DOM和双向数据绑定：
1、虚拟DOM（Virtual DOM），顾名思义，从字面上理解就是虚构的DOM树，当我们用传统的原生API或者jQuery去操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程。即使计算机硬件一直在更新迭代，但是操作真实DOM的代价仍旧很昂贵，真实的DOM节点，哪怕是一个最简单的div也包含很多属性，所以频繁的操作，会导致页面卡顿，影响用户的体验。为了解决这个浏览器性能问题，虚拟DOM（Virtual DOM）就被设计出来了，其核心算法是Diff算法。它会将一次操作过程中对真实DOM所有更新的diff内容保存到本地的一个js对象中，最终将这个js对象一次性attach到DOM树上，通知浏览器去执行绘制工作，避免了大量的无谓的计算量。

用js对象模拟DOM节点的好处是：页面的更新可以先全部反应在js对象上，操作内存中的js对象的速度明显要快的多。等更新完成后，在将最终的js对象映射成真实的DOM，交由浏览器去绘制。（提高了性能，并且运行速度快）

2、双向数据绑定，在讲双向数据绑定前，我们要想说下单向数据绑定，单向数据绑定，就是把Model绑定到View上，当我们用javascript代码更新Model时，View就会自动更新了（Model-->View）。那么双向数据绑定就是，用户更新了View，Model的数据也会自动被更新（Model<-->View）。什么情况下用户可以更新View呢？举个最直接的例子，填写表单，当用户填写表单时，View的状态就被更新了，如果此时MVVM框架可以自动更新Model的状态，那么就相当于我们把Model和View做了双向数据绑定。其原理是我们要对input进行value 的属性绑定（v-bind：value=”...”）将Model中的变量绑定到View上（Model->View）以及当用户对input进行操作时，进行事件监听（v-on：input=”...”）将View上的更新传回Model中（View->Model）从而实现双向数据绑定，在Vue中，以上操作过于繁琐，便提供了v-model直接实现双向数据绑定的效果。
在进行Vue项目开发过程中，我们可以通过script标签引入式写法来引入vue或者是nodejs自带的包管理工具npm安装vue。并且通过new Vue（）进行新建一个Vue的实例对象，其下有很多属性，包括el、data、methods、computed、watch等等，el为指向页面的节点元素，data存储数据，数据类型包括simple datatype（简单数据类型）以及complex datatype（复杂数据类型），用插值表达式显示，在插值显示的时候，不需要写上data，methods内存储方法，通过fn（）的形式调用方法，computed内存储也是方法，但是其为计算数据，复杂逻辑的应该存储在computed中，计算属性是基于它们的依赖进行缓存的，由于computed带有一层缓存，所以只有在它的相关依赖发生改变时才会重新运行，而methods则是调用一次生成一次，computed中的方法调用时不需要加（）的，watch为监听，监控，监听data中的属性值也可以监控对象，存在两个参数（currentValue当前值和prevValue之前值）。 参考技术A Vue是一个前端的框架,目前市场三大前端主流框架分别是Angular、React和Vue。Vue之所以被开发者青睐，主要是Vue乘承了Angular和React框架两者的优势，并且Vue的代码简洁、上手容易，在市场上也得到大量应用，下面我就对Vue的特性进行简单介绍。

1、轻量级

Angular的学习成本高，使用起来比较复杂，而Vue相对简单、直接，所以Vue使用起来更加友好。

2、数据绑定

Vue是一个MVVM框架，数据双向绑定，当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化，这也算是Vue的精髓之处。尤其是在进行表单处理时，Vue的双向数据绑定非常方便。
3.指令

指令主要包括内置指令和自定义指令，以“v-”开头，作用于html元素。指令提供了一些特殊的特性， 将指令绑定在元素上时，指令会给绑定的元素添加一些特殊的行为。 例如，v-bind动态绑定指令、v-if 条件渲染指令、v- for列表渲染指令等。

4、插件

用于对Vue框架功能进行扩展，通过MyPlugin.install完成插件的编写，简单配置后就可以全局使用。常用的扩展插件有vue-router、Vuex 等。

Vue很多特性与Angular和React有着相同的地方，但是也有着性能方面的差别。

5、Vue使用基于依赖追踪的观察系统并且使用异步队列更新，所有的数据都是独立触发的，提高了数据处理能力。

React和Vue的中心思想是一切都是组件，组件之间可以实现嵌套。React 采用了特殊的JSX语法，Vue中也推崇编写以*.vue后缀命名的文件格式，对文件内容都有一些规定， 两者需要编译后使用。

值得一提的是，React依赖虚拟DOM，而Vue使用的是DOM模板。Vue 在模板中提供了指令、过滤器等，可以非常方便和快捷地操作DOM。推荐将Vue 使用到具有复杂交互逻辑的前端应用中，以确保用户的体验效果。 参考技术B 为什么要学习Vue？

说起Vue,不得不让我们想起Angular和React,他们都是业界非常优秀的前端框架。

可以说，这三款框架基本处于三分天下的一个局面，仅从GitHub趋势来看，Vue更是排在了第一位，至少有13万的Star,它基于HTML的模板语法，响应式的更新机制，可以让我们更快的更高效的开发项目，渐进式的开发理念和繁荣的生态圈为我们提供了大量的最佳实践，
无论你是开发简单的活动页，还是复杂逻辑的中后台系统，Vue都可以轻松应对，目前不管是BAT大厂（BAT是指：中国互联网公司三巨头）还是在创业公司，Vue都有广泛的应用，相关技术原理也成为了我们面试中必考知识点。对于任何一个前端工程师来说，它都是一门非常值得我们学习的前端框架。
BAT，B指百度、A指阿里巴巴、T指腾讯，是中国互联网公司百度公司（Baidu）、阿里巴巴集团（Alibaba）、腾讯公司（Tencent）三大互联网公司首字母的缩写。百度总部在北京、阿里巴巴总部在浙江省杭州市、腾讯总部在广东省深圳市。

02 - 什么是 Vue ？

Vue的历史背景，就像它本身一样的简单，纯粹。刚开始它只是一个人的兴趣项目，也就是我们熟悉的尤雨溪大神。
在这里插入图片描述

在2013年的时候，是他的一个实验性项目，那个时候，React也只是刚刚发布，Angular也只是Angular1，不可否认的是，Vue有很多的一个功能点，它的灵感都是来自于Angular和React.
其实他们要解决的一个问题都是一个数据驱动的问题，避免我们去手动的操作Dom的问题。Vue发布之后呢，收到了一个众多的好评，但是也饱受了很多的非议。
作为一个个人的项目，能够发展到现在的一个规模，实属不易。好在Vue足够优秀，经受住了我们的考验，现在也已经发展到成熟的阶段，现在Vue的生态圈已经足够的完善。

03 - Vue的特点：

在这里插入图片描述

相比于React压缩后大概是35kb；Angular压缩后大概是60Kb左右；而Vue压缩后大概是20kb ，所以说更加轻量。
而且是一个渐进式的框架：意思就是你不需要学习完Vue的全部知识，
做项目的时候，你可以用到什么就学习什么。
响应式更新机制，就是说当我们的数据更新之后，视图会自动的刷新。我们不需要像React那样comentupdata 去进行一个性能优化，我们的这个响应式更新机制它已经在底层去帮我们去处理这些事情。
我们学习Vue的成本低，因为它的一个模板语法是基于HTML的，如果说你有HTML的一个基础，可以很快的去上手Vue的框架。 参考技术C 说起Vue,不得不让我们想起Angular和React,他们都是业界非常优秀的前端框架。
可以说，这三款框架基本处于三分天下的一个局面，仅从GitHub趋势来看，Vue更是排在了第一位，至少有13万的Star,它基于HTML的模板语法，响应式的更新机制，可以让我们更快的更高效的开发项目，渐进式的开发理念和繁荣的生态圈为我们提供了大量的最佳实践，

无论你是开发简单的活动页，还是复杂逻辑的中后台系统，Vue都可以轻松应对，目前不管是BAT大厂（BAT是指：中国互联网公司三巨头）还是在创业公司，Vue都有广泛的应用，相关技术原理也成为了我们面试中必考知识点。对于任何一个前端工程师来说，它都是一门非常值得我们学习的前端框架。
BAT，B指百度、A指阿里巴巴、T指腾讯，是中国互联网公司百度公司（Baidu）、阿里巴巴集团（Alibaba）、腾讯公司（Tencent）三大互联网公司首字母的缩写。百度总部在北京、阿里巴巴总部在浙江省杭州市、腾讯总部在广东省深圳市。
02 - 什么是 Vue ？
Vue的历史背景，就像它本身一样的简单，纯粹。刚开始它只是一个人的兴趣项目，也就是我们熟悉的尤雨溪大神。
在2013年的时候，是他的一个实验性项目，那个时候，React也只是刚刚发布，Angular也只是Angular1，不可否认的是，Vue有很多的一个功能点，它的灵感都是来自于Angular和React.

其实他们要解决的一个问题都是一个数据驱动的问题，避免我们去手动的操作Dom的问题。Vue发布之后呢，收到了一个众多的好评，但是也饱受了很多的非议。
作为一个个人的项目，能够发展到现在的一个规模，实属不易。好在Vue足够优秀，经受住了我们的考验，现在也已经发展到成熟的阶段，现在Vue的生态圈已经足够的完善。
03 - Vue的特点：
相比于React压缩后大概是35kb；Angular压缩后大概是60Kb左右；而Vue压缩后大概是20kb ，所以说更加轻量。
而且是一个渐进式的框架：意思就是你不需要学习完Vue的全部知识，
做项目的时候，你可以用到什么就学习什么。
响应式更新机制，就是说当我们的数据更新之后，视图会自动的刷新。我们不需要像React那样comentupdata 去进行一个性能优化，我们的这个响应式更新机制它已经在底层去帮我们去处理这些事情。
我们学习Vue的成本低，因为它的一个模板语法是基于HTML的，如果说你有HTML的一个基础，可以很快的去上手Vue的框架。
如果说，你现在还在犹豫要不要学习Vue，那么我可以肯定而且明确的告诉你，不管你是否使用Vue，只要你是从事前端的这个行业，它里面的很多知识点都是值得我们去学习的。 总之，你只要学习就是对了。 参考技术D

jQuery是最早的js框架，优点是简化DOM操作，缺点是DOM操作太频繁，影响前端性能。

Anguler是Google收购的前端框架，其特点就是将后台的MVC模式搬到前台并增加了模块化开发的理念；缺点是版本迭代不合理，1代 -> 2代就是两个东西，目前最新应该是v12。

React是Facebook出品，其特点是提出了虚拟DOM的概念用于减少真实DOM的操作，在内存中模拟DOM操作，有效的提升了前端渲染的效率；缺点是使用繁杂，需要额外学习一门 JSX 语言。

vue是一个中国人开发的（尤雨溪），其特点是综合了 Anguler（模块化）和 React（虚拟DOM）的优点，是一款渐进式js框架（就是逐步实现新特性）；由于vue不具备通信能力，所以要额外使用一个通信框架与服务器交互。

Axios是前端通信框架，与之类似的有jQuery提供的Ajax通信功能。

vue和react哪个更好用，为啥？

Vue和React都是属于目前比较主流的前端框架，实际开发中也经常会拿Vue和React来比较。但是我们通常会根据各自优势来选择项目比较适合的框架。

React优点：

1.声明式设计 −React采用声明范式，可以轻松描述应用。

2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。

3.灵活 −React可以与已知的库或框架很好地配合。

4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。

5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

Vue优点：

1．简单易学，容易上手，Vue是国内团队开发，文档手册比较齐全，很适合前端新手小白学习。 

2.更顺畅的集成：无论是单页应用程序还是复杂的Web界面，Vue.js都可以更平滑地集成更小的部件，而不会对整个系统产生任何影响。

3.性能优势，更小的尺寸：它占用更少的空间，并且往往比其他框架提供更好的性能。

精心编写的文档：通过详细的文档提供简单的学习曲线，无需额外的知识; HTML和JavaScript将完成工作。

4.运行速度快，相对于React来说，性能着一方面Vue占有绝大优势。 

根据不同框架优点，我们在实际项目开发选型中一般中小型项目我们会选择使用Vue，大型项目会选择React。

参考技术A

官方对比

Vue 官网给出了详细的异同对比，相信这是最权威的比较

相同点：

使用了虚拟 DOM

提供响应式编程概念，组件化思想

渐进式编程，重点放在核心库，其他交给社区或者第三方库完成

不同之处：

1. diff 方式。

react 需要通过 PureComponent 或者实现 方法来优化组件渲染。

而 vue 不需要额外的设置，完全交给框架来完成。

2. JSX 和 Template

首先 Vue 也提供了渲染函数（render）。React 主推 JSX（就是那个让大部分程序员，刚上手不习惯的渲染函数语法糖），会有种错觉：HTML（React 元素） 和 Javascript 逻辑居然写在了一起。

Vue 通过 vue-loader ，帮助我们把 template、script、css 分离开，或者最后组合在一起。完全可以像以前的 web 开发一样，入门门槛降低。

3. 脚手架

React 提供了 create-react-app 工具，虽然是不错的脚手架，但不涉及 webpack 等的配置的修改能力；

相反，Vue 依靠 vue.config.js 让我们更定制化的修改脚手架配置。

4. 其他

React 学习成本更高，Vue 更符合我们的开发模式（习惯）

Vue和React各有特点吧，Vue主张开箱即用，也就是使用特别方便，很多公司都愿意使用Vue因为他上手简单，难度低。

而React的可定制度会比较高，很多理念都领先于行业，很多大公司都在用React，相对Vue来讲会稍难一些。

如果想进大厂，那么React肯定是必学的，如果对大厂没有要求，那么就学习Vue就好了