前端面试2021.4.9

面试题正文:

1.vue全家桶包含哪些?

答案:vue全家桶与react全家桶介绍

2.v-model是什么?怎么使用?vue中标签怎么绑定事件?

答案:v-model可以实现双向绑定,指令(v-bind:class、v-for、v-if、v-show、v-on)。vue的model层的data属性。绑定事件:

3.v-model的实现原理?

答案:vue数据双向绑定实现原理解析

4.请说一下vue的生命周期。

答案:vue生命周期详细介绍

5.请说出至少4种vue当中的指令和它的用法。

答案:v-if:判断是否隐藏;v-for:数据循环出来;v-bind:class:绑定一个属性;v-model:实现双向绑定。(其他的请看vue官网)

6.请说出v-if和v-show的区别。

答案:v-if与v-show的区别与应用场景详细介绍

7.active-class是哪个组件的属性?

答案:vue-router模块的router-link组件。

8.vue嵌套路由怎么定义?

答案:vue定义嵌套路由详细步骤讲解(附代码)

9.怎么定义vue-router的动态路由?怎么获取传过来的动态参数?

答案:

在router目录下的index.js文件中,对path属性加上/:id。

使用router对象的params.id获取参数。

10.vue-router有哪几种导航钩子?

答案:三种:

第一种:是全局导航钩子:router.beforeEach(to,from,next),作用:跳转前进行判断拦截。

第二种:组件内的钩子。

第三种:单独路由独享组件。

11.iframe的优缺点?

答案:iframe也称作嵌入式框架,嵌入式框架和框架网页类似,它可以把一个网页的框架和内容嵌入在现有的网页中。

优点:

解决加载缓慢的第三方内容如图标和广告等的加载问题

Security sandbox

并行加载脚本

方便制作导航栏

缺点:

iframe会阻塞主页面的Onload事件

即使内容为空,加载也需要时间

没有语意

12.请讲讲你对axios或者其他请求方式的使用。

答案:axios在vue项目中的使用

13.axios+tp5进阶中,调用axios.post(‘api/user’)是进行的什么操作?axios.put(‘api/user/8′)呢?

答案:跨域,添加用户操作,更新操作。

14.vuex是什么?怎么使用?哪种功能场景使用它?

答案:vue框架中状态管理。在main.js引入store,注入。新建了一个目录store,…… export 。场景有:单页应用中,组件之间的状态。音乐播放、登录状态、加入购物车。

15.mvvm框架是什么?它和其它框架(jquery)的区别是什么?哪些场景适合?

答案:一个model+view+viewModel框架,数据模型model,viewModel连接两个

区别:vue数据驱动,通过数据来显示视图层而不是节点操作。

场景:数据操作比较多的场景,更加便捷

16.自定义指令(v-check、v-focus)的方法有哪些?它有哪些钩子函数?还有哪些钩子函数参数?

答案:全局定义指令:在vue对象的directive方法里面有两个参数,一个是指令名称,另外一个是函数。组件内定义指令:directives

钩子函数:bind(绑定事件触发)、inserted(节点插入的时候触发)、update(组件内相关更新)

钩子函数参数:el、binding

17.vue-router是什么?它有哪些组件?

答案:vue用来写路由的一个插件。router-link、router-view

18.导航钩子有哪些?它们有哪些参数?

答案:

导航钩子包括:

a/全局钩子和组件内独享的钩子。b/beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave

参数:

有to(去的那个路由)、from(离开的路由)、next(一定要用这个函数才能去到下一个路由,如果不用就拦截)最常用就这几种。

19.请说下封装 vue 组件的过程?

答案:首先,组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块,解决了我们传统项目开发:效率低、难维护、复用性等问题。

创建一个组件,然后使用Vue.component方法注册组件。子组件需要数据,可以在props中接受定义。而子组件修改好数据后,想把数据传递给父组件,可以采用emit方法。

20.你是怎么认识vuex的?

答案:vuex可以理解为一种开发模式或框架。比如PHP有thinkphp,java有spring等。

通过状态(数据源)集中管理驱动组件的变化(好比spring的IOC容器对bean进行集中管理)。

应用级的状态集中放在store中; 改变状态的方式是提交mutations,这是个同步的事物; 异步逻辑应该封装在action中。

21.vue-loader是什么?使用它的用途有哪些?

答案:解析.vue文件的一个加载器,跟template/js/style转换成js模块。

用途:js可以写es6、style样式可以scss或less、template可以加jade等

22.请说出vue.cli项目中src目录每个文件夹和文件的用法?

答案:assets文件夹是放静态资源;components是放组件;router是定义路由相关的配置;view视图;app.vue是一个应用主组件;main.js是入口文件

23.聊聊你对Vue.js的template编译的理解?

答案:简而言之,就是先转化成AST树,再得到的render函数返回VNode(Vue的虚拟DOM节点)

24.vue.cli中怎样使用自定义的组件?有遇到过哪些问题吗?

答案:第一步:在components目录新建你的组件文件(smithButton.vue),script一定要export default 将组件导出。

第二步:在需要用的页面(组件)中导入:import smithButton from ‘…/components/smithButton.vue’

第三步:注入到vue的子组件的components属性上面,components:{smithButton}

第四步:在template视图view中使用,

问题有:smithButton命名,使用的时候则smith-button。

25.dom是在哪一个生命周期完成渲染的?

答案:在 mounted 中就已经完成了

26.第一次页面加载会触发哪几个生命周期?

答案:第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个生命周期。

27.vue生命周期的作用是什么?

答案:它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

28.如何解决vue修改数据不刷新页面这个问题?

答案:

第一种:this.$set

第二种:给数组、对象赋新值

第三种:使用this.$forceupdate强制刷新

29.为什么会出现vue修改数据后页面没有刷新这个问题?

答案:受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter,所以属性必须在 data 对象上才能让 Vue.js 转换它,才能让它是响应的。

你可能感兴趣的:(前端面试2021.4.9)