关于前端vue开发的面试题

VUE面试

### 1.vue最大的优势是什么

1. 是一个轻量级框架,只关注视图层,文件大小只有几十kb

2. 的双向数据绑定,数据和视图任意一个发生变化,另一个则会变化

3. 虚拟dom

4. 组件化

5. vue的生态圈大,教程多

6. 中文文档,好学习

2.vue和jquery的区别

DOM

vue 不需要操作dom,只需要操作数据,即可完成页面的渲染

jquery是通过操作dom来更改页面的逻辑,渲染等

3.MVVM 和 MVC的区别

MVVM比MAC强在了业务逻辑的重用,结构更清晰,增加了代码的复用性

4.谈谈你对mvvm的理解

M 模型 V 视图 VM视图模型 ;就是指视图和数据模型的双向绑定;视图改变数据改变,数据改变,视图改变;

5.双向绑定的原理是什么

绑定了标签元素的内容属性,并对元素内容修改更改事件监听

6.vue生命周期分为几个阶段

八个阶段

创建,初始化数据,编译模板,挂载,渲染dom,更新,渲染dom,卸载

7.说一下vue的生命周期钩子

beforeCreate → created→beforeMout→mounted→beforeUpdate→updated→beforeDestroy→destroyed

实例创建前→实例创建后→挂载前→挂载后→更新前→更新后→卸载前→卸载后后

8.第一次初始化页面的时候会触发哪几个钩子函数

分别是实例化前的 beforeCreate 还有实例化后的 created→挂载前的beforeMout→挂载后的mounted

9.说一下封装vue组件的过程吧

确定业务需求→把可复用的模块找出来→创建一个组件→然后用component方法注册组件;

10. vue组件之间是如何传值的

父向子传值,子组件使用props接收父组件绑定在子组件标签上的数据

子向父传值,字组件使用$emit触发事件传递数据,父组件使用v-on监听事件 接收数据

兄弟组件传值,和子向父传值差不多,只需要创建一个中间件,比如实例化一个bus组件,然后创建方法使用$emit传递参数,$on监听,接收数据

11. 组件中写name选项有什么作用

给组件命名,方便调试工具调试

12 怎么在组件中监听路由的变化呢

通过$route的to和from参数

13. vue中的solt使用方式

当组件需要当做标签使用时,用slot可以用来接收组件标签包裹的内容

14.vue如何实现组件缓存

使用keep-alive标签包裹需要缓存的组件

15.vue cli 怎么使用自定义组件

新建组件文件→然后在需要用到的组件里用import引入→在components里注册→在template视图中使用

16.vue常用的修饰符有哪些

.stop 阻止冒泡,.prevent阻止默认提交事件的页面刷新

17.vue常用的组件有哪些,并说出其作用

v-model 双向绑定

v-bind 属性绑定

v-on 事件绑定

v-text html pre {{}} 标签内容渲染

v-if v-show 动态渲染

18.v-el的作用是什么?

把vue实例挂载到对应的标签上

19.v-show v-if的共同点 和不同点

共同点是 都是用来动态渲染页面的

不同点是,v-show是页面初次渲染就已经加载到页面的dom元素里,通过css实现显示和隐藏

​ v-if则是动态的像dom添加和删除标签

v-show更适合需要频繁切换的功能;v-if比v-show好在页面初次渲染的速度

20.为什么避免v-if 和v-for 共用

因为v-for要比v-if有更高的优先级,所以v-if重新动态更新到组件容器里会引起v-for的不重新渲染

21.watch methods和commputed的区别

首先最大的区别就是commputed的缓存熟悉,如果有方法需要大量运算,并且可以用来缓存的话使用commputed

然后是加载顺序 ,在页面实例化后 首先会执行commputed 然后是watch 然后 没有触发的话是不会调用methods的

异步的和需要条件触发的 放到methods里

22.怎么在watch监听之后立即被调用

使用一个 立即:true的方法

23.watch怎么深度监听

添加deep:true 属性

24.commputed中的属性名和data中的属性名可以相同吗

不可以

25.什么是vue的计算属性

commputed

计算属性拥有缓存,计算属性方法里依赖的数据发生变化都会引起方法的调用,减少了代码量

26.vue的key的作用是什么

配合v-for方法使用的;提高了虚拟dom的渲染速度

28.vue怎么自定义过滤器

用vue.filter方法,第一个参数传过滤器名字,第二个传一个函数

29.vuex的5个核心属性是什么

state 状态 getter 类似计算属性 mutation 更改state的唯一方法就是提交mutation action 可以处理异步 module 模块

30 vuex的出现解决了什么问题

当多个组件依赖同一个数据状态时 对于多层嵌套的组件传参会很麻烦;

31.vuex的 mutation 和action 的区别

action可以用来处理任何异步,但不能直接更改state;这时候就需要用commit 提交一个mutation,在mutation里完成修改

32.vue router是干什么的,原理是什么

vue router 是vue的官方路由插件,用来和组件一起构建单页面应用的;

原理:更新视图但不重新请求页面

33 vue router 怎么配置路由

安装 npm i --save vue-router

引用 import VueRouter from vue-router

配置 var router=new VueRouter({

routes[{path:‘路由地址’

component:对应要跳转的组件},{ }]

})

默认根组件中添加 router-view 标签

在需要的位置添加跳转导航标签 显示内容

34 vue的路由导航首位

//挂载路由导航守卫,to表示将要访问的路径，from表示从哪里来，next是下一个要做的操作
router.beforeEach((to,from,next)=>{
if(to.path === ‘/login’)
return next();
//获取token
const tokenStr = window.sessionStorage.getItem(‘token’);
if(!tokenStr)
return next(‘/login’);
next();
})

35vuex的的属性及使用

state：vuex的基本数据，用来存储变量
geeter：从基本数据(state)派生的数据，相当于state的计算属性
mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
Action：Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。
modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。