~2025-42008-57：/* 历史 */ React(242k)的星星數比Vue(210k)高

2025-12-21T03:23:31Z

历史： React(242k)的星星數比Vue(210k)高

新页面

{{NoteTA|G1=IT|G2=FL}}
{{Infobox software
| name = Vue.js
| logo = [[File:Vue.js_Logo_2.svg|215px|Vue.js logo]]
| author = [[尤雨溪]]
| released = {{Start date and age|2014|2}}<ref>{{Cite web |title=First Week of Launching Vue.js |url=http://blog.evanyou.me/2014/02/11/first-week-of-launching-an-oss-project/ |website=Evan You |accessdate=2017-09-19 |archive-date=2019-02-05 |archive-url=https://web.archive.org/web/20190205111451/https://blog.evanyou.me/2014/02/11/first-week-of-launching-an-oss-project/ |dead-url=yes }}</ref>
| programming language = [[TypeScript]]
| platform = [[跨平台]]
| genre = [[JavaScript函式庫]]
| license = [[MIT许可证]]<ref name="license">{{Cite web |title=vue/LICENSE |url=https://github.com/vuejs/vue/blob/dev/LICENSE |accessdate=2017-04-17 |website=GitHub |archive-date=2019-03-22 |archive-url=https://web.archive.org/web/20190322181431/https://github.com/vuejs/vue/blob/dev/LICENSE |dead-url=no }}</ref>
}}

'''Vue.js'''（{{IPA|{{IPAc-en|v|j|uː}}}}，简称'''Vue'''）是一个用于创建用户界面的[[开源软件|开源]][[MVVM]][[前端和后端|前端]][[JavaScript]]框架，也是一个创建[[单页应用]]的[[Web应用框架]]<ref>{{Cite web |title=Introduction — Vue.js |url=https://vuejs.org/v2/guide/#What-is-Vue-js |language=en |access-date=2017-03-11 |archive-date=2019-03-09 |archive-url=https://web.archive.org/web/20190309215340/https://vuejs.org/v2/guide/#What-is-Vue-js |dead-url=no }}</ref>。Vue.js由[[尤雨溪]]创建，由他和其他活跃的核心团队成员维护<ref>{{Cite web|url=https://vuejs.org/v2/guide/team.html|title=Meet the Team — Vue.js|website=vuejs.org|language=en|access-date=2019-09-23|archive-date=2022-01-15|archive-url=https://web.archive.org/web/20220115064834/https://vuejs.org/v2/guide/team.html}}</ref>。

2016年一项针对JavaScript框架的调查表明，Vue有着89%的开发者满意度。<ref name="stateofjs">{{Cite web |title=State Of JavaScript Survey Results: Front-end Frameworks |url=http://stateofjs.com/2016/frontend/ |language=en |archiveurl=https://web.archive.org/web/20170417032455/http://stateofjs.com/2016/frontend/ |archivedate=2017-04-17 |access-date=2017-03-11 |deadurl=yes }}</ref>在[[GitHub]]上，该项目平均每天能收获95颗星，<ref name="stateofjs" /><ref>{{Cite web |title=Trending JavaScript Frameworks |url=http://bestof.js.org/tags/framework/trending/last-12-months |access-date=2017-05-18}}{{dead link|date=2018年5月 |bot=InternetArchiveBot |fix-attempted=yes }}</ref>为GitHub有史以来星标数第3多的项目。<ref>{{Cite web |title=Most Starred Repositories |url=https://github.com/search?p=1&q=stars%3A%3E1&s=stars&type=Repositories |accessdate=2020-02-17 |website=GitHub |archive-date=2022-02-18 |archive-url=https://web.archive.org/web/20220218015719/https://github.com/search?p=1&q=stars%3A%3E1&s=stars&type=Repositories }}</ref>

== 综述 ==
Vue.js是一款[[JavaScript]]前端框架，旨在更好地组织与简化Web开发。Vue所关注的核心是[[MVC|MVC模式]]中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。

== 历史 ==
在为[[AngularJS]]工作之后，Vue的作者[[尤雨溪]]开发出了这一框架。他声称自己的思路是提取Angular中为自己所喜欢的部分，构建出一款相当轻量的框架。<ref>{{Cite news |url=https://betweenthewires.org/2016/11/03/evan-you/ |title=Between the Wires interview with Evan You |date=2016-11-03 |work=Between the Wires |language=en |dead-url=yes |access-date=2017-08-26 |archive-url=https://web.archive.org/web/20170603052649/https://betweenthewires.org/2016/11/03/evan-you/ |archive-date=2017-06-03 }}</ref>Vue最早发布于2014年2月。作者在[[Hacker News]]、Echo JS与[[Reddit]]的''/r/javascript''版块<ref>{{Cite web |title=r/javascript - Vue.js - MVVM made simple |url=https://www.reddit.com/r/javascript/comments/1wvkit/vuejs_mvvm_made_simple/ |accessdate=2019-04-17 |work=reddit |language=en |archive-date=2021-05-06 |archive-url=https://web.archive.org/web/20210506050609/https://www.reddit.com/r/javascript/comments/1wvkit/vuejs_mvvm_made_simple/ }}</ref>发布了最早的版本。一天之内，Vue就登上这三个网站的首页。<ref>{{Cite web |title=First Week of Launching Vue.js |url=http://blog.evanyou.me/2014/02/11/first-week-of-launching-an-oss-project/index.html |language=en |website=Evan You |access-date=2017-03-11 |archive-date=2017-04-12 |archive-url=https://web.archive.org/web/20170412110312/http://blog.evanyou.me/2014/02/11/first-week-of-launching-an-oss-project/index.html }}</ref>Vue是Github上最受欢迎的开源项目之一。<ref>{{Cite web|date=2023-02-17|title=GitHub 排行榜 Top 200，热门开源项目推荐 - GitHub中文社区|url=https://www.githubs.cn/top|url-status=live|archive-url=https://web.archive.org/web/20230217144228/https://www.githubs.cn/top|archive-date=2023-02-17|language=zh-CN}}</ref>同时，在JavaScript框架/函式库中，Vue所获得的星标数僅次於[[React]]，並高于[[Backbone.js]]、[[Angular]] 2、[[jQuery]]等项目。

版本名称通常来自漫画和动畫，其中大部分属于科幻小说类型。

=== 版本===
{| class="wikitable"
|-
! 版本!! 发布日期 !! 版本名称
|-
| 3.4 || {{dts|2023-12-28}} || [[灌籃高手|Slam Dunk]]
|-
| 3.3 || {{dts|2023-05-11}} || [[神劍闖江湖|Rurouni Kenshin]]
|-
| 3.2 || {{dts|2021-08-05}} || [[五等分的新娘|Quintessential Quintuplets]]<ref>{{cite web|url=https://github.com/vuejs/vue-next/releases/tag/v3.2.0|title=v3.2.0 Quintessential Quintuplets|date=2021-08-05|publisher=GitHub|access-date=2021-08-10|archive-date=2021-08-10|archive-url=https://web.archive.org/web/20210810001705/https://github.com/vuejs/vue-next/releases/tag/v3.2.0}}</ref>
|-
| 3.1 || {{dts|2021-06-07}} || [[PLUTO_～冥王～|Pluto]]<ref>{{cite web|url=https://github.com/vuejs/vue-next/releases/tag/v3.1.0|title=v3.1.0 Pluto|date=2021-06-07|publisher=GitHub|access-date=2021-07-18|archive-date=2021-07-18|archive-url=https://web.archive.org/web/20210718094551/https://github.com/vuejs/vue-next/releases/tag/v3.1.0}}</ref>
|-
| 3.0 || {{dts|2020-09-18}} || [[One Piece]]<ref>{{cite web|url=https://github.com/vuejs/vue-next/releases/tag/v3.0.0|title=v3.0.0 One Piece|date=2020-09-18|publisher=GitHub|access-date=2020-09-23|archive-date=2020-09-19|archive-url=https://web.archive.org/web/20200919013105/https://github.com/vuejs/vue-next/releases/tag/v3.0.0}}</ref>
|-
| 2.7 || {{dts|2022-07-01}} || [[火影忍者|Naruto]]<ref>{{cite web|url=https://github.com/vuejs/vue/releases/tag/v2.7.0|title=v2.7.0 Naruto|date=2022-07-01|publisher=GitHub|access-date=2022-07-01|archive-date=2022-07-01|archive-url=https://web.archive.org/web/20220701141335/https://github.com/vuejs/vue/releases/tag/v2.7.0}}</ref>
|-
| 2.6 || {{dts|2019-02-04}} || [[Macross]]<ref>{{cite web|url=https://github.com/vuejs/vue/releases/tag/v2.6.0|title=v2.6.0 Macross|date=2019-02-04|publisher=GitHub|access-date=2020-09-23|archive-date=2020-11-11|archive-url=https://web.archive.org/web/20201111182125/https://github.com/vuejs/vue/releases/tag/v2.6.0}}</ref>
|-
| 2.5 || {{dts|2017-10-13}} || [[靈異E接觸|Level E]]<ref>{{cite web|url=https://github.com/vuejs/vue/releases/tag/v2.5.0|title=v2.5.0 Level E|date=2017-10-13|publisher=GitHub|access-date=2020-09-23|archive-date=2020-09-18|archive-url=https://web.archive.org/web/20200918170329/https://github.com/vuejs/vue/releases/tag/v2.5.0}}</ref>
|-
| 2.4 || {{dts|2017-07-13}} || [[KILL_la_KILL|Kill la Kill]]<ref>{{cite web|url=https://github.com/vuejs/vue/releases/tag/v2.4.0|title=v2.4.0 Kill la Kill|date=2017-07-13|publisher=GitHub|access-date=2020-09-23|archive-date=2020-11-09|archive-url=https://web.archive.org/web/20201109042137/https://github.com/vuejs/vue/releases/tag/v2.4.0}}</ref>
|-
| 2.3 || {{dts|2017-04-27}} || [[JoJo's Bizarre Adventure]]<ref>{{cite web|url=https://github.com/vuejs/vue/releases/tag/v2.3.0|title=v2.3.0 JoJo's Bizarre Adventure|date=2017-04-27|publisher=GitHub|access-date=2020-09-23|archive-date=2020-11-11|archive-url=https://web.archive.org/web/20201111192047/https://github.com/vuejs/vue/releases/tag/v2.3.0}}</ref>
|-
| 2.2 || {{dts|2017-02-26}} || [[頭文字D|Initial D]]<ref>{{cite web|url=https://github.com/vuejs/vue/releases/tag/v2.2.0|title=v2.2.0 Initial D|date=2017-02-26|publisher=GitHub|access-date=2020-09-23|archive-date=2021-04-13|archive-url=https://web.archive.org/web/20210413135052/https://github.com/vuejs/vue/releases/tag/v2.2.0}}</ref>
|-
| 2.1 || {{dts|2016-11-22}} || [[HUNTER×HUNTER|Hunter X Hunter]]<ref>{{cite web|url=https://github.com/vuejs/vue/releases/tag/v2.1.0|title=v2.1.0 Hunter X Hunter|date=2016-11-22|publisher=GitHub|access-date=2020-09-23|archive-date=2020-11-08|archive-url=https://web.archive.org/web/20201108094602/https://github.com/vuejs/vue/releases/tag/v2.1.0}}</ref>
|-
| 2.0 || {{dts|2016-09-30}} || [[攻殼機動隊|Ghost in the Shell]]<ref>{{cite web|url=https://github.com/vuejs/vue/releases/tag/v2.0.0|title=v2.0.0 Ghost in the Shell|date=2016-09-30|publisher=GitHub|access-date=2020-09-23|archive-date=2020-10-27|archive-url=https://web.archive.org/web/20201027193218/https://github.com/vuejs/vue/releases/tag/v2.0.0}}</ref>
|-
| 1.0 || {{dts|2015-10-27}} || [[新世纪福音战士|Evangelion]]<ref>{{cite web|url=https://github.com/vuejs/vue/releases/tag/1.0.0|title=1.0.0 Evangelion|date=2015-10-27|publisher=GitHub|access-date=2020-09-23|archive-date=2021-04-13|archive-url=https://web.archive.org/web/20210413114912/https://github.com/vuejs/vue/releases/tag/1.0.0}}</ref>
|-
| 0.12 || {{dts|2015-06-12}} || [[七龙珠|Dragon Ball]]<ref>{{cite web|url=https://github.com/vuejs/vue/releases/tag/0.12.0|title=0.12.0: Dragon Ball|date=2015-06-12|publisher=GitHub|access-date=2020-09-23|archive-date=2021-04-13|archive-url=https://web.archive.org/web/20210413135200/https://github.com/vuejs/vue/releases/tag/0.12.0}}</ref>
|-
| 0.11 || {{dts|2014-11-07}} || [[Cowboy Bebop]]<ref>{{cite web|url=https://github.com/vuejs/vue/releases/tag/0.11.0|title=v0.11.0: Cowboy Bebop|date=2014-11-07|publisher=GitHub|access-date=2020-09-23|archive-date=2021-04-13|archive-url=https://web.archive.org/web/20210413135213/https://github.com/vuejs/vue/releases/tag/0.11.0}}</ref>
|-
| 0.10 || {{dts|2014-03-23}} || [[Blade Runner]]<ref>{{cite web|url=https://github.com/vuejs/vue/releases/tag/v0.10.0|title=v0.10.0: Blade Runner|date=2014-03-23|publisher=GitHub|access-date=2020-09-23|archive-date=2021-04-13|archive-url=https://web.archive.org/web/20210413135244/https://github.com/vuejs/vue/releases/tag/v0.10.0}}</ref>
|-
| 0.9 || {{dts|2014-02-25}} || [[黑客帝国动画版|Animatrix]]<ref>{{cite web|url=https://github.com/vuejs/vue/releases/tag/v0.9.0|title=v0.9.0: Animatrix|date=2014-02-25|publisher=GitHub|access-date=2020-09-23|archive-date=2021-04-13|archive-url=https://web.archive.org/web/20210413115026/https://github.com/vuejs/vue/releases/tag/v0.9.0}}</ref>
|-
| 0.8 || {{dts|2014-01-27}} || {{n/a}} <ref>{{cite web|url=https://github.com/vuejs/vue/releases/tag/v0.8.0|title=v0.8.0|date=2014-01-27|publisher=GitHub|access-date=2020-09-23|archive-date=2021-04-13|archive-url=https://web.archive.org/web/20210413114929/https://github.com/vuejs/vue/releases/tag/v0.8.0}}</ref>
|-
| 0.7 || {{dts|2013-12-24}} || {{n/a}} <ref>{{cite web|url=https://github.com/vuejs/vue/releases/tag/v0.7.0|title=v0.7.0|date=2013-12-24|publisher=GitHub|access-date=2020-09-23|archive-date=2021-04-13|archive-url=https://web.archive.org/web/20210413114747/https://github.com/vuejs/vue/releases/tag/v0.7.0}}</ref>
|-
| 0.6 || {{dts|2013-12-08}} || VueJS <ref>{{cite web|url=https://github.com/vuejs/vue/releases/tag/0.6.0|title=0.6.0: VueJS|date=2013-12-08|publisher=GitHub|access-date=2020-09-23|archive-date=2021-04-13|archive-url=https://web.archive.org/web/20210413134939/https://github.com/vuejs/vue/releases/tag/0.6.0}}</ref>
|}

== 特性 ==
=== 组件 ===
组件是Vue最为强大的特性之一。为了更好地管理一个大型的应用程序，往往需要将应用切割为小而独立、具有复用性的组件。在Vue中，组件是基础[[HTML元素]]的拓展，可方便地自定义其数据与行为。<ref>{{Cite web |title=Components — Vue.js |url=https://vuejs.org/v2/guide/components.html |language=en |access-date=2017-03-11 |archive-date=2021-06-06 |archive-url=https://web.archive.org/web/20210606050529/https://vuejs.org/v2/guide/components.html }}</ref>下方的代码是Vue组件的一个示例，渲染为一个能计算鼠标点击次数的按钮。{{syntaxhighlight|lang=javascript|code=// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">我被点击了 <nowiki>{{ count }}</nowiki> 次！</button>'
})
}}

=== 模板 ===
Vue使用基于[[HTML]]的模板语法，允许开发者将DOM元素与底层Vue实例中的数据相绑定。所有Vue的模板都是合法的HTML，所以能被遵循规范的浏览器和HTML解析器解析。在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。结合响应式系统，在应用状态改变时，Vue能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上。<ref>{{Cite web |title=模板语法 - Vue.js |url=https://cn.vuejs.org/v2/guide/syntax.html |language=zh-cn |access-date=2017-09-19 |archive-date=2022-05-05 |archive-url=https://web.archive.org/web/20220505064056/https://cn.vuejs.org/v2/guide/syntax.html }}</ref>

此外，Vue允许开发者直接使用{{link-en|JSX|React (JavaScript library)#JSX|JSX}}语言作为组件的渲染函数，以代替模板语法。<ref>{{Cite web |title=Template Syntax — Vue.js |url=https://vuejs.org/v2/guide/syntax.html |language=en |access-date=2017-03-11 |archive-date=2021-11-04 |archive-url=https://web.archive.org/web/20211104004717/https://vuejs.org/v2/guide/syntax.html }}</ref>以下为可计算点击次数的按钮的JSX渲染版本（需配置相应[[Babel (编译器)|Babel编译器]]）：
{{syntaxhighlight|lang=javascript|code=
Vue.component('buttonclicked', {
props: [ 'initial_count' ],
data() {
return { count: 0 };
},
render(h) {
return (<button vOn:click={this.onclick}>Clicked {this.count} times</button>)
},
methods: {
onclick() {
this.count = this.count + 1;
}
},
mounted: function() {
this.count = this.initial_count;
}
});
}}

=== 响应式设计 ===
响应式是指MVC模型中的视图随着模型变化而变化。在Vue中，开发者只需将视图与对应的模型进行绑定，Vue便能自动观测模型的变动，并重绘视图。这一特性使得Vue的状态管理变得相当简单直观。<ref>{{Cite web |title=Reactivity in Depth — Vue.js |url=https://vuejs.org/v2/guide/reactivity.html |language=en |access-date=2017-03-11 |archive-date=2021-05-06 |archive-url=https://web.archive.org/web/20210506193422/https://vuejs.org/v2/guide/reactivity.html }}</ref>

=== 过渡效果 ===
Vue在插入、更新或者移除DOM时，提供多种不同方式的应用过渡效果。包括以下工具：
* 在[[Cascading Style Sheets|CSS]]过渡和动画中自动应用class；
* 可以配合使用第三方CSS动画库，如Animate.css；
* 在过渡钩子函数中使用JavaScript直接操作DOM；
* 可以配合使用第三方JavaScript动画库，如Velocity.js。<ref>{{Cite web |title=进入/离开 & 列表过渡 - Vue.js |url=https://cn.vuejs.org/v2/guide/transitions.html |language=zh-cn |access-date=2017-09-19 |archive-date=2022-04-03 |archive-url=https://web.archive.org/web/20220403184417/https://cn.vuejs.org/v2/guide/transitions.html }}</ref>

=== 单文件组件（SFC） ===
为了更好地适应复杂的项目，Vue支持以<code>.vue</code>为扩展名的文件来定义一个完整组件，用以替代使用<code>Vue.component</code>注册组件的方式。开发者可以使用[[Vite]]或[[Webpack]]等构建工具来打包单文件组件。<ref>{{Cite web |title=单文件组件 - Vue.js |url=https://cn.vuejs.org/v2/guide/single-file-components.html |language=zh-cn |access-date=2017-09-19 |archive-date=2022-04-03 |archive-url=https://web.archive.org/web/20220403184412/https://cn.vuejs.org/v2/guide/single-file-components.html }}</ref>

== 生态系统 ==
核心库附带由核心团队和贡献者开发的工具和库。

=== 官方工具 ===
* Devtools：用于调试Vue.js应用程序的浏览器[[Web开发工具|开发人员工具]]扩展
* Vue CLI和Vite：用于快速开发Vue.js的标准工具
* Vue Loader：一个webpack的加载器（{{lang|en|loader}}），允许以SFC格式编写Vue组件

=== 官方库 ===
* Vue Router：Vue.js的官方路由，允许开发者编写在多个视图中切换的单网页应用程序
* Pinia和Vuex：Vue.js的状态管理库
* Vue Server Render：Vue.js的服务器端渲染（{{lang|en|Server Side Rendering}}，{{lang|en|SSR}}）

== 参见 ==
* [[React]]
* [[Angular]]
* [[AngularJS]]
* [[JavaScript函式库]]
* [[Nuxt.js]]

== 参考文献 ==
{{Reflist|2}}

==外部链接==
{{Portal|自由软件}}
* {{Official website|https://vuejs.org/}}{{en}}
* {{Official website|https://cn.vuejs.org/}}{{zh-cn}}

{{Application frameworks}}
{{Node.js}}
{{ECMAScript}}

[[Category:使用MIT许可证的软件]]
[[Category:Web应用框架]]
[[Category:JavaScript函式庫]]

Vue.js - 版本历史

~2025-42008-57：​/* 历史 */ React(242k)的星星數比Vue(210k)高

~2025-42008-57：/* 历史 */ React(242k)的星星數比Vue(210k)高