P6Vue 面试题
前言
Vue框架
是一个致力打造构建用户界面的渐进式框架。
文章目录
- A类
- A1. let 和var 的区别
- A2. 解构赋值是什么
- A3. 基本数据类型和引用数据类型的区别
- A4. 子组件如何传值给夫组件
- A5. v-if 和 v-show 的区别及使用场景
- A6. v-cloak 有什么作用?
- A7. 组件之间的通讯分几种 分别是什么?
- A8. Vue-router 共有几种模式 默认是哪种?
- A9. Vuex是什么
- A10. Vue.js 的两个核心是什么
- A11. Vue如何自定义过滤器
- A12. Vue如何新增自定义指令
- A13. 路由对象route 和 router 的 区别
- A14. params和query 的区别
- A15. axios 常用的请求方式有哪些
- A16. $nextTick的作用
- A17. Vue路由的跳转方式有几种
- B类
- B1. 什么是Vue的计算属性
- B2. set数据结构有哪些常用的属性和方法
- B3. 箭头函数和function区别或新增了那些特性
- B4.Promise 常用方式有哪些及作用是什么
- B5. vue 中 key 的作用
- B6. Vue中双向绑定是如何实现的
- B7. keep-alive 的使用
- B8. Props 验证类型都有哪些
- B9. created 和mounted 的区别
- B10. assets 和static的区别
- B11. vuex 中如何异步修改数据
- B12. 简述拦截器是什么,共有几个拦截点,分别时什么?
- B13. vue的双向绑定原理
- B14. 路由的守卫有几种
- B15. 如何让css只在当前vue组建起作用
- B16. vue常用的修饰符
- B17. 怎么定义 vue-router 的动态路由? 怎么获取传过来的值
- C类
提示:以下是本篇文章正文内容,下面案例可供参考
A类
A1. let 和var 的区别
相同点:
作用都是定义变量关键字
区别点 :
作用域只限制与当前代码块{} -------------- var 的作用域则是函数体function(){}
使用let声明变量的作用于不会提升 ----- 而var会自动提升
在相同的作用于下不能有相同发的变量,否则会报错 ----- 而var中则可以出现相同变量名,且不会报错,for循环提现父子作用域
A2. 解构赋值是什么
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destrycturing)
解构赋值,左右结构必须一样,使用左边定义的值,快速的去除数据中对应的数据值,而且定义和赋值必须放到一起,不然的话就会报错,取不出来数据值,而且左边也必须是一个js存在数据结构不然的话也会报错,解构赋值的主要作用还是 快速的让我们在数据中榨取我们想要的数据
A3. 基本数据类型和引用数据类型的区别
ECMAScript 变量包含两种不同类型的值:基本数据类型、引用数据类型
基本数据类型:指的是简单数据段 // Undefined、Null、Boolean、Number 和 String
引用数据类型:指的是那些可能有多个值定义的对象 // Array、Object、Function 等
A4. 子组件如何传值给夫组件
具体实现:子组件通过绑定事件触发函数,在其中设置 this.$emit(‘要派发的自定义事件’,要传递的值),
$emit 中有两个参数 一是要派发的自定义事件,第二个参数是要传递的值
A5. v-if 和 v-show 的区别及使用场景
当一个元素会被频繁的显示和隐藏时,使用v-show
当元素在响应式网页的操作过程中,根据不同用户的需求,可能永远不会被显示或隐藏时,则使用v-if
A6. v-cloak 有什么作用?
v-cloak 能够解决插值表达式闪烁的问题,需要在style中设置样式 [v-cloak]{display:none}
A7. 组件之间的通讯分几种 分别是什么?
第一种:夫传字:
主要通过 props 来实现的 具体实现:父组件通过 import 引入子组件,并注册,在子组件标签上添加要传递的属性,子组件通过 props 接收,接收有两种形式 一是通过数组形式[‘要接收的属性’], 二是通过对象形式 { } 来接收,对象形式可以设置要传递的数据类型和默认值,而数组只是简单的接收
第二种:子传夫
主要通过 $ emit 来实现 具体实现: 子组件通过绑定事件触发函数,在其中设置 this. $ emit(‘要派发的自定义事件’,
要传递的值), $ emit 中有两个参数 一是 要派发的自定义事件,第二个参数是要传递的值
第三种:兄弟之间传值
方式一:通过 event bus 实现 具体实现:创建一个空的 vue 并暴露出去,这个作为公共的 bus ,即当两个组件的桥梁,在两个兄弟组件中分别引入刚才创建的 bus ,在组件A中通过bus.$emit(‘自定义事件名’,要发送的值) 发送数据,在组件B中 通过bus. $on(‘自定义事件名’,function(){ 即为要接受的值 }) 接收数据
方式二:通过 vuex 实现 具体实现:vuex 是一个状态管理工具,主要解决大中型复杂项目的数据共享问题,主要包括 state,actions,mutations,getters 和 modules 5 个要素,主要流程:组件通过 dispatch 到 actions,actions 是异步操作,再actions 中通过commit 到 mutations,mutations 再通过逻辑操作改变 state,从而同步到组件,更新其数据状态
A8. Vue-router 共有几种模式 默认是哪种?
对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统这也就是 Vue-router 存在的意义。前端路由的核心,就在于——改变试图的同时不会向后端发出请求。为了达到这个目的,浏览器提供了以下两种支持:
- hash —— 即地址栏 URL 中的#符号(此 hash 不是密码学里的散列运算)比如这个 URL:http://www.abc/#/hello, hash 的值为#/hello。 它的特点在于:hash 虽然出现 URL 中,但不会被包含在HTTP请求中,对后端完全没有影响,因此改变hash不会重新加载页面。
- history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。(需要特定浏览器支持)
A9. Vuex是什么
具体表现:
vuex 是一个状态管理工具,主要解决大中型复杂项目的数据共享问题,主要包括 state,actions,mutations,getters 和 modules 5个要素, 主要流程:组件通过dispatch到actions,actions是异步操作,再actions 中通过commit到mutations,mutations再通过逻辑操作改变state,从而同步到组件,更新其数据状态
A10. Vue.js 的两个核心是什么
数据驱动 组件系统
A11. Vue如何自定义过滤器
过滤器:生活中有很多例子, 净水机 空气净化器
过滤器的作用:实现数据的筛选、过滤、格式化
局部的 filters 全局的 Vue.filter
语法: {{表达式 | 过滤器}}
注意:过滤器需要设置返回值
filters:{
//myInput 是通过管道传来的数据
//arg1 在调用过滤器时在圆括号中第一个参数
//arg2 在调用过滤器时在圆括号中第二个参数
myCurrency:function(myInput,arg1,arg2){
return //处理后的数据
}
}
A12. Vue如何新增自定义指令
全局指令 使用Vue.directive() 来全局注册指令
局部指令 也可以注册局部指令,组件或Vue构造函数中接收一个directives 的选项
钩子函数 指令定义函数提供了几个钩子函数(可选)
bind 只调用一次, 指令第一次绑定到父元素时调用,用这个钩子函数可以定义一个 在绑定时执行一次的初始化动作
inserted 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document中)
update 所在组件的 VNode更新时调用,但是可能发生在其孩子的VNode 更新之前,指令的值可能发生了改变也可能没有 但是可以通过比较更新前后的值来忽略不必要的模板更新
componentUpdated 所在组件的VNode及孩子的VNode 全部更新时调用
unbind 只调用一次 指令与元素解绑时调用 。 钩子函数参数 钩子函数被赋予了以下参数
el 指令所绑定的元素 , 可以用来直接操作DOM
binding 一个对象,包含以下属性:name:指令名,不包括 v- 前缀 value :指令的绑定值, 例如 v-my-directive=“1+1”,value 的值是 2 . oldValue:指令绑定的前一个值,仅在 update 和componentUpdated 钩子中可用。无论值是否改变都可以用。 expression:绑定的字符串形式。 例如 v-my-directive=‘1+1’,expression 的值是"1+1",arg:传给指令的参数。例如 v-my-directive:foo.arg的值是"foo"。modafiers:一个包含修饰符的对象。例如:v-my-directive.foo,bar,修饰符对象 modifiers 的值是{foo:true,bar:true}
A13. 路由对象route 和 router 的 区别
route 路由信息对象
router 路由实例
A14. params和query 的区别
query 传参:通过在 router-link 或 this.$ router.push() 传递 url 地址并且拼接?问号传递参数 例如: router-link to="/goods?id=1001",然后在接受的页面通过 this.$ router.qurey.id 来接收 优点:通用性比较好,刷新数据不会丢失
params 传参:通过在router-link 或this.$ router.push() 传递 url 地址并且 拼接的参数也用 / 来表示 例如:router-link to="/goods/1001",并且在路由页面通过 router=[{path:’/goods/:id’}] 配置,最后在接受的页面通过 this. $ route.params.id 来接收 优点:传递数据量在,优雅 缺点:刷新数据不会丢失
A15. axios 常用的请求方式有哪些
axios.get
axios.post
axios.all
axios.put
axios.delete
A16. $nextTick的作用
Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新
$nextTick 是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后使用 $ nextTick,则可以在回调中获取更新后的DOM
A17. Vue路由的跳转方式有几种
- < router-link to=“需要跳转到页面的路径” >
- this. $ router.push() 跳转到指定的url,并在history中添加记录,点击回退返回上一页面
- this.$ router.replace() 跳转到指定的url,但是history中不会添加记录,点击回退到上上个页面
- this.$ touter.go(n) 向前或者后跳转n个页面, n可以是正数也可以是负数
B类
B1. 什么是Vue的计算属性
在模板中放入太多的逻辑会让模板过重且难以维护,在需要对数据进行复杂处理,且可能多次使用的情况下,尽量采用计算属性的方式
B2. set数据结构有哪些常用的属性和方法
size: 返回Set实例的成员总数
add(value): 添加某个值,返回Set 结构本身
delete(value): 删除某个值,返回一个布尔值,表示删除是否成功
has(value): 返回一个布尔值,表示该值是否为Set的成员
clear(value):清除所有成员,没有返回值
B3. 箭头函数和function区别或新增了那些特性
写法不同
this 的 指向不同
箭头函数不可以当构造函数
变量提升
B4.Promise 常用方式有哪些及作用是什么
Promise 是异步编程的一种解决方案,其实是一个构造函数,自己身上有all、reject、resolve这几个方法,原型上有then、catch等方法
- 主要用于异步计算
- 可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果
- 可以在对象中间传递和操作 promisr,帮助我们处理队列
resolve 作用是,将Promise 对象的状态从“未完成”变为“成功”(即从pending变为resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;
reject 作用是,将Promise 对象的状态从“未完成”变为“失败”(即从pending变为rejected),
在异步操作失败时调用,并将异步操作爆出的错误,作为参数传递出去。
B5. vue 中 key 的作用
key 值:用于管理可复用的元素。因为Vue会尽可能高效的渲染元素,通常会复用已有元素而不是从头开始渲染。这么做使Vue变得非常快,但是这样也不会总是符合实际需求。2.2.0+ 的版本里,当在组件中使用v-for 时,key是必须的
B6. Vue中双向绑定是如何实现的
vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过’Object.defineProperty()‘ 来劫持各个属性的’setter‘,’getter‘,在数据变动时发布消息给订阅者,触发相应的监听回调
B7. keep-alive 的使用
- 在 vue项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果时候之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态,但是我们想要的结果是返回时这个页面还是之前搜索的结果列表,这时候就需要用到 vue 的 keep-alive 技术了
- 在 router-view 上使用可以缓存该路由组件
- 有两个参数 include - 字符串或正则表达式,只有匹配的组件会被缓存 exclude - 字符串或正则表达式,任何匹配的组件都不会被缓存
B8. Props 验证类型都有哪些
String
Number
Boolean
Function
Object
Array
Symbol
B9. created 和mounted 的区别
created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成试图
mounted:在模板渲染成html后调用,通常是初始化页面完成后,在对hmtl的dom节点进行一些需要的操作
B10. assets 和static的区别
assets中的文件会经过webpack打包,重新编译,推荐在assets存放 js 等需要打包编译的文件
static 中的文件,不会打包编译。static中的文件只是复制一遍
static 中建议放一些外部第三方文件,自己的放assets里,别人的放static中(图片推荐放在static里)
B11. vuex 中如何异步修改数据
首先,概括下 vuex 基本使用流程为:在action中分发异步请求,在异步回调中提交mutation,在mutation中修改state,使用getters对state的值进行计算封装
B12. 简述拦截器是什么,共有几个拦截点,分别时什么?
在数据发送之前或相应之后处理
请求拦截器 相应拦截器
B13. vue的双向绑定原理
Object.defineProperty() 来劫持各个属性的 setter / getter
在数据变动时发布消息给订阅者,触发相应的监听回调
B14. 路由的守卫有几种
- 全局路由守卫 所谓全局路由守卫,就是小区大门,整个小区就这一个大门,你想要进入其中任何一个房子,都需要经过这个大门的检查 全局路由守卫有两个:一个是全局前置守卫,一个是屈居后置守卫
router.beforEach((to,from,next)=>{
console.log(to) ------ 到那个页面去
consloe.log(from) ----- 从哪个页面来
next() ----- 一个回调函数
})
router.afterEach(to,from)={
}
next(): 回调函数参数配置 next(false): 中断当前的导航。 如果浏览器的 URL 改变了(可能是用户手动 或者浏览器后退按钮),那么URL地址会重置到 from 路由对应的地址 next(’/’) 或者 next({path:’/’}):跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。你可以向 next 传递任意位置对象,且允许设置诸如 replace:true、name:‘home’ 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项 - 组件路由守卫 // 跟methods:{} 等同级别书写,组件路由守卫是写在每个单独的 vue 文件里面的路由守卫
beforeRouteEnter(to,from,next){
// 注意,在路由进入之前,组件实例还未渲染,所以无法获取this实例,只能通过 vm 来访问组件实例
next(vm=>{})
}
beforeRouteUpdate(to,from,next){
//同一页面,刷新不同数据时调用
}
beforeRouteLeave(to,from,next){
// 离开当前路由页面时调用
} - 路由独享守卫 路由独享守卫是在路由页面单独给路由配置的一个守卫
exprot default new VueRouter({
routers:[
{
path:’/’,
name:‘home’,
component:‘Home’,
beforeEnter:(to,from,next)=>{
// …
}
}
]
}]
B15. 如何让css只在当前vue组建起作用
在style标签中写入scoped即可 例如:’’
B16. vue常用的修饰符
.stop:等同于Javascript中的event.stopPropagation(),防止事件冒泡
.prevent: 等同于Javascript中的event.preventDefault(),防止执行预设的行为(如果事件可取消,则取消事件,而不停止事件的进一步传播)
.capture: 与事件冒泡的方向相反,事件捕获由外到内
.self: 只触发自己范围内的事件,不包含子元素
.once: 只会触发一次
.up: 向上键
.down: 向下键
.left: 向左键
.right: 向右键
B17. 怎么定义 vue-router 的动态路由? 怎么获取传过来的值
在 router 的目录下的 index.js 文件中,对 path 属性加上 /:id,
使用 router 对象的 params.id 获取
C类
C1. 路由钩子函数共有几种?分别是什么?参数to,from,next 分别是什么意思?
全局钩子
某个路由的钩子
组件内钩子
to.router 即将进入的路由对象
from:当前导航即将离开的路由
next:function,进行管道中的一个钩子,如果执行完了,则导航的状态就是 confirmed (确认的); 否则为false ,终止导航
C2. Element ui 完整引入步骤及按需引入步骤是什么?
完整引入
在 main.js 中加入以下内容:
import ElementUI from “element-ui”
import “element-ui/lib/theme-chalk/index.css”
Vue.use(ElementUI)
以上代码添加完成了 Element 的引入。 需要注意的是,样式文件的是,样式文件需要单独引入
按需引入(需要配置环境)
借助 babel-plugin-component, 我们可以只引入需要的组件,以达到减小项目体积的目的
首先,安装 babel-plugin-component:
cnpm install babel-plugin-component -D
然后,将.babel 修改为:
{
‘presets’:[[‘es2015’,{“modules”:‘false’}]],
‘plugins’:[
‘component’,
{
‘libraryName’:‘element-ui’,
‘styleLibraryName’:‘theme-chalk’
}
]
]
}
接下来,如果你只希望引入部分组件,在 main.js 中写入创建好的
elementUi.js
elementUi.js 中:
import Vue from ‘vue’
import {Button,Select} from ‘element-ui’
Vue.use(Button)
Vue.use(Select)
C3. 介绍Vuex 的核心概念及作用?
state 数据源载体
getters 用于改变state 的值,派生出多个数据源
mutation 唯一可以改变state的状态,也就是数据的属性值
actions 提交的是mutation,用commit 提交 而不是直接变更状态,可以包含任意异步出操作
modules 拆分成多个模块
C4. Vue 与Angular以及React 的区别
React采用特殊的JSX语法