vue知识点大全【59题】

如果data是一个函数的话，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。所以说vue组件的data必须是函数。这都是因为js的特性带来的，跟vue本身设计无关。

6.Vue中常见的指令有哪些？。【考核知识点：Vue的指令】

标红的必背

v-cloak 防止页面加载闪烁

v-html 可以把html的内容填充到标签中去

v-text 指令用于将数据填充到标签中，作用于插值表达式类似

v-pre 显示指令中原始信息，静态的内容不需要编译，可以加快渲染

v-once 执行一次性的插值【当数据改变时，插值处的内容不会继续更新】

v-on 用来进行事件的绑定

v-if 判断是否创建或销毁dom元素

v-else 给 v-if 添加一个 "else" 块，必须跟在 v-if之后

v-show 是否显示/隐藏dom元素

v-for 循环

v-model 数据双向绑定

v-bind 动态绑定属性

7.v-if和v-show的区别？以及使用场景

v-if和v-show都是控制元素的显示与隐藏,

不过v-if控制元素的显示和隐藏的时候会创建或删除对应的dom元素,当每一个显示的时候,都会重新创建dom和渲染.

而v-show则是通过css的display来控制元素的显示与隐藏.

v-if比较耗费性能,所以我们涉及到频繁的显示/隐藏操作建议使用v-show,如果不是频繁操作的话,我们可以v-if

8.Vue怎么绑定事件？以及常用的事件修饰符【考核知识点：Vue的修饰符】

v-on：自定义事件名=”方法名”

@事件.stop 阻止事件冒泡

@事件.capture 设置事件捕获

@事件.prevent 阻止默认事件

@事件.once 事件执行一次

@事件.native 事件穿透

@事件.self事件作用在自身触发

9.Vue中双向数据绑定是如何实现的【考核知识点：vue双向绑定原理】

数据劫持结合“发布-订阅”模式的方式，通过Object.defineProperty（）的 set 和 get，在数据变动时发布消息给订阅者触发监听。

10.Methods、 computed 、watch的区别

Methods 存放方法的区域调用一次，执行一次不支持缓存支持异步

Computed 计算属性依赖值发生改变时会重新计算支持缓存不支持异步

Watch 监听监听的数据发生改变时会触发不支持缓存支持异步

11.什么是过滤器？怎么定义全局和局部过滤器。【考核知识点：过滤器】

所谓的vue过滤器就是将数据进行二次处理,得到我们想要的结果数据

vue的过滤器分为两种,第一种是全局过滤器,通过vue.filter来进行定义,第二种是局部过滤器,需要定义在组件内部项目中我们通过过滤器将后台返回的状态0 和1 转化为支付或者未支付

12.单页面应用和多页面应用区别以及优缺点

单页面：只有一个html页面，跳转方式是组件之间的切换

优点：跳转流畅、组件化开发、组件可复用、开发便捷

缺点：首屏加载过慢

多页面：有多个页面，跳转方式是页面之间的跳转

优点：首屏加载块

缺点：跳转速度慢

13.自定义指令有哪些参数

指令钩子函数会被传入以下参数：

·el：指令所绑定的元素

binding：一个对象，

name：指令名，不包括 v- 前缀。

value：指令的绑定值

14.父传递子如何传递

在子组件的标签上定义属性子组件通过props来进行接收,可以通过数组的方式进行接收,也可以通过对象的方式来进行接收，如果通过对象的形式传递，可以使用default设置默认值

15.子传递父如何传递

子组件通过this.$emit("自定义事件",传递的数据), 父组件通过在子组件标签上监听自定义事件获取数据

16.兄弟组件如何通信

通过中央事件总线eventBus,

1.创建一个空的js文件,导出一个vue实例

2.传数据通过this.$bus.$emit（“自定义事件”，传递的数据）

3.接数据通过this.$bus.$on(“自定义事件”, 处理函数)

17.Props验证类型都有哪些（8）

Number、boolean、string、object、array、function、date、symbol

18.keep-alive是什么？keep-alive怎么使用

keep-alive是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们，它自身不会渲染一个DOM元素，也不会出现在父组件中

使用方式：包裹在需要缓存的组件外

19.$nextTick的作用？【考核知识点：$nextTick】

$nextTick也叫做异步更新队列方法,而$nextTick方法的主要作用就是等待dom元素加载完毕之后才会执行的回调函数,我们经常会在$nextTick方法里面`获取dom元素

20.组件的生命周期函数（11个），分别是什么意思

beforeCreate：实例创建之前。

created：实例创建之后。

beforeMount：组件挂载之前。

mounted：组件挂载之后。

beforeUpdate：数据改变，视图更新之前。

updated：试图更新之后。

beforeDestroy：实例销毁之前。

destroyed：实例销毁之后。

activated 被缓存的组件激活时调用。

deactivated 被缓存的组件停用时调用。

errorCaptured 捕获来自子孙组件的错误时被调用

21.Vue-Router前端路由有哪几种模式【考核知识点：路由模式】

一共有两种,分别是哈希和history，hash 是指 url 上的#号以及后面的字符，history没有带#，外观比hash 好看，hash模式不会包含在http请求当中,并且hash不会重新加载页面

使用history模式的话,如果前端的url和后端baseURL不一致的话,会报404错误,所以使用history模式的话我们需要和后端配合.

22.路由钩子函数共有几种？分别是什么？

一：全局守卫

beforeEach() 路由前置守卫

beforeResolve 路由解析守卫

afterEach() 路由后置守卫

二：组件级路由守卫

beforeRouteEnter(){ } 进入当前路由之前

beforeRouteUpdate(){ } 当前路由更新之前

beforeRouteLeave(){} 离开当前路由之前

三：路由独享守卫

beforeEnter(){} 进入之前

23.路由钩子函数参数to、from、next分别是什么意思？

分别对应的是要进入的路由、离开之前的路由,以及进入下一个路由，放行函数，在项目中我们经常使用路由守卫实现页面的鉴权.

24.vue中$router和$route区别

router是VueRouter的一个对象，可以跳转路由，并且在跳转路由的同时发送参数

route是当前路由对象，每一个路由都有一个route对象，可以获取对应的name,path,params,query等

25.有列表页进入到详情页的思路

(1)在列表页中给某个元素一个点击事件，并传递一个值，在methods的方法中写跳转（this.$router.push({name:”xiang”,params:{zhi:值}})）

(2)在详情页 data获取传递过来的值（this.$route.params.值）

26.Params和query的区别

(1) query可以使用name和path而params只能使用name

(2) 使用params传参刷新后不会保存，而query传参刷新后可以保存

(3) Params在地址栏中不会显示，query会显示

(4) Params可以和动态路由一起使用，query不可以

27. 路由导航守卫的使用场景–

用户登录之后会将token保存到本地存储中，我们通常在前置守卫中判断token，如果token存在则认为用户登录了，正常放行，如果token不存在则认为用户没有登录，将用户限制在login页面

用户登录之后,我们会把后台返回的token以及用户信息保存到vuex和本地,当页面进行跳转的时候,我们会在路由守卫里面获取vuex里面的token,如果token存在的话,我们则使用next让他进入要跳转的页面,如果token不存在的话我们使用next方法让他回到登录页

28.Element-ui的局部引入?【考核知识点：element-ui的使用】

在 main.js 中写入以下内容：

import { Button} from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(Button);

29.Axios在vue中怎么使用

1.先安装 cnpm i axios --save

2.在main.js中引入

import axios from ‘axios’

Vue.prototype.$axios = axios

3.使用 this.$axios.get(‘url’).then()

30.简述拦截器是什么，共有几个拦截点，分别是什么？【考核知识点：axios拦截器】

首先呢,axios拦截器是axios给我们提供的两个方法,通过这两个方法我们可以对请求发送之前以及响应之后进行处理(拦截). 这两个拦截器不需要手动触发,只要发送http请求的时候就会自动触发.共有4个拦截点

对请求之前进行拦截
对请求错误进行拦截
对响应数据进行拦截
对响应错误进行拦截

我在项目中经常通过拦截器发送token, 对token进行过期处理,以及进行其他的一些操作

//响应拦截

axios.interceptors.response.use(function(response){

//对响应数据做点什么

return response.data

},function(error){

//对错误响应做点什么

return Promise.reject(error)

})

//请求拦截

axios.interceptors.request.use(function(config){

//在发送请求之前做些什么

return config

},function(error){

//对请求错误做些什么

return Promise.reject(error)

})

我在项目中经常通过拦截器发送token, 对token进行过期处理,以及进行其他的一些操作

31.vue中如何解决跨域问题？

本地跨域是通过在`vue.config.js`文件里面的`devServer`属性里面的`proxy`属性里面配置,一共配置三个属性,分别是`代理名称代理地址开启跨域重写路径`,

32.Vuex的五大核心及代表的意义？

1、state - 存放数据存放store实例的状态对象，用于定义共享的数据。

2、Action - 异步操作动作，向store发出调用通知，执行异步操作

3、Mutations - 用来修改state，它只用于修改state中定义的状态变量。

4、getters - 计算属性读取器，外部程序通过它获取变量的具体值，或者在取值前做一些计算（可以认为是store的计算属性）

5、module- 数据模块化对state进行分类处理

33.详述Vuex运行机制

(1)Vuex的状态存储是响应式的

(2)当vue组件从store中读取时，若store中状态发生改变，响应的组件也会更新状态

(3)不能直接改变state，必须通过显示的提交(commit)mutations来追踪每个状态的变化

34.Vuex中如何异步修改数据

（1）同步更改mutations

（2）异部更改action,action中通过commit触发mutations进行state数据更改

（3）页面中触发action中函数

35.vuex如何实现持久化存储？。【考核知识点：vuex的持久化】

vuex也有一些弊端,比如浏览器刷新的时候,vuex的数据会丢失,我们一般结合本地存储来解决,当我们在mutations里面改变state的时候在通过localStorage或者sessionStorage存储到本地，也可以使用插件vuex-persistedstate, cnpm i vuex-persistedstate --save

36.如何实现退出功能。【考核知识点：退出功能】

删除掉本地存储的token或者cookie,并跳转至登录页面，调用退出接口。

37.如何解决vue首屏加载过慢？

路由懒加载
使用异步组件，按需加载
图片量多的时候可以进行分批的加载，图片懒加载

38.说一下你对slot插槽的理解?

首先呢,所谓的插槽就是一个占位符,`将自定义组件的内容展示出来`.我们知道自定义的组件里面如果写内容的话,页面是不会显示出来的,如果我们想让自定义组件里面的内容显示出来,我们就需要使用slot的插槽.

插槽是一个占位符，分为三种

●`默认插槽`：又名匿名插槽，当slot没有指定name属性值的时候，默认显示插槽，一个组件内只有一个匿名插槽。

●`具名插槽`：带有具体名字的插槽，也就是带有name属性的slot，一个组件可以出现多个具名插槽。

●`作用域插槽`：默认插槽、具名插槽的一个变体，可以是匿名插槽，也可以是具名插槽，能够传递数据该插槽的不同点是在子组件渲染作用域插槽时，可以将子组件内部的数据传递给父组件，让父组件根据子组件的传递过来的数据决定如何渲染该插槽。

39.在vue中使用echarts的步骤？。【考核知识点：vue中使用echarts】

引入echarts库
设置参数
初始化echarts
绘制图表（setOption）

vue有哪些内置组件？

component 动态组件

transition 动画

transition-group 动画

keep - alive 缓存

slot 插槽

40.简述promise

Promise 是异步编程的一种解决方案，解决一些需要花费长时间的任务，进行异步处理，防止任务阻塞。其实就是一个构造函数，自己身上有all、resolve、reject这几种方法。

Promise有三种状态：pending(等待)、fulfiled（成功）、rejected（失败）

41.简述async await

Async/await是ES7提出的基于promise解决异步的最终方案，它是同步语法，也就是用同步语法写异步的代码。

作用：异步转同步

使用方法：

async function fn () {

const res = await new Promise()

}

42.简述js数据类型

Js共有8种数据类型。

基本数据类型：undefined、null、boolean、number、string

引用数据类型：object、function、array

43.什么是闭包

闭包是指有权访问另一个函数作用域中变量的函数

使用场景：封闭作用域，函数节流，作用域链，参数传递，延长局部变量的生命等

44.箭头函数和普通函数的区别

（1）箭头函数全都是匿名函数；普通函数可以是匿名函数，也可以有命名函数

（2）箭头函数没有原型对象，不能用作构造函数，不能使用new；普通函数可以用于构造函数，以此创建对象实例

（3）this指向问题：

- 在普通函数中，this总是指向调用它的对象，如果用作构造函数，this指向创建的对象实例。

- 而**箭头函数本身没有this**，但是它在声明时可以捕获其所在上下文的this供自己使用。也可以理解为它使用的是父级的this。

45.简述vuex及其使用

Vuex是采用集中式存储管理应用的所有组件的状态，解决多组件通信，简单来说，就是管理数据的，相当于一个仓库，里面存放着各种需要共享的数据，所有组件都可以拿到里面的数据。

使用：(1)安装vuex依赖包（2）在src目录新建store/index.js作为状态管理模块，并导入vuex包（3）创建store对象（4）将store对象挂载在vue实例上

46.简述vue生命周期函数

beforeCreate：实例创建之前。

created：实例创建之后。

beforeMount：组件挂载之前。

mounted：组件挂载之后。

运行阶段的两个：

beforeUpdate：数据改变，视图更新之前。

updated：试图更新之后。

销毁阶段的两个：

beforeDestroy：实例销毁之前。

destroyed：实例销毁之后。

其他三个：

activated 被 keep-alive 缓存的组件激活时调用。

deactivated 被 keep-alive 缓存的组件停用时调用。

errorCaptured 2.5.0+ 新增当捕获一个来自子孙组件的错误时被调用

47.vue常用的指令有哪些

v-cloak 防止页面加载闪烁

v-html 可以把html的内容填充到标签中去

v-text 指令用于将数据填充到标签中，作用于插值表达式类似

v-pre 显示指令中原始信息，静态的内容不需要编译，可以加快渲染

v-once 执行一次性的插值【当数据改变时，插值处的内容不会继续更新】

v-on 用来进行事件的绑定

v-if 判断是否创建或销毁dom元素

v-else 给 v-if 添加一个 "else" 块，必须跟在 v-if之后

v-show 是否显示/隐藏dom元素

v-for 循环

v-model 数据双向绑定

v-bind 动态绑定属性

48.vue常用的修饰符

v-on：自定义事件名=”方法名”

@事件.stop 阻止事件冒泡

@事件.capture 设置事件捕获

@事件.prevent 阻止默认事件

@事件.once 事件执行一次

@事件.self事件作用在自身触发

49.vue中methods,computed,watch的区别

（1）methods是用来定义方法的区域，computed是计算属性；watch是监听，监听data中的数据变化。

（2）methods定义的方法需要调用才能触发. 不具备缓存；computed支持缓存，只有当其依赖的属性的值发生变化时，才会重新计算，否则使用缓存中的属性值；watch不支持缓存，当对应属性发生变化的时候，响应执行。

（3）computed不支持异步，有异步操作时无法监听数据变化；watch支持异步操作。computed第一次加载时就监听；watch默认第一次加载时不监听

（4）computed中的函数必须调用return；watch不是。

50.什么是nextTick

$nextTick也叫做异步更新队列方法,而$nextTick方法的主要作用就是等待dom元素加载完毕之后才会执行的回调函数,我们经常会在$nextTick方法里面`获取dom元素`

51.路由导航守卫有几种

路由的生命周期函数（路由的钩子函数）路由的导航守卫

一：全局的守卫

无论访问哪一个路径，都会触发全局的钩子函数，位置是调用router的方法 router/index.js

router.beforeEach() 进入之前触发

beforeResolve 路由解析守卫

router.afterEach() 进入之后触发

二：组件级路由守卫放在要守卫的组件里，跟data和methods同级

beforeRouteEnter(){ }

beforeRouteUpdate(){ }

beforeRouteLeave(){}

三：单个路由规则独享的守卫写在路由配置中，只有访问到这个路径，才能触发钩子函数

beforeEnter(){}

52.路由有哪两种模式

vue的路由模式一共有两种,分别是哈希和history. 他们的区别是hash 就是指 url 尾巴后的#号以及后面的字符，history没有带#，外观上比hash 模式好看些.hash模式不会包含在http请求当中,并且hash不会重新加载页面,hash模式的主要原理就是`onhashchange()事件`

而使用history模式的话,如果前端的url和后端发起请求的url不一致的话,会报404错误,所以使用history模块的话我们需要和后端进行配合.