【Vue】vue概述

1、简介

Vue.js（简称Vue）是一款用于构建用户界面的渐进式JavaScript框架。
由前Google高级软件工程师尤雨溪（Evan You）于2014年创建，是一个独立且社区驱动的开源项目。
Vue.js基于标准的HTML、CSS和JavaScript，提供了一个声明式、组件化的编程模型，旨在高效地开发用户界面。
Vue.js凭借其易用性、灵活性和高性能，在前端开发领域占据了重要的地位，适用于从简单的单页面应用到复杂的大型企业级应用。

2、主要特点

响应式数据绑定：Vue.js提供了响应式数据绑定机制，使得数据的变化能够自动反映在视图上，简化了开发过程。
组件化：Vue.js鼓励通过小型、独立和可复用的组件构建应用，提高了代码的可维护性和可重用性。
指令系统：Vue.js增加了一套特殊的HTML属性，称为“指令”，用于实现DOM元素的绑定和事件的监听等功能。
虚拟DOM：Vue.js使用虚拟DOM技术来提高页面的渲染效率，通过最小化DOM操作来优化性能。
易于学习和集成：Vue.js的核心库只关注视图层，易于学习和集成到现有项目中。
生态系统丰富：Vue.js拥有庞大的社区支持和完善的生态系统，包括官方路由管理器Vue Router、状态管理库Vuex等，为开发者提供了丰富的工具和库。

3、框架结构

3.1核心部分

实例（Vue Instance）：每个Vue应用都是通过Vue函数创建一个新的Vue实例开始的。实例是Vue应用的入口，包含了应用的数据、模板、挂载元素、方法、生命周期钩子等选项。
模板（Template）：Vue.js使用基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。模板中的特殊HTML属性（指令）告诉Vue如何渲染DOM。
组件（Component）：Vue.js鼓励使用组件化的开发模式，将界面拆分成独立、可复用的组件。每个Vue组件都包含自己的模板、逻辑和样式，它们可以是全局注册的，也可以是局部注册的。
路由（Vue Router）：Vue Router是Vue.js的官方路由管理器，用于构建单页面应用（SPA）。它允许你定义多个路由，每个路由映射一个组件，实现页面的无缝切换。
状态管理（Vuex）：Vuex是Vue.js的官方状态管理模式，用于在多个组件之间共享状态。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

3.2实例

3.2.1简介

Vue实例是Vue.js框架中的核心概念，它代表了Vue应用中的一个独立单元，用于管理数据、模板、方法以及与视图相关的逻辑。
Vue实例通过new Vue()构造函数创建。在创建Vue实例时，可以传入一个选项对象，该对象包含了Vue实例所需的各种配置，如挂载元素（el）、数据（data）、方法（methods）、计算属性（computed）、侦听器（watch）等。

例如：

const app = new Vue({  el: '#app',  data: {  message: 'Hello Vue!'  },  methods: {  reverseMessage() {  this.message = this.message.split('').reverse().join('');  }  }  
});

3.2.2主要组成部分

数据对象（data）：
- 包含Vue应用的状态数据，这些数据将被响应式地绑定到视图上。
- Vue会自动将data中的属性转换为getter和setter，从而实现数据的响应式更新。
模板（Template）：
- Vue实例使用的HTML模板，定义了最终生成的视图结构。
- 模板中可以使用Vue的模板语法来绑定数据、定义事件处理器等。
方法（methods）：
- 在Vue实例中可以定义各种方法，用于处理业务逻辑、处理用户事件等。
- 方法中的this自动绑定为Vue实例本身。
生命周期钩子（Lifecycle Hooks）：
- Vue实例具有一系列的生命周期钩子函数，允许我们在不同阶段执行自定义逻辑。
- 常用的生命周期钩子包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed等。
计算属性（computed）：
- 根据已有的数据计算衍生数据的方式，计算属性的值会根据依赖的数据动态更新。
- 计算属性是基于它们的响应式依赖进行缓存的，只有在相关响应式依赖发生改变时它们才会重新求值。
侦听器（watch）：
- Vue实例可以侦听数据的变化，并在数据发生变化时执行相应的逻辑。
- 侦听器适用于执行异步操作或开销较大的操作。
事件处理器：
- 在Vue实例中可以绑定处理DOM事件的方法。
- 事件处理器通过v-on指令或@符号绑定到DOM元素上。
指令（Directives）：
- Vue提供了一些内置指令，如v-bind、v-model、v-if、v-for等，用于在模板中插入数据绑定和动态内容。
过滤器（Filters）：
- Vue中的过滤器允许我们在模板中对数据进行格式化显示。
- 需要注意的是，在Vue 2.x版本中过滤器仍然可用，但在Vue 3.x版本中已被移除，推荐使用计算属性或方法来实现相同的功能。