Vue面试常问的知识点
- 前言
- 1、请简述你对vue的理解
- 2、请简述vue的单向数据流
- 3、Vue常用的修饰符有哪些
- 4、v-text与{{}}与v-html区别
- 5、v-on可以绑定多个方法吗
- 6、Vue循环的key作用
- 7、计算属性与watch区别
- 8、Vue的生命周期请简述
- 9、Vue中路由跳转方式(声明式/编程式)
- 10、DOM渲染在那个生命周期阶段内完成
- 11、定义路由组件
- 12、Vuex是什么?怎么使用?在那种场景下使用
- 13、Vue路由模式hash和history,简单讲一下
- 14、Vue路由传参的两种方式,params和query方式与区别
- 15、自定义指令
- 16、Vue中指令有哪些
- 17、 vue如何定义一个过滤器
- 18、 Vue的路由钩子函数/路由守卫有哪些
- 19、对vue 中keep-alive的理解
- 20、Vue中组件传值
- 21、Vue插槽的使用
- 22、Vue双向绑定的原理
- 23、Vuex中action如何提交给mutation的
- 24、Route与router区别
- 25、v-for与v-if优先级
- 26、vue请求数据放在created好还是mounted里好?
- 27、vue懒加载的方法?
- 28、v-if和v-show区别
- 29、Vue里面的虚拟dom怎么理解?
- 30、Vue2.0和Vue3.0的区别
前言
春天是拿offer的好季节,这里有个人整理的一些关于vue的一些面试提问,希望能帮助到大家拿到自己想要的offer,主页还有js部分的一些可以结合一起看!!!!
提示:以下是本篇文章正文内容,下面案例可供参考
1、请简述你对vue的理解
Vue是一套构建用户界面的渐进式的自底向上增量开发的MVVM框架,核心是关注视图层,vue的核心是为了解决数据的绑定问题,为了开发大型单页面应用和组件化,所以vue的核心思想是数据驱动和组件化,这里也说一下MVVM思想,MVVM思想是 模型 视图 vm是v和m连接的桥梁,当模型层数据修改时,VM层会检测到,并通知视图层进行相应修改
2、请简述vue的单向数据流
父级prop的更新会向下流动到子组件中,每次父组件发生更新,子组件所有的prop都会刷新为最新的值
数据从父组件传递给子组件,只能单向绑定,子组件内部不能直接修改父组件传递过来的数据,(可以使用data和computed解决)
3、Vue常用的修饰符有哪些
修饰符:.lazy 改变后触发,光标离开input输入框的时候值才会改变
.number 将输出字符串转为number类型
.trim 自动过滤用户输入的首尾空格
事件修饰符:
.stop 阻止点击事件冒泡,相当于原生js中的event.stopPropagation()
.prevent 防止执行预设的行为,相当于原生js中event.preventDefault()
.capture 添加事件侦听器时使用事件捕获模式,就是谁有该事件修饰符,就先触发谁
.self 只会触发自己范围内的事件,不包括子元素
.once 只执行一次
键盘修饰符:
.enter 回车键 .tab 制表键 .esc返回键 .space 空格键
.up向上键 .down 向下键 .left向左建 .right向右键
系统修饰符:.ctrl .alt .shift .meta
4、v-text与{{}}与v-html区别
{{}} 将数据解析为纯文本,不能显示输出html
v-html 可以渲染输出html
v-text 将数据解析为纯文本,不能输出真正的html,与花括号的区别是在页面加载时不显示双花括号
v-text 指令:
作用:操作网页元素中的纯文本内容。{{}}是他的另外一种写法
v-text与{{}}区别:
v-text与{{}}等价,{{}}叫模板插值,v-text叫指令。
有一点区别就是,在渲染的数据比较多的时候,可能会把大括号显示出来,俗称屏幕闪动:
5、v-on可以绑定多个方法吗
可以 如果绑定多个事件,可以用键值对的形式 事件类型:事件名如果绑定是多个相同事件,直接用逗号分隔就行
6、Vue循环的key作用
Key值的存在保证了唯一性,Vue在执行时,会对节点进行检查,如果没有key值,那么vue检查到这里有dom节点,就会对内容清空并赋新值,如果有key值存在,那么会对新老节点进行对比,比较两者key是否相同,进行调换位置或删除操作
7、计算属性与watch区别
Computed watch 区别就是computed的缓存功能,当无关数据数据改变时,不会重新计算,直接使用缓存中的值。计算属性是用来声明式的描述一个值依赖了其他的值,当所依赖的值后者变量发生变化时,计算属性也跟着改变,
Watch监听的是在data中定义的变量,当该变量变化时,会触发watch中的方法
8、Vue的生命周期请简述
vue的生命周期就是vue实例创建到实例销毁的过程。期间会有8个钩子函数的调用。
beforeCreate(创建实例)
created(创建完成)、
beforeMount(开始创建模板)
mounted(创建完成)、
beforeUpdate(开始更新)
updated(更新完成)、
beforeDestroy(开始销毁)
destroyed(销毁完成)
1、beforeCreate
在实例初始化之后,数据观测和event/watcher时间配置之前被调用。
2、created
实例已经创建完成之后被调用。在这一步,实例已经完成以下的配置:数据观测,属性和方法的运算,watch/event事件回调。然而,挂载阶段还没开始,$el属性目前不可见。
3、beforeMount
在挂载开始之前被调用:相关的render函数首次被调用。 该钩子在服务器端渲染期间不被调用。
4、mounted
el被新创建的vm.替换,并挂在到实例上去之后调用该钩子函数。如果实例挂载了一个文档内元素,当被调用时el也在文档内。 该钩子在服务端渲染期间不被调用。
5、beforeUpdate
数据更新时调用,发生在虚拟DOM重新渲染和打补丁之前。 你可以在这个钩子中进一步第更改状态,这不会触发附加的重渲染过程。 该钩子在服务端渲染期间不被调用。
6、updated
由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子。 当这个钩子被调用时,组件DOM已经更新,所以你现在可以执行依赖于DOM的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。 该钩子在服务端渲染期间不被调用。
7、activated
keep-alive组件激活时调用。 该钩子在服务器端渲染期间不被调用。
8、deactivated
keep-alive组件停用时调用。 该钩子在服务端渲染期间不被调用。
9、beforeDestroy 【类似于React生命周期的componentWillUnmount】
实例销毁之间调用。在这一步,实例仍然完全可用。 该钩子在服务端渲染期间不被调用。
10、destroyed
Vue实例销毁后调用。调用后,Vue实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 该钩子在服务端渲染不会被调用
9、Vue中路由跳转方式(声明式/编程式)
Vue中路由跳转有两种,分别是声明式和编程式
用js方式进行跳转的叫编程式导航 this.$router.push()
用router-link进行跳转的叫声明式 router-view 路由出口,路由模板显示的位置
路由中name属性有什么作用?
在router-link中使用name导航到对应路由
使用name导航的同时,给子路由传递参数
10、DOM渲染在那个生命周期阶段内完成
DOM渲染在mounted周期中就已经完成
Vue路由的实现
前端路由就是更新视图但不请求页面,
利用锚点完成切换,页面不会刷新
官网推荐用vue-router.js来引入路由模块
11、定义路由组件
定义路由,使用component进行路由映射组件,用name导航到对应路由
创建router实例,传入routes配置
创建和挂载根实例
用router-link设置路由跳转
12、Vuex是什么?怎么使用?在那种场景下使用
Vuex是一个专为vue.js应用程序开发的状态管理模式,通过创建一个集中的数据存储,方便程序中的所有组件进行访问,简单来说 vuex就是vue的状态管理工具
Vuex有五个属性 state getters mutations actions modules
State就是数据源存放地,对应一般vue对象的data,state里面存放的数据是响应式的,state数据发生改变,对应这个数据的组件也会发生改变 用this.
s
t
o
r
e
.
s
t
a
t
e
.
x
x
x
调
用
G
e
t
t
e
r
s
相
当
于
s
t
o
r
e
的
计
算
属
性
,
主
要
是
对
s
t
a
t
e
中
数
据
的
过
滤
,
用
t
h
i
s
.
store.state.xxx调用 Getters 相当于store的计算属性,主要是对state中数据的过滤,用this.
store.state.xxx调用Getters相当于store的计算属性,主要是对state中数据的过滤,用this.store.getters.xxx调用
Mutations 处理数据逻辑的方法全部放在mutations中,当触发事件想改变state数据的时候使用mutations,用this.
s
t
o
r
e
.
c
o
m
m
i
t
调
用
,
给
这
个
方
法
添
加
一
个
参
数
,
就
是
m
u
t
a
t
i
o
n
的
载
荷
(
p
a
y
l
o
a
d
)
A
c
t
i
o
n
s
异
步
操
作
数
据
,
但
是
是
通
过
m
u
t
a
t
i
o
n
来
操
作
用
t
h
i
s
.
store.commit调用,给这个方法添加一个参数,就是mutation的载荷(payload) Actions 异步操作数据,但是是通过mutation来操作 用this.
store.commit调用,给这个方法添加一个参数,就是mutation的载荷(payload)Actions异步操作数据,但是是通过mutation来操作用this.store.dispatch来触发,actions也支持载荷
使用场景:组件之间的状态,登录状态,加入购物车,音乐播放
13、Vue路由模式hash和history,简单讲一下
Hash模式地址栏中有#,history没有,history模式下刷新,会出现404情况,需要后台配置
使用 JavaScript 来对 loaction.hash 进行赋值,改变 URL 的 hash 值可以使用 hashchange 事件来监听 hash 值的变化
HTML5 提供了 History API 来实现 URL 的变化。其中最主要的 API 有以下两个:history.pushState() 和 history.repalceState()。这两个 API 可以在不进行刷新的情况下,操作浏览器的历史纪录。唯一不同的是,前者是新增一个历史记录,后者是直接替换当前的历史记录。
14、Vue路由传参的两种方式,params和query方式与区别
动态路由也可以叫路由传参,就是根据不同的选择在同一个组件渲染不同的内容
用法上:query用path引入,params用name引入,接收参数都是类似的,分别是this.
r
o
u
t
e
.
q
u
e
r
y
.
n
a
m
e
和
t
h
i
s
.
route.query.name和this.
route.query.name和this.route.params.name
url展示上:params类似于post,query类似于get,也就是安全问题,params传值相对更安全点,query通过url传参,刷新页面还在,params刷新页面不在了
15、自定义指令
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
如果想注册局部指令,组件中也接受一个 directives 的选项:
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
//使用的时候 即可<input v-focus>
16、Vue中指令有哪些
v-for:循环数组,对象,字符串,数字
v-on:绑定事件监听
v-bind:动态绑定一个或者多个属性
v-model:表单控件或者组件上创建双向绑定
v-if v-else v-else-if 条件渲染
v-show 根据表达式真假,切换元素的display
v-html 更新元素的innerhtml
v-text 更新元素的textcontent
v-pre 跳过这个元素和子元素的编译过程
v-clock 这个指令保持在元素上知道关联实例结束编译
v-once 只渲染一次
17、 vue如何定义一个过滤器
过滤器本质就是一个有参数有返回值的方法
new Vue({
filters:{
myCurrency:function(myInput){
return 处理后的数据
}
}
})
//使用方法:<h1>{{表达式 | 过滤器}}</h1>
过滤器高级用法:可以指定参数,告诉过滤器按照参数进行数据的过滤
18、 Vue的路由钩子函数/路由守卫有哪些
全局守卫:beforeEach(to,from,next)和afterEach(to,from)
to: 即将要进入的目标
from: 当前导航正要离开的路由
可选的第三个参数 next 这是一个常见的错误来源,可以通过 RFC 来消除错误。然而,它仍然是被支持的,这意味着你可以向任何导航守卫传递第三个参数。在这种情况下,确保 next 在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次,但是只能在所有的逻辑路径都不重叠的情况下,否则钩子永远都不会被解析或报错。
// next 使用
router.beforeEach((to, from, next) => {
if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
else next()
})
路由独享守卫:beforeEnter
组件内的守卫:路由进入/更新/离开之前 beforeRouterEnter/update/leave
const router = createRouter({ ... })
router.beforeEach((to, from) => {
// ...
// 返回 false 以取消导航
return false
})
19、对vue 中keep-alive的理解
概念:keep-alive是vue的内置组件,当它动态包裹组件时,会缓存不活动的组件实例,它自身不会渲染成一个DOM元素也不会出现在父组件链中
作用:在组件切换过程中将状态保留在内存中,防止重复渲染DOM,减少加载时间以及性能消耗,提高用户体验。
生命周期函数:Activated在keep-alive组件激活时调用,deactivated在keep-alive组件停用时调用
20、Vue中组件传值
正向:父传子 父组件把要传递的数据绑定在属性上,发送,子组件通过props接收
逆向:子传父 子组件通过this.$emit(自定义事件名,要发送的数据),父组件设置一个监听事件来接收,然后拿到数据 也可以在dom元素上绑定ref 然后用refs接收
兄弟:eventbus 中央事件总线 通过Vuex 缓存也可以达到效果
21、Vue插槽的使用
首先槽口(插槽)可以放什么内容?放在哪?什么作用?可以放任意内容,在子组件中使用,是为了将父组件中的子组件模板数据正常显示。
具名插槽和匿名插槽,作用域插槽,说白了就是在组件上的属性,可以在组件元素内使用,
可以在父组件中使用slot-scope从子组件获取数据
22、Vue双向绑定的原理
Vue双向绑定就是:数据变化更新视图,视图变化更新数据
Vue数据双向绑定是通过数据劫持和观察者模式来实现的,
数据劫持,object.defineproperty它的目的是:当给属性赋值的时候,程序可以感知到,就可以控制改变属性值观察者模式 当属性发生改变的时候,使用该数据的地方也发生改变
23、Vuex中action如何提交给mutation的
Action函数接收一个与store实例具有相同方法和属性的context对象,可以调用context.commit提交一个mutation,或者通过context.state和context.getters获取state和getters
24、Route与router区别
1.router是VueRouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个对象中是一个全局的对象,他包含了所有的路由包含了许多关键的对象和属性。
2.route是一个跳转的路由对象,每一个路由都会有一个route对象,是一个局部的对象,可以获取对应的name,path,params,query等
25、v-for与v-if优先级
首先不要把v-if与v-for用在同一个元素上,原因:v-for比v-if优先,如果每一次都需要遍历整个数组,将会影响速度,尤其是当之需要渲染很小一部分的时候。
v-for 比 v-if 具有更高的优先级
26、vue请求数据放在created好还是mounted里好?
答:created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。
如果在mounted钩子函数中请求数据可能导致页面闪屏问题
其实就是加载时机问题,放在created里会比mounted触发早一点,如果在页面挂载完之前请求完成的话就不会看到闪屏了
27、vue懒加载的方法?
答:常用的懒加载方式有两种:即使用 ES中的import 和 vue异步组件
export default new Router({
routes: [{
path: ‘/’,
name: ‘HelloWorld’,
component: () => import("@/components/HelloWorld")
}]
})
使用VUE中的异步组件进行懒加载
export default new Router({
routes: [{
path: ‘/’,
name: ‘HelloWorld’,
component: resolve => { require([’@/components/HelloWorld’],resovle); }
}]
}
28、v-if和v-show区别
v-if针对条件切换,可以做异步判断 触发组件的、、、钩子,由变为的时候触发组件的、方法falsetruebeforeCreatecreatebeforeMountmountedtruefalsebeforeDestorydestoryed 性能消耗:有更高的切换消耗
v-show用来做频繁的切换,类似display:none/block
v-show由变为的时候不会触发组件的生命周期falsetrue
相同点:v-if与v-show都可以动态控制dom元素显示隐藏
不同点:v-if显示隐藏是将dom元素整个添加或删除,而v-show隐藏则是为该元素添加css–display:none,dom元素还在。
29、Vue里面的虚拟dom怎么理解?
虚拟DOM 就是在 真实DOM的基础上建立的一个抽象层 (把存储在javascripts 内存 中描述DOM节点的数据 叫做 虚拟DOM)
30、Vue2.0和Vue3.0的区别
1.项目目录结构
vue-cli2.0与3.0在目录结构方面,有明显的不同
vue-cli3.0移除了配置文件目录,config 和 build 文件夹
同时移除了 static 静态文件夹,新增了 public 文件夹,打开层级目录还会发现, index.html 移动到 public 中
2.配置项
3.0 config文件已经被移除,但是多了.env.production和env.development文件,除了文件位置,实际配置起来和2.0没什么不同
没了config文件,跨域需要配置域名时,从config/index.js 挪到了vue.config.js中,配置方法不变
3.渲染
Vue2.x使用的Virtual Dom实现的渲染
Vue3.0不论是原生的html标签还是vue组件,他们都会通过h函数来判断,如果是原生html标签,在运行时直接通过Virtual Dom来直接渲染,同样如果是组件会直接生成组件代码
4.数据监听
Vue2.x大家都知道使用的是es5的object.defineproperties中getter和setter实现的,而vue3.0的版本,是基于Proxy进行监听的,其实基于proxy监听就是所谓的lazy by default,什么意思呢,就是只要你用到了才会监听,可以理解为‘按需监听’,官方给出的诠释是:速度加倍,同时内存占用还减半。
5.按需引入
Vue2.x中new出的实例对象,所有的东西都在这个vue对象上,这样其实无论你用到还是没用到,都会跑一变。而vue3.0中可以用ES module imports按需引入,如:keep-alive内置组件、v-model指令,等等。