😊博主：小猫娃来啦
😊文章核心：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.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的生态系统可以理解为与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.js 3.x带来了更快、更小、更易用和更强大的功能，以提高开发效率并提供更好的用户体验。现在vue3各方面很完善，开发者都在使用。况且还有语法糖setup的写法支持，使得vue3要更加方便。

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

从vue2到vue3的迁移

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

其一：适配性问题

其二：Composition API

其三：响应式系统变化

其四：生命周期钩子变化

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

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

其七：充分测试和验证

Vue.js生态系统

UI框架

这只是一小部分常用的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 Mastery

Vue School

Scotch Vue.js教程

Vue.js源码解析系列博客

Awesome Vue