vue框架是用哪句话体现的

Posted 2023-04-13

想必教程大家已经看过，也动手做过一些Demo。倘若让大家用一句话概括’“vue是什么”，你的答案会是什么？。这里Vue官方教程也给出了自己的一句话解释。就是教程开头的第一句话

Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。
这句话你可能并不陌生，但你未必真正读懂了它。 我们注意到这句话中有一个被作者高亮的词语—渐进式框架，其实明白了这个词语的意思，也便读懂了这句话，从而也就理解了Vue的核心理念。

那么渐进式框架究竟是什么意思，在解释这个词语之前，我们有必要先搞明白一个问题 “什么是框架？”[1]

在最初前端开发中，为了完成某个任务，我们首先利用JS从html文件中获取DOM元素，随后添加事件，最后进行一系列的JS编程操作。我们姑且把这种开发方式称为“DOM流”吧，“DOM流”的开发方式看起来似乎很简单实用，但是随着业务需求不断变动，你的麻烦就来了，整个代码会变得越来越混乱，无法维护。举个例子，假设现在有一个这样的需求，有一张图片，在被点击时，可以记录下被点击的次数。 这看起来很简单吧， 按照上面提到到开发方式，应该很快就可以搞定。 那么接下来，需求稍微发生了点变动， 要求有两张图片，分别被点击时，可以记录下各自的点击次数。这次似乎也很简单，只需把原先的代码复制粘贴一份就可以了。 那么当这个需求变成五张图片时，你会怎么做？ 还是简单复制粘贴吧，这样完全可以完成这个需求，但是你会觉得很别扭，因为你的代码此时变得很臃肿，存在很多重复的过程，但是似乎还在你的忍受范围内。这时候需求又发生了微小的变动，还是五张照片分别记录被点击次数，不过这样单独罗列五张图片似乎太占空间，现在只需要存在一个图片的位置，通过选择按钮来切换被点击的图片。 这时候你可能会奔溃掉，因为要完成这个看似微小的改动，你原先写的大部分代码可能都需要被删掉，甚至是完全清空掉，从零开始写起，更让人郁闷的是，即使耐着性子重新写好了这个需求，一旦又来了新的需求，可能又要重新开始了。这还仅仅是一个单纯的记录点击次数的任务，“DOM流”的开发方式似乎已经出现很大的问题，而在现实的开发中，复杂的业务逻辑和巨大的代码量，更是“DOM流”根本无法承受的。

为了应对以上问题，开发人员重新梳理了代码的组织结构，把JS代码划分为三个板块，数据（M)、视图(V)、 逻辑控制(*)。 数据板块只含有数据内容，视图板块只负责更改样式，逻辑控制负责联系视图板块和数据板块和相应的逻辑，如下图所示。 这样代码结构组织的好处是显而易见的，当需求发生变动时，只需要改动相应的板块即可。还是拿上文中提到的记录图片点击次数的需求为例，这是重新组织后的代码 demo，可以看到这次代码变得清晰易懂，而且你自己也可以去设想再增加某些需求，来看看需要改动代码的程度。

其实这种开发方式，就是我们常说的MV*模式，而MVC、MVVM、 MVP[2]等都是MV*的衍生物， 其实叫什么模式名称并不重要，当你现在搞清楚了这种代码组织结构的目的，就会明白这些模式本质上都是一回事，让数据与视图间不会发生直接联系。 其实说到这里，你应该知道“DOM流存在缺陷的原因，在“DOM流”中其实是把dom当做Model，我们直接从dom中获取数据，随后又改变dom来更新视图，视图和模型其实是混在一起了，代码组织自然很混乱，不易维护。

而这种MV*的代码组织方式，渐渐的就演变成了所谓的框架。 团队开发中会选择使用框架的一个重要的原因，因为框架提前设定好的代码的组织结构让实际开发项目的代码有一个相对明确地方，这样不用担心因为团队中某个人疏忽或特有编码习惯， 造成代码整体的混乱。这里说句题外话，依照现在对框架的认识，严格来说Bootstrap并不是一个框架，其实只是一个CSS工具集，主要用来做界面美化。而Jquery也并不涉及代码的结构组织，只是把一些重复的操作进行简化 （如 DOM操作 Ajax操作等），再加上对于兼容性的解决，所以只是用来方便操作的JS库。

现在利用MV*的代码组织方式，我们拥有了可以应对需求变化的健壮代码。在使用过程中，开发人员逐渐发现在应对有频繁数据更新的需求时，我们总在做着同样的工作—获取DOM，依照新的数据来更新视图。这些工作繁琐且重复，实质上耗费了开发人员的精力。 为了解决这个问题，基于MV*的模式的MVVM框架诞生—Knockout。它利用实例的形式，把model层内容传入到实例所谓的view model中，利用binding方法完成view model与view之间的双向绑定，view mode中数据变化时，view发生变化，反之亦然。这段对于Knockout描述可能有点抽象， 毕竟上没有上代码，但你至少知道Knockout框架能替我们完成了从数据更新后视图相应的更新就行了，如下图所示。

你可能会感叹，具有这么先进理念和功能的框架，自己怎么没用过，甚至之前没有听说过。这是因为Knockout诞生的时候超越了它的时代，还记得这段开头提到MVVM框架产生的原因吗—应对有频繁数据更新的需求，而在当时前端页面的大部分就只涉及静态展示和简单交互，不存在频繁的数据变更，使用Jquery 足矣。就这样，Knockout在当时并没有流行起来，不过这个框架现在依然存在，感兴趣的可以去看看，上手也很简单 。 直到最近几年，随着随着关于数据频繁变动的需求越来越多，人们又开始重视这种自动跟新视图的理念了。 Vue就是继承这种理念的众多框架之一。如下图所示，在具有响应式系统的Vue实例中，DOM状态只是数据状态的一个映射 即 UI=VM(State) ，当等式右边State改变了，页面展示部分UI就会发生相应改变。很多人初次上手Vue时，觉得很好用，原因就是这个。不过需要注意的是，Vue的核心定位并不是一个框架[3]，设计上也没有完全遵循MVVM模式，可以看到在图中只有State和View两部分， Vue的核心功能强调的是状态到界面的映射，对于代码的结构组织并不重视， 所以单纯只使用其核心功能时，它并不是一个框架，而更像一个视图模板引擎，这也是为什么Vue开发者把其命名成读音类似于view的原因。

现在我们来看看“渐进式”的意思。上文提到，Vue的核心的功能，是一个视图模板引擎，但这不是说Vue就不能成为一个框架。如下图所示，这里包含了Vue的所有部件，在声明式渲染（视图模板引擎）的基础上，我们可以通过添加组件系统、客户端路由、大规模状态管理来构建一个完整的框架。更重要的是，这些功能相互独立，你可以在核心功能的基础上任意选用其他的部件，不一定要全部整合在一起。可以看到，所说的“渐进式”，其实就是Vue的使用方式，同时也体现了Vue的设计的理念

而对于“渐进式”的解释，我在知乎上看到了一个不错的回答，这个答案也被Vue的设计者点了赞。这个回答的角度很好，主要从与React、Angular的比较来阐述的，由于本人没怎么用过另外这两个框架，也就不妄加评述，所以仅把回答进行摘录，以供参考[4]。

在我看来，渐进式代表的含义是：主张最少。
每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。
比如说，Angular，它两个版本都是强主张的，如果你用它，必须接受以下东西：
- 必须使用它的模块机制- 必须使用它的依赖注入- 必须使用它的特殊形式定义组件（这一点每个视图框架都有，难以避免）
所以Angular是带有比较强的排它性的，如果你的应用不是从头开始，而是要不断考虑是否跟其他东西集成，这些主张会带来一些困扰。
比如React，它也有一定程度的主张，它的主张主要是函数式编程的理念，比如说，你需要知道什么是副作用，什么是纯函数，如何隔离副作用。它的侵入性看似没有Angular那么强，主要因为它是软性侵入。
Vue可能有些方面是不如React，不如Angular，但它是渐进的，没有强主张，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念，也可以函数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。
渐进式的含义，我的理解是：没有多做职责之外的事。
好了，到这里已经解释完了“渐进式框架”的意思，现在让我们再回过头来看看开头那句话。

Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。
是不是对Vue有了不一样的感觉，现在也应该知道如何去学习和使用Vue了吧。在学习中，我们没必要一上来就搞懂Vue的每一个部件和功能，先从核心功能开始学习，逐渐扩展。 同时，在使用中，我们也没有必要把全部件能都拿出来，需要什么用什么就是了，而且也可以把Vue很方便的与其它已有项目或框架相结合。 参考技术A 渐进式框架 ，Vue的核心定位并不是一个框架[3]，设计上也没有完全遵循MVVM模式，可以看到在图中只有State和View两部分， Vue的核心功能强调的是状态到界面的映射，对于代码的结构组织并不重视， 所以单纯只使用其核心功能时，它并不是一个框架，而更像一个视图模板引擎，所说的“渐进式”，其实就是Vue的使用方式，同时也体现了Vue的设计的理念 参考技术B vue是一套构建用户界面的框架。 每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,它的强势程度会影响在业务开发中的使用方式。 参考技术C vue是一套基于标准HTML、CSS和javascript构建，高效地开发用户界面的渐进式框架。
参考百度百科。

什么是vue框架？

什么是vue

是一套构建用户界面的渐进式（用到哪一块就用哪一块，不需要全部用上）前端框架，Vue 的核心库只关注视图层

vue的兼容性

Vue.js 不支持 IE8 及其以下版本，因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。 Vue.js 支持所有兼容 ECMAScript 5 的浏览器。

vue学习资源

vue.js中文官网：http://cn.vuejs.org/

vue.js源码：https://github.com/vuejs/vue

vue.js官方工具：https://github.com/vuejs

vue.js官方论坛：forum.vuejs.org

对比其他框架-React

React 和 Vue 有许多相似之处，它们都有使用 Virtual DOM；提供了响应式（Reactive）和组件化（Composable）的视图组件。将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。React 比 Vue 有更丰富的生态系统

都有支持native的方案，React的RN，vue的Wee下

都支持SSR服务端渲染

都支持props进行父子组件间的通信

性能方面：React 和 Vue 在大部分常见场景下都能提供近似的性能。通常 Vue 会有少量优势，因为 Vue 的 Virtual DOM 实现相对更为轻量一些。

不同之处就是：

数据绑定方面，vue实现了数据的双向数据绑定，react数据流动是单向的
virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制
state对象在react应用中不可变的,需要使用setState方法更新状态;在vue中,state对象不是必须的,数据由data属性在vue对象中管理（如果要操作直接this.xxx）
组件写法不一样, React推荐的做法是 JSX , 也就是把HTML和CSS全都写进JavaScript了,即'all in js'; Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,js写在同一个文件

对比其他框架-angular

在性能方面，这两个框架都非常的快，我们也没有足够的实际应用数据来下一个结论。如果你一定想看些数据的话，你可以参考这个第三方跑分。单就这个跑分来看，Vue 似乎比 Angular 要更快一些。

在大小方面，最近的 Angular 版本中在使用了 AOT 和 tree-shaking 技术后使得最终的代码体积减小了许多。但即使如此，一个包含了 vuex + vue-router 的 Vue 项目 (30kb gzipped) 相比使用了这些优化的 Angular CLI 生成的默认项目尺寸 (~130kb) 还是要小的多。

灵活性：Vue 相比于 Angular 更加灵活，Vue 官方提供了构建工具来协助你构建项目，但它并不限制你去如何组织你的应用代码。有人可能喜欢有严格的代码组织规范，但也有开发者喜欢更灵活自由的方式。

vue.js的核心特点—响应的数据绑定

传统的js操作页面：在以前使用js操作页面的时候是这样的，需要操作某个html元素的数据，就的使用js代码获取元素然后在处理业务逻辑

响应式数据绑定的方式操作页面，可以直接使用像下面代码那样的写法就可以将数据填充到页面中

<template>
<div id="app">
message
</div>
</template>

<script>
export default
name: 'app',
data ()
return
message: 'Welcome to Your Vue.js App'



</script>

<style>
</style>

vue.js的核心特点—可组合的视图组件

一个页面映射为组件树。划分组件可维护、可重用、可测试，也就是一个页面由多个组件组合而成

vue中实现组件引入示例

第一步：import导入需要引入的组件文件；

第二步：注册组件；

第三步：在需要引入组件的文件中加上组件标签（这个标签的标签名就是注册的组件名字，多个单词的和这里有xx-xx的形式）

需要注意的是：组件可以嵌套引入，也就是说组件可以引入其他组件

首先创建一个组件，用于被引入的组件，组件名字叫Hello.vue
————————————————
版权声明：本文为CSDN博主「胡椒粉0121」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 参考技术A Vue (读音 /vjuː/，类似于 view) 是一个用于创建用户界面的开源Model–view–viewmodel前端JavaScript框架，也是一个创建单页应用的Web应用框架。它由尤雨溪创建，由他和其他活跃的核心团队成员维护。是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 参考技术B

Vue.js（/vjuː/，或简称为Vue）是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。 2016年一项针对JavaScript的调查表明，Vue有着89%的开发者满意度。

在GitHub上，该项目平均每天能收获95颗星，[为Github有史以来星标数第3多的项目。

Vue.js是一款流行的JavaScript前端框架，旨在更好地组织与简化Web开发。

Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。

在为AngularJS工作之后，Vue的作者尤雨溪开发出了这一框架。他声称自己的思路是提取Angular中为自己所喜欢的部分，构建出一款相当轻量的框架。Vue最早发布于2014年2月。

作者在Hacker News、Echo JS与Reddit的/r/javascript版块发布了最早的版本。一天之内，Vue就登上了这三个网站的首页。Vue是Github上最受欢迎的开源项目之一。同时，在JavaScript框架/函数库中，Vue所获得的星标数已超过React，并高于Backbone.js、Angular 2、jQuery等项目。

参考技术C Vue.js 是一个JavaScriptMVVM库，是一套构建用户界面的渐进式框架。
Vue是一套用于构建用户界面的渐进式框架。
Vue被设计为可以自底向上逐层应用。
Vue的核心库只关注视图层，易上手，便于和第三方库或既有项目整合。
现代化的工具链和各种类库结合使用，Vue也更适合做复杂的单页面应用SPA（SinglePage Web Application） 参考技术D Vue.js 是一个JavaScriptMVVM库，是一套构建用户界面的渐进式框架。
Vue是一套用于构建用户界面的渐进式框架。
Vue被设计为可以自底向上逐层应用。
Vue的核心库只关注视图层，易上手，便于和第三方库或既有项目整合。
现代化的工具链和各种类库结合使用，Vue也更适合做复杂的单页面应用SPA（SinglePage Web Application）