更多课程 选择中心

Web培训
达内IT学院

400-111-8989

Web培训

2020年Web前端面试问题总结之VUE问题

  • 发布:Web前端培训
  • 来源:web前端面试
  • 时间:2020-09-28 16:29

今天小编要跟大家分享的文章是关于2020年Web前端面试问题总结之VUE问题。准备参加Web前端面试的小伙伴们来和小编一起看一看吧,希望本篇文章能够对正在从事Web前端工作的小伙伴们有所帮助。

2020年Web前端面试问题总结

VUE问题

1.聊聊对vue的理解

vue是一个渐进式的JS框架。他易用,灵活,高效;可以把一个页面分隔成多个组件;当其他页面有类似功能时,直接让封装的组件进行复用;他是构建用户界面的声明式框架,只关心图层;不关心具体是如何实现的

2.V-model的原理是什么?

Vue的双向数据绑定是由数据劫持结合发布者订阅者实现的。数据劫持是通过Object.defineProperty()来劫持对象数据的setter和getter操作。在数据变动时作你想做的事

原理 通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化->视图更新 在初始化vue实例时,遍历data这个对象,给每一个键值对利用Object.definedProperty对data的键值对新增get和set方法,利用了事件监听DOM的机制,让视图去改变数据

3.谈谈对生命周期的理解

· beforeCreate阶段:vue实例的挂载元素el和数据对象data都是undefined,还没有初始化。

· created阶段:vue实例的数据对象data有了,可以访问里面的数据和方法,未挂载到DOM,el还没有

· beforeMount阶段:vue实例的el和data都初始化了,但是挂载之前为虚拟的dom节点

· mounted阶段:vue实例挂载到真实DOM上,就可以通过DOM获取DOM节点

· beforeUpdate阶段:响应式数据更新时调用,发生在虚拟DOM打补丁之前,适合在更新之前访问现有的DOM,比如手动移除已添加的事件监听器

· updated阶段:虚拟DOM重新渲染和打补丁之后调用,组成新的DOM已经更新,避免在这个钩子函数中操作数据,防止死循环

· beforeDestroy阶段:实例销毁前调用,实例还可以用,this能获取到实例,常用于销毁定时器,解绑事件

· destroyed阶段:实例销毁后调用,调用后所有事件监听器会被移除,所有的子实例都会被销毁

4.VUE和REACT有什么区别?

react整体是函数式的思想,把组件设计成纯组件,状态和逻辑通过参数传入,所以在react中,是单向数据流;

vue的思想是响应式的,也就是基于是数据可变的,通过对每一个属性建立Watcher来监听,当属性变化的时候,响应式的更新对应的虚拟dom。

5.vuex的流程

页面通过mapAction异步提交事件到action。action通过commit把对应参数同步提交到mutation。

mutation会修改state中对于的值。最后通过getter把对应值跑出去,在页面的计算属性中

通过mapGetter来动态获取state中的值

6.vuex有哪几种状态和属性

· state中保存着共有数据,数据是响应式的

· getter可以对state进行计算操作,主要用来过滤一些数据,可以在多组件之间复用

· mutations定义的方法动态修改state中的数据,通过commit提交方法,方法必须是同步的

· actions将mutations里面处理数据的方法变成异步的,就是异步操作数据,通store.dispatch来分发actions,把异步的方法写在actions中,通过commit提交mutations,进行修改数据。

· modules:模块化vuex

7.vue路由的两种模式

· hash ——即地址栏URL中的#符号(此hsah 不是密码学里的散列运算) hash 虽然出现URL中,但不会被包含在HTTP请求中,对后端完全没有影响,因此改变hash不会重新加载页面。

· history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法

这两个方法应用于浏览器的历史记录站,在当前已有的back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改是,虽然改变了当前的URL,但你浏览器不会立即向后端发送请求。

8.vue中 key 值的作用

当 Vue.js 用v-for正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。

key的作用主要是为了高效的更新虚拟DOM。

9.$route和$router的区别

· $route是“路由信息对象”,包括path,params,hash,query,fullPath,matched,name等路由信息参数。

· $router是“路由实例”对象包括了路由的跳转方法,钩子函数等。

10.vue-router守卫

· 导航守卫 router.beforeEach 全局前置守卫

· to: Route: 即将要进入的目标(路由对象)

· from: Route: 当前导航正要离开的路由

· next: Function: 一定要调用该方法来 resolve 这个钩子。(一定要用这个函数才能去到下一个路由,如果不用就拦截) 执行效果依赖 ext 方法的调用参数。

· next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。

· next(false): 取消进入路由,url地址重置为from路由地址(也就是将要离开的路由地址)。

// main.js 入口文件

import router from './router'; // 引入路由

router.beforeEach((to, from, next) => {

next();

});

router.beforeResolve((to, from, next) => {

next();

});

router.afterEach((to, from) => {

console.log('afterEach 全局后置钩子');

});

组件内的守卫 你可以在路由组件内直接定义以下路由导航守卫

const router = new VueRouter({

routes: [

{

path: '/foo',

component: Foo,

beforeEnter: (to, from, next) => {

// ...

}

}

]

})

组件内的守卫 你可以在路由组件内直接定义以下路由导航守卫

const Foo = {

template: `...`,

beforeRouteEnter (to, from, next) {

// 在渲染该组件的对应路由被 confirm 前调用

// 不!能!获取组件实例 `this`

// 因为当守卫执行前,组件实例还没被创建

},

beforeRouteUpdate (to, from, next) {

// 在当前路由改变,但是该组件被复用时调用

// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,

// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。

// 可以访问组件实例 `this`

},

beforeRouteLeave (to, from, next) {

// 导航离开该组件的对应路由时调用,我们用它来禁止用户离开

// 可以访问组件实例 `this`

// 比如还未保存草稿,或者在用户离开前,

将setInterval销毁,防止离开之后,定时器还在调用。

}

}

11.axios是什么?怎么使用?描述使用它实现登录功能的流程?

请求后台资源的模块。

$ npm install axios -S装好 复制代码

然后发送的是跨域,需在配置文件中config/index.js进行设置。后台如果是Tp5则定义一个资源路由。js中使用import进来,然后.get或.post。返回在.then函数中如果成功,失败则是在.catch函数中

12.vue修饰符

· stop:阻止事件的冒泡

· prevent:阻止事件的默认行为

· once:只触发一次

· self:只触发自己的事件行为时,才会执行

13.vue项目中的性能优化

1.不要在模板里面写过多表达式

2.循环调用子组件时添加key

3.频繁切换的使用v-show,不频繁切换的使用v-if

4.尽量少用float,可以用flex

5.按需加载,可以用require或者import()按需加载需要的组件

6.路由懒加载

14.vue.extend和vue.component

· extend 是构造一个组件的语法器。然后这个组件你可以作用到Vue.component这个全局注册方法里 还可以在任意vue模板里使用组件。也可以作用到vue实例或者某个组件中的components属性中并在内部使用apple组件。

· Vue.component 你可以创建 ,也可以取组件。

以上就是小编今天为大家分享的关于2020年Web前端面试问题总结之VUE问题的文章,希望本篇文章能够对正准备参加Web前端面试的小伙伴们有所帮助,想要了解更多Web前端知识记得关注达内Web培训官网,最后祝愿小伙伴们工作顺利,成为一名优秀的Web前端工程师

【免责声明:本文图片及文字信息均由小编转载自网络,旨在分享提供阅读,版权归原作者所有,如有侵权请联系我们进行删除。】

预约申请免费试听课

填写下面表单即可预约申请免费试听!怕钱不够?可就业挣钱后再付学费! 怕学不会?助教全程陪读,随时解惑!担心就业?一地学习,可全国推荐就业!

上一篇:2020年Web前端面试问题总结之JS问题
下一篇:2020年Web前端面试问题总结之React问题

2020年前端面试题汇总之算法和应用

2020年前端面试题汇总之常见性能优化

2020年前端面试题汇总之Webpack

Web前端面试必备面试题整理

选择城市和中心
黑龙江省

吉林省

河北省

贵州省

云南省

广西省

海南省