简介

1.vue是什么

是构建用户界面的渐进式 JavaScript 框架

2.快速上手

安装插件：vue-devtools

1. 直接访问谷歌商店, 搜索并安装
2. 打开极简插件官网, 下载后, 拖拽至扩展程序中安装

3.vue的相关指令

3.1作用：

①Vue 会根据不同的指令实现不同的功能

②可以把指令看做一个特殊的 HTML 属性, 都是以 v- 开头

3.2相关指令

	作用	示例	注意事项
v-html	设置元素的 innerHTML
v-if 和 v-show	控制元素显示隐藏		v-show 是控制 display: none 来实现显示隐藏的, 适合频繁切换显示隐藏的场景。 v-if 是创建/删除 DOM 元素来实现显示隐藏的, 适合初始状态就确定显示隐藏的场景
v-else 和 v-else-if	v-if 的多分支结构		v-else 必须紧贴着 v-if 或 v-else-if, 中间不能间隔其他元素, 注释除外
v-on（简写@click）	绑定事件	内联语句=》<button v-on:事件名="内联语句" />	绑定事件处理函数 <button v-on:事件名="事件处理函数" /> 需要在 methods 中声明事件处理函数 new Vue({ el: '#app', data: {},
v-bind简写 ：属性名	动态设置 HTML 属性（src href title ...）	<img v-bind:属性名="表达式" />
v-for	循环渲染标签元素的	v-for="(每一项, 索引) in 数组"	v-for 写在哪个标签上就代表循环渲染哪个标签
v-model	主要用于表单元素的双向数据绑定	语法：v-model="vue 变量"	效果：数据变化, 视图会自动更新 用户输入内容, 数据自动更新
key属性	唯一标识, 用于让 Vue 来区分数据项, 自动进行排列顺序的	如果没设置 key 则默认按照就地更新策略, 尽可能复用标签, 从而不删除当前元素	字符串或数字 类型必须是唯一的, 不能重复 推荐使用 id 作为 key

4.指令修饰符

简介：通过"."指明一些指令后缀,不同后缀封装了不同的处理操作

4.1 按键修饰符

@keyup.enter

4.2 v-model修饰符

v-model.trim 去除首尾空格

v-model.number 转数字

4.3 事件修饰符

@事件名.stop=》阻止冒泡

@事件名.prevent=》阻止默认行为

5.v-bind对于样式操作的增强

5.1 class类名

:class="{类名1:布尔值,类名2:布尔值}" 适用场景:一个类名,来回切换

:class="[类名1,类名2,类名3]" 适用场景:批量添加或删除类

5.2 style行内样式

:style="{css属性名1:css属性值,css属性名2:css属性值}" :style="{width:100px}"

6.v-model应用于其他表单元素

常见的表单元素都可以用v-model绑定关联_->快速获取或设置表单元素

输入框 input:text value

文本框 textarea value

复选框 input:checkbox ①绑定的是数组,向数组中添加value

②绑定的是布尔值,改变的是checked

单选框 input:radio value

下拉菜单 select value

7.computed计算属性

7.1 概念:基于现有的数据,计算出来的新属性,依赖的数据变化,自动重新计算

7.2 语法:①声明在computed配置项中,一个计算属性对应一个函数 ②使用起来和普通属性一样使用{{计算属性名}}

8.watch侦听器

作用:监视数据变化,执行一些业务逻辑或异步操作

语法:

①简单写法=>简单类型数据,直接监视 ②完整写法=>添加额外配置项

9.vue的生命周期

vue里面的生命周期函数有哪些？Vue父子组件生命周期顺序？

它是指vue的实例对象从创建到销毁的过程，有四个周期八个钩子函数。一般在created函数中发送ajax请求获取数据，在mounted中获取挂载完毕的真实dom，destroy中销毁定时器，延时器或绑定的一些事件。

初始化、挂载、更新、销毁。beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed

创建的时候有4个： beforeCreate created beforeMount mounted

更新的时候 是 beforeUpdate updated

销毁的时候 是 beforeDestroy destroyed

如果组件有缓存，就是加上了keep-alive以后，会多两个生命周期函数， activeted deactiveted

在父子组件里面的生命周期：

先执行父组件的3个钩子函数 -- 然后执行完子组件的创建时期的4个钩子函数 --- 最后再执行父组件的mounted钩子函数 （Parent beforeCreate -> Parent Created -> Parent BeforeMount -> Child BeforeCreate -> Child Created -> Child BeforeMount -> Child Mounted -> Parent Mounted）

10.脚手架Vue CLI

Vue CLI 是vue官方提供的一个全局命令工具, 可以帮助我们快速创建一个开发vue项目的标准化基础架子(集成了webpack配置)

使用步骤: 1.全局安装(1次): npm i @vue/cli -g 2.查看vue版本: vue --version 3.创建项目架子: vue create project-name(项目名-不能用中文) 4.启动项目: npm run serve(找package.json)

11.开发vue的两种方式

①核心包传统开发模式 基于html/css/js文件,直接引入核心包,开发vue

②工程化开发模式 基于构建工具(例如:webpack)的环境中开发vue

12.脚手架目录文件介绍

index.html index.html模板文件

App.vue App根组件=>项目运行看到的内容就在这里编写

main.js 入口文件=>打包或运行,第一个执行的文件

13.组件化

1.好处

便于维护,利于复用。

把页面拆分成一个个组件来开发

2.组件是什么

定义：.vue结尾的文件就是一个组件

组成：template，script，style

template 有且只能有一个根元素

script

style lang设置less预处理器,记得装包 npm i less less-loader -g

3.组件的使用

分为局部注册和全局注册

4.组件三大组成部分的注意点

结构:有且只能有一个根元素

样式:默认全局样式,加上scoped局部样式

逻辑:data是一个函数,保证数据独立

14.scoped的原理

1.给当前组件的所有标签添加自定义属性data-v-hash,当前组件的hash值与其他组件的hash不相等2.

2.css样式是属性交集选择器,改变当前组件的样式其他组件不受影响

15.组建通信

定义:就是指组件与组件之间的数据传递

注意点：1.组件的数据是独立的,无法直接访问其他组件的数据

2.想用其他组件的数据->组件通信

16.vue路由模式=>hash和history

区别：

路由有两种模式：hash和history

hash有#号 ，history没有#号

hash不会刷新页面，不会向服务器发送请求【刷新没有任何影响】。history会刷新页面，向这个地址发送请求【刷新页面】===因为会向服务器请求这个地址

hash上线不需要任何操作没有任何影响，但是history会出现页面找不到，因为会向服务器发送请求，所以需要服务器帮助解决。

原理：hash：hashchange history:popState replaceState

跳转方式2种：声明式导航和编程式导航跳转，声明式导航跳转是route-link，to里面的是地址

编程式跳转用this.$router.push('跳转的路径')

传参方式有2种：query传参（有？号）和params传参（没有？号）。query用$route.query.参数名 接收参数，params是用$route.params.参数名 来接收参数

导航守卫钩子函数：beforeEach，afterEach

17.vuex的几个概念？

state是全局数据的仓库、容器

mutations 同步修改state的地方， mutations的函数的 第一个参数是最新的 state值，在组件里面 通过 commit方法 提交mutatiton

actions里面是调用mutations的地方，可以放异步操作。所有的state数据的修改都只能通过mutations。actions函数的第一个参数是类似与store实例的context对象。组件里面访问acitons是 dispatch(xxxx)分发actions

getters是从 state 中派生出一些状态，看做store的计算属性，依赖的数据如果不发生改变，就会使用缓存的数据，提升性能

modules将各个模块封装为单独的文件，方便后期代码维护， 关键词 namespaced

18.vuex在组件里面怎么使用

在vuex里面 先要定义修改数据的mutations，以及发请求的actions，在actions函数里面去 commit提交mutations

在业务组件里面，直接通过dispatch分发我们的actions

19.组件通信

1.props/$emit父子组件通信

父传子=》首先在父组件中子组件定义自定义属性，在子组件里通过props接收父组件传递的数据。

子传父=》子组件用$emit来触发自定义事件,并且可以传递参数给父组件。父组件通过监听子组件的自定义事件来获取传递的数据

2.ref与$parent/$children适用父子组件通信

3.EventBus($emit/$on)兄弟组件传值【main.js=>原型对象上 vue.prototype.$Bus=new vue() 兄：this.$Bus.emit() 弟：this.$Bus.on】

在全局使用$eventBus挂载属性，通过$emit/on，来传值

4.provide/inject适用后代组件通信

provide/inject

5.$attrs/$listeners适用于隔代组件通信

6.Vuex适用于父子、隔代、兄弟组件通信

Vuex 的核心概念包括：State（状态）、Mutation（变化）、Action（动作）、Getter（获取器）、Module（模块）

State

State 提供唯一的公共数据源，所有共享的数据都要统一放到 Store 中的 State 中存储。在 state 对象中可以添加我们要共享的数据

mutations

state 数据的修改只能通过 mutations，并且 mutations 必须是同步的。mutations 是一个对象，对象中存放修改 state 的方法

actions

Action 类似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更状态
• Action 可以包含任意异步操作

getters

获取器用于从状态中派生出新的状态。它可以将现有的状态进行计算和转换，并提供一个类似于计算属性的方式来访问这些派生状态

modules

Module（模块）: 模块可以将整个状态树分割成更小的模块，每个模块都有自己的状态(state)、变化(mutation)、动作(action) 和获取器(getter)。这样可以将复杂的应用程序拆分成可维护和可测试的模块。通过模块化的方式，可以更好地组织和维护大型的状态管理

20.vue祖孙组件传值有哪些方法，以及它们的顺序

provide和inject

vuex

ref

21.vue2响应式的原理

vue响应式也叫作数据双向绑定，大致原理阐述：

vue响应式的原理是通过数据劫持+发布者-订阅者模式的方式来实现的，首先是通过ES5提供的Object.defineProperty()方法来劫持(监听)各属性的getter、setter，并在当监听的属性发生变动时通知订阅者，是否需要更新，若更新就会执行对应的更新函数。

vue3响应式的原理是通过proxy来实现的

什么是数据劫持

数据劫持比较好理解，通常我们利用Object.defineProperty劫持对象的访问器，在属性值发生变化时我们可以获取变化，从而进行进一步操作

22.vue2和vue3的区别

①响应式原理不同

vue2是利用ES5的object.definePropert()对数据进行监听和结合发布订阅模式的方式来实现的

vue3中使用了ES6的proxy对数据代理

②组合API

vue2采用选项式API对比vue3组合式API

vue3中没有this，没有beforecreate和created，它们的功能放在了setup中

③根节点

vue2只能有一个根节点，vue3可以有多个根节点

vue2若想新增或者修改一个需求，就需要分别修改：data、methods、computed，不便于维护和复用

vue3的优点

1.首次渲染更快

2.diff算法更快

3.内存占用更少

4.打包体积更小

5.更好的支持TypeScript

6.Composition API 组合API

vue3不同点：

1.组件一个根节点非必需

2.创建应用挂载到根容器

3.入口页面，ESM（模块化）加载资源

23.vue3的注意事项

1.setup函数中不能使用this。vue为了避免我们错误的使用，直接将setup函数中的this修改成了undefined

2.setup函数中的props是响应式的，当传入新的prop时，他将被更新。但是，因为props是响应式的，你不能使用ES6解构，因为它会消除prop的响应式，如果需要解构prop，可以使用setup函数中的toRefs来完成此操作。

24.组件通信方式eventBus原理

EventBus 是一种用于在不同的组件或模块之间传递事件的方法。它通常通过一个中央事件总线来实现，该事件总线可以连接不同的组件或模块，使得它们可以进行松耦合通信。

以下是使用 EventBus 的一个简单示例：

首先，你需要安装 EventBus 库，如果你使用的是 Node.js，可以通过 npm 安装：

npm install eventbus

然后，你可以创建一个 EventBus 实例并使用它来发送和监听事件：

// 引入 EventBus
const EventBus = require('eventbus');
 
// 创建 EventBus 实例
const bus = new EventBus();
 
// 组件 A 监听事件
bus.on('eventName', (data) => {
  console.log('Event received in Component A with data:', data);
});
 
// 组件 B 触发事件
bus.emit('eventName', { message: 'Hello from Component B!' });

在这个例子中，组件 A 通过 bus.on 监听名为 'eventName' 的事件，而组件 B 通过 bus.emit 触发同样名为 'eventName' 的事件，并附带数据。当事件被触发时，监听该事件的所有组件都会接收到数据并执行相应的回调函数。

这就是 EventBus 的基本使用方法。实际应用中，你可能需要根据具体情况扩展和定制 EventBus，例如添加事件命名空间、支持异步事件监听器等。

25.vue-router路由钩子有哪些

全局钩子beforeEach、afterEach

单个路由里面的钩子：beforeEnter、beforeLeave

组件路由：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave