前端（四）——vue.js、vue、vue2、vue3

😊博主：小猫娃来啦
😊文章核心：vue.js、vue、vue2、vue3从全局到局部

文章目录

• vue.js、vue、vue2、vue3是什么关系?
• Vue.js简介
• • 发展历程
  • 特点与优势
  • 生态系统
  • Vue.js基础知识
  • 安装与配置
• 基本语法
• Vue.js主要版本解析
• • Vue.js 2.x === vue2
  • Vue.js 3.x === vue3
  • 从vue2到vue3的迁移
• Vue.js生态系统
• • UI框架
  • 开发工具
• vue应用前景
• 学习资源推荐

vue.js、vue、vue2、vue3是什么关系?

Vue.js是一款流行的JavaScript框架
vue,vue2,vue3都是vue.js的不同版本。

• Vue：Vue.js的第一个版本，也称为Vue 1.x。它于2014年首次发布，并获得了广泛的应用和认可。

• Vue2：Vue.js的第二个版本，也称为Vue 2.x。它在Vue 1.x的基础上进行了升级和改进，提供了更好的性能、更多的功能和更好的开发体验。Vue2是目前广泛应用的稳定版本，在许多项目中使用。

• Vue3：Vue.js的最新版本，也称为Vue 3.x。它在Vue 2.x的基础上进行了重构和升级，引入了许多新特性和改进。Vue3提供了更快的渲染速度、更小的包大小、更好的响应性和更方便的开发工具。

---

Vue.js简介

发展历程

Vue.js是由华裔工程师尤雨溪（Evan You）于2014年创建的开源JavaScript框架。他在Google工作期间，积累了丰富的前端开发经验，并觉得现有的前端框架存在一些不足之处，如复杂性、学习曲线陡峭等。

因此，尤雨溪决定开发一个简单、灵活且高效的框架，使开发者能够更轻松地构建用户界面。他的灵感来源于AngularJS和React这两个优秀的前端框架。

尤雨溪最初在2013年开始着手构建这个框架的原型，最终于2014年正式发布了Vue.js 1.0版。它迅速赢得了开发者们的喜爱和关注，在国内外都获得了广泛的认可和采用。

随着时间的推移，Vue.js逐渐成为最受欢迎的JavaScript框架之一。它的简洁易用、灵活性强以及出色的文档与社区支持受到了广大开发者的青睐。

在不断的迭代和升级过程中，尤雨溪领导团队开发了Vue.js的第二个版本—Vue 2.x，进一步提升了性能和功能。Vue 2.x成为目前广泛应用的稳定版本，在众多项目中得到了广泛的运用。

而后，在长期的开发和预研工作下，Vue.js团队推出了Vue.js的最新版本—Vue 3.x。Vue 3.x在底层架构和性能优化方面有了重大突破，带来了更快的渲染速度、更小的体积以及更好的类型检查等特性。

Vue.js的持续发展是依靠全球各地的活跃社区参与和贡献。它不断吸引新的开发者加入，并与其他生态系统进行整合，如Vue Router、Vuex等，形成了一个完善的解决方案，满足各种规模的项目需求。

特点与优势

• 简单易学：Vue.js采用了直观的模板语法，使开发者能够更快速地上手。它不需要过多的配置和复杂的设置，可以让初学者迅速入门，并且易于与现有项目集成。
• 渐进式框架：Vue.js是一个渐进式框架，意味着你可以根据项目需要逐步引入。你可以将Vue.js应用于整个项目，也可以只使用它的某个特定部分，这样可以更好地控制代码的复杂性和项目的规模。
• 组件化开发：Vue.js鼓励开发者使用组件化的方式构建用户界面。通过将页面拆分成多个可复用的组件，可以提高代码的可维护性和重用性。同时，Vue.js提供了强大的组件通信机制，使不同组件之间的交互更加灵活简单。
• 响应式数据绑定：Vue.js采用了响应式的数据绑定机制，即当数据发生变化时，页面会自动更新相应的视图。这减少了手动操作DOM的需求，极大地简化了开发流程，并提升了应用的性能和用户体验。
• 虚拟DOM技术：Vue.js通过使用虚拟DOM技术，减少了直接操作真实DOM的次数，并在内部优化了DOM更新的效率。这使得Vue.js具有快速的渲染和高效的性能，在处理大型复杂应用时表现优秀。
• 生态系统丰富：Vue.js拥有活跃的社区和强大的生态系统，提供了大量的插件、工具和第三方库，如路由管理器Vue Router、状态管理工具Vuex等。这些资源丰富了Vue.js的功能和扩展性，加快了开发速度。
• 社区支持强大：Vue.js拥有一个全球化的开发者社区，社区成员众多，提供了广泛的教程、文档和讨论。无论你遇到什么问题，都能够在社区中获得帮助和解答，这为开发者提供了宝贵的支持和学习资源

生态系统

Vue的生态系统可以理解为与Vue.js相关的一系列工具、库和资源的集合。就像一个生态系统中有各种不同的生物相互依存和相互作用一样，Vue的生态系统中的各种工具和库也相互配合，为开发者提供更好的开发体验和更丰富的功能。

当谈到Vue.js的生态系统时，有许多相关工具和库可以帮助开发者更高效地构建Vue.js应用程序。

首先，Vue CLI是一个官方提供的命令行工具，它可以帮助你快速搭建和管理Vue.js项目。它提供了一个交互式的界面，可以帮助你选择不同的配置选项，并自动生成项目的基本结构。

接下来，Vuex是一个专门为Vue.js应用程序开发的状态管理库。它提供了一个集中式的存储管理机制，可以帮助你管理应用程序的状态。Vuex使用了类似于Flux架构的概念，包括state（状态）、mutations（变更）和actions（动作）。

另外，Vue Router是Vue.js官方提供的路由管理库。它可以帮助你在Vue.js应用程序中实现页面之间的导航和路由功能。Vue Router提供了一种简单且灵活的方式来定义和管理应用程序的路由。

除了这些官方提供的工具和库之外，还有许多第三方的插件和库可以扩展Vue.js的功能。例如，Element UI是一个基于Vue.js的UI组件库，提供了一系列美观且易于使用的UI组件。Axios是一个用于发送HTTP请求的库，可以帮助你与后端API进行通信。还有许多其他的插件和库，可以根据你的具体需求选择使用。

---

Vue.js基础知识

安装与配置

关于vue的安装和配置，我之前有过一篇非常详细的博客讲解。

这边给个传送门：vue3项目创建步骤，以及项目运行失败的原因和解决方法

基本语法

关于vue 的基础用法，我之前也有过一篇非常详细的博客讲解

这边给个传送门：【半小时入门vue】最容易理解的vue入门方式

这里，我单独把计算属性拿出来说一下：

Vue.js的计算属性（Computed Properties）是一种在Vue实例中声明的属性，它的值是根据其它属性计算得来的。计算属性的主要特点是可以缓存计算结果，在依赖未变化时不会重复计算，以提高性能。
计算属性的用法非常简单，只需要在Vue实例的computed属性中声明即可。
它的语法是这样的：

new Vue({
  // ...
  computed: {
    propertyName: function() {
      // 计算逻辑
      return computedValue;
    }
  }
})

• propertyName：计算属性的名称，可以在模板中使用该名称来获取计算属性的值。
• function：计算属性的计算函数，在这个函数中编写计算逻辑。
• computedValue：计算函数返回的计算结果。

举个例子：

new Vue({
  data: {
    message: '爱你哦，小猫娃'
  },
  computed: {
    reversedMessage: function() {
      // 计算逆转后的消息
      return this.message.split('').reverse().join('');
    }
  }
})

上面，我们定义了一个名为reversedMessage的计算属性，它将message中的文本逆序输出。每当message发生改变时，reversedMessage会自动更新。

⭐⭐计算属性的优点：

• 缓存：计算属性会根据它们的依赖进行缓存，只有在依赖发生改变时才会重新计算。这意味着多次访问同一个计算属性时，只会执行一次计算逻辑。
• 响应式：计算属性依赖的属性发生变化时，计算属性会自动重新计算并更新其值，从而保持视图与数据的同步。

⭐⭐计算属性与方法的对比：
在Vue中，除了计算属性，我们还可以使用方法来实现类似的功能。两者的区别如下：

• 计算属性是基于它们的依赖进行缓存的，只有依赖变化时才会重新计算。而方法在每次调用时都会执行计算逻辑。
• 计算属性适用于需要根据已有属性进行复杂计算的场景，尤其是当多个属性受同一计算逻辑影响时。而方法则适用于简单的计算逻辑。

⭐⭐计算属性的Getter和Setter：
可以通过给计算属性添加getter和setter函数，来实现计算属性的双向绑定。getter用于获取计算属性的值，setter用于设置计算属性的值。

比如说：

new Vue({
  data: {
    xing: '关',
    ming: '云长'
  },
  computed: {
    fullName: {
      get: function() {
        return this.xing+ ' ' + this.ming;
      },
      set: function(newValue) {
        var names = newValue.split(' ');
        this.xing= names[0];
        this.ming= names[1];
      }
    }
  }
})

上面，我们定义了一个双向绑定的计算属性fullName，它根据xing和ming的值进行计算。通过修改fullName的值，会自动更新xing和ming的值。

---

Vue.js主要版本解析

Vue.js 2.x === vue2

Vue.js 2.x是一个渐进式JavaScript框架，主要用于构建用户界面。它具有以下主要功能和特性：

⭐⭐声明式渲染： Vue使用模板语法将数据绑定到DOM元素，使开发者能够以声明的方式描述应用程序的状态和UI，而不必直接操作DOM

<div id="app">
  <p>{{ message }}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
});

⭐⭐组件系统： Vue提供了组件化的开发方式，可以将复杂的UI拆分为独立可重用的组件，并对每个组件进行管理和通信

<template>
  <button @click="increment">{{ count }}</button>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

⭐⭐响应式和数据绑定： Vue使用双向绑定机制实现数据的自动更新，当数据发生变化时，相关的DOM部分会自动更新，反之亦然

<div id="app">
  <input type="text" v-model="message">
  <p>{{ message }}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
});

⭐⭐集成和插件化： Vue可以轻松集成到现有的项目中，也支持使用插件扩展其功能。

// 引入插件
import VueRouter from 'vue-router';

// 使用插件
Vue.use(VueRouter);

⭐⭐虚拟DOM和高效更新： Vue使用虚拟DOM来优化性能，减少对实际DOM的直接操作，通过比较虚拟DOM树的差异来最小化DOM操作

当然了，以上只是Vue2的一些主要功能和特性。除此之外，Vue还提供了路由管理、状态管理、过渡动画等丰富的功能和工具。

后续再细说这方面东西，今天目的是全局去了解vue。

Vue.js 3.x === vue3

Vue.js 3.x相对于2.x版本带来了一些重要的更新和改进，主要包括以下几个方面：

• 更快速的渲染：
  Vue 3.x通过优化虚拟DOM算法和编译器，提升了渲染性能。新的响应式系统使用Proxy替代Object.defineProperty，使得数据的观察更高效，从而带来更快的渲染速度。

• 更小的体积：
  Vue 3.x借助Tree-shaking和新的运行时编译器，可以实现更小的包大小，减少了对整个框架的引入和加载时间。

• Composition API：
  Vue 3.x引入了Composition API，它允许开发者以逻辑组合的方式组织和重用代码。Composition API基于函数式编程风格，使得组件逻辑更可读、可维护，并且更容易实现代码的共享。

• TypeScript支持：
  Vue 3.x提供了更好的TypeScript支持，包括类型推断、类型声明以及更完善的IDE集成，这使得在大型项目中使用Vue更加可靠和高效。

• 更强大的工具链：
  Vue CLI 3是为Vue 3.x设计的全新脚手架工具，提供了更多功能、更好的配置以及更友好的用户界面。还有一些辅助工具和插件也得到了改进，使开发者的日常工作更加轻松。

• 更好的适配性：
  Vue 3.x对于一些现代JavaScript特性，如ECMAScript模块、异步组件等，提供了更好的支持。这使得Vue可以更好地与其他工具和框架集成，并在各种环境中使用。

Vue.js 3.x带来了更快、更小、更易用和更强大的功能，以提高开发效率并提供更好的用户体验。现在vue3各方面很完善，开发者都在使用。况且还有语法糖setup的写法支持，使得vue3要更加方便。

学vue，可以不用vue2，但是不能不知道vue2，因为这是一个历史的演变。可以理解为按键手机到智能手机的转变。
智能手机和按键手机都能打电话，都能发短信。但在按键手机功能基础上，又有了更多的支持、更美观的样式。

从vue2到vue3的迁移

这里需要看到并注意几个方面的问题：

其一：适配性问题

• Vue.js 2.x和3.x之间存在一些不兼容的改变，比如语法、API命名和一些特性的变动。在迁移之前，你需要详细阅读Vue.js官方提供的迁移指南，了解具体的更改和建议。

其二：Composition API

• Vue 3.x引入了Composition API，这是一个强大而灵活的新特性。如果你的项目使用了Options API，那么在迁移时需要将代码迁移到Composition API上。这可能需要一些重构工作，但也可以带来更好的代码组织和重用。

其三：响应式系统变化

• 在Vue 3.x中，响应式系统发生了变化，使用了Proxy代理对象来替代Object.defineProperty。这意味着一些关于响应式的模式或API的写法可能需要进行调整。

其四：生命周期钩子变化

• 一些生命周期钩子在Vue 3.x中发生了改变。例如，beforeCreate和created生命周期钩子被合并为了一个新的setup钩子。在迁移时，需要注意这些变化并相应地调整代码。

其五：插件和第三方库的支持

• 由于Vue.js 3.x与2.x存在一些不兼容的改变，一些插件和第三方库可能需要进行更新或适配才能在Vue 3.x中正常工作。在迁移之前，确保你所使用的插件和库已经经过适配或更新到了支持Vue 3.x的版本。

其六：注意构建工具和周边生态的兼容性

• 如果你使用Vue CLI或其他构建工具，确保将其更新到最新版本，以保证对Vue 3.x的支持。此外，也要注意检查你项目中所使用的其他依赖包、样式和代码库是否与Vue 3.x兼容，并及时更新或替换它们。

其七：充分测试和验证

• 迁移后，要确保针对你的应用程序进行全面的测试和验证，以确认各项功能和交互是否按预期工作，并解决可能出现的问题和bug。

---

Vue.js生态系统

UI框架

Element UI
非常受欢迎且广泛使用的UI组件库。
提供了丰富的可定制的组件，包括按钮、表单、弹窗、导航等。
支持响应式设计和国际化。
兼容性良好，可以与Vue.js 2.x和3.x一起使用。

Vuetify
一个基于Material Design的UI组件库，为开发人员提供了丰富的预定义组件。
所有组件都遵循Material Design规范，具有现代、整洁的外观和交互体验。
提供了大量的主题和配色方案，允许开发人员轻松自定义应用程序的外观。

Ant Design Vue
基于Ant Design设计语言的Vue.js组件库。
提供了一套美观、高质量的组件，包括表单、菜单、栅格等。
具有响应式设计和强大的样式定制能力。
在国内拥有广泛的用户群体和社区支持。

Bulma
一个轻量级、易用的CSS框架，Vue.js可以与其结合使用。
提供了一系列现代化的UI组件和实用的样式类。
网格系统、排版工具和响应式设计等特性使其适用于构建自适应和移动优先的应用程序。

BootstrapVue
将Bootstrap样式与Vue.js集成的工具包。
提供了许多可重用的组件，如按钮、导航、卡片等。
具有丰富的文档和示例，易于上手和学习。

这只是一小部分常用的Vue.js UI组件库，每个库都有其独特的特性和适用场景。选择合适的UI组件库取决于你的项目需求、设计风格和个人偏好。在使用任何库之前，请确保阅读其官方文档并根据自己的需要进行评估和测试。

开发工具

Vue CLI：

• 官方提供的脚手架工具，用于快速搭建Vue.js项目。
• 可以帮助你初始化项目结构、配置构建工具链、添加插件等。
• 提供了丰富的官方插件和预设选项，简化了项目配置和开发流程。

Vue Devtools：

• 浏览器扩展工具，可在Chrome和Firefox上使用。
• 提供了一个调试界面，用于检查Vue组件层次结构、组件状态、事件等。
• 可以查看组件的实时数据变化、性能优化指标并进行调试。

Vuex：

• Vue.js官方提供的状态管理库。
• 用于集中管理Vue应用程序中的共享状态。
• 提供了一种方式来组织和跟踪应用程序的状态，并实现状态的响应式更新与同步。

Vue Router：

• Vue.js官方的路由管理库。
• 用于实现单页面应用（SPA）中的路由功能。
• 支持动态路由、嵌套路由、导航守卫等特性，提供了良好的路由管理和组件切换体验。

Axios：

• 一个基于Promise的HTTP客户端，广泛用于前端与后端数据交互。
• 支持各种请求类型和拦截器，提供了简单易用的API。
• 在Vue.js项目中常用于发起HTTP请求并处理响应。

Element UI Admin：

• 基于Element UI的后台管理系统模板。
• 提供了一套美观、响应式的界面组件和样式。
• 包含经典的布局结构和常见的管理功能，可快速构建功能完备的后台管理系统。

---

vue应用前景

• 前端开发：Vue.js是一种轻量级、易学易用的前端框架，可以用于构建各种类型的Web应用程序。它提供了响应式的数据绑定、组件化开发和灵活的路由管理等特性，使得前端开发变得更加高效和便捷。

• 单页面应用（SPA）：Vue.js与现代的前端技术如Webpack和Vue Router等结合使用，能够轻松构建单页面应用。通过路由管理和组件化开发，实现无刷新、快速响应的用户界面，提升用户体验和性能。

• 移动应用开发：Vue.js结合Cordova或Framework7等跨平台移动应用框架，可以进行移动端应用程序的开发。同时，Vue还提供了Vue Native和Weex等解决方案，用于构建原生移动应用。

• 桌面应用程序：借助Electron等框架，可以将Vue.js用于构建桌面应用程序。利用Web技术和Vue.js的UI组件库，开发者可以开发出跨平台的桌面应用，并享受到快速开发和维护的便利性。

• UI组件库：Vue.js生态系统中涌现了许多优秀的UI组件库，如Element UI、Vuetify和Ant Design Vue等。这些组件库提供了丰富的可定制化和易于使用的UI组件，能够帮助开发者快速构建出美观、功能丰富的用户界面。

---

学习资源推荐

Vue.js官方文档

Vue.js官方文档是学习Vue.js最重要的参考资料，包含了全面而详细的指南、API文档和示例代码，适合各个层次的开发者。

Vue Mastery

Vue
Mastery是一个提供Vue.js视频教程的在线学习平台。他们提供了广泛的课程，从入门到进阶，涵盖了Vue.js的方方面面，包括基础知识、组件开发、状态管理等等。

Vue School

Vue School是另一个值得推荐的在线学习平台，提供了丰富的Vue.js教程。他们的课程覆盖了Vue.js的核心概念、高级特性和实战项目，适合新手和有经验的开发者。

Scotch Vue.js教程

Scotch是一个技术教程网站，其中包括了一些关于Vue.js的免费教程。他们的Vue.js系列教程对于熟悉JavaScript和HTML/CSS的开发者来说非常友好，并且注重实际项目的实践。

Vue.js源码解析系列博客

这是一份由知名技术博主尤雨溪的粉丝整理的Vue.js源码解析系列博客。对于深入了解Vue.js内部实现原理和机制非常有帮助。

Awesome Vue

Awesome Vue是一个GitHub上的开源项目，收集了大量优秀的Vue.js资源和工具，包括教程、插件、组件库等等，非常适合寻找进阶学习材料和实践项目的开发者。

---