为啥学习Vue框架??

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了为啥学习Vue框架??相关的知识,希望对你有一定的参考价值。

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就好了

以上是关于为啥学习Vue框架??的主要内容,如果未能解决你的问题,请参考以下文章

前端框架之VUE

vue和react哪个更好用,为啥?

Vue框架学习

# Vue 框架学习

前端框架vue的简单介绍和学习

Vue学习总结21.Vue-UI框架之Mint UI的使用