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

今天小编要跟大家分享的文章是关于2020年Web前端面试问题总结之VUE问题。准备参加Web前端面试的小伙伴们来和小编一起看一看吧，希望本篇文章能够对正在从事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前端工程师。

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