1. Dotnet9首页
  2. 大前端
  3. 前端语言
  4. Vue

朝夕教育——2020最新面试宝典带答案前端Vue笔试专题

注:答案均以红色字体标注!答案仅供参考!为提供学员的实操性! 此处答案均以截图提供!希望学员能以实操理解!

1,active-class 是哪个组件的属性?嵌套路由怎么定义?

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

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

答:在路由的 path 属性上加上 【/:id】。获取:router.params.id。

3,vue-router 有哪几种导航钩子?

答:

  • (1)全局导航钩子:beforeEach()、afterEach()
  • (2)路由独享组件:beforeEnter()
  • (3)组件内的钩子:beforeRouteEnter()、beforeRouteUpdate()、beforeRouteLeave()

4,scss 是什么?使用步骤是?有那几大特性?

(1)预处理 css,把 css 当成函数编写,定义变量,嵌套

(2)npm 下三个 loader (sass-loader、css-loader、node-sass);
在 build 文件夹下 webpack.base.conf.js 文件,在module 中添加规则 { test: /.sass变量名称=值);

5,mint-ui是什么?怎么使用?至少说出三个组件的使用方法?

答:

(1)基于 vue 的前端组件库。npm 安装,然后 import 样式和js,Vue.use(mintUI)全局引入。

(2)在单个组件内部引入:import { Toast } from ‘mint-ui’

(3)组件1:Toast(‘登录成功’);
组件2:mint-header
组件3:mint-swiper

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

答:是可以实现双向数据绑定的指令(v-class、v-for 、v-if、v-show、v-on)
<div @click=’someFunc’>

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

答:

(1)axios 是请求后台资源的模块
(2)npm install axios -S,然后 axios.get(‘/user’, {params: {ID: 123465}},then(res=> {}).catch(err=> {}))

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

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

9,谈谈对vue 组件化的理解。

答:组件的基本构成分别为:样式结构,行为逻辑,数据。web 中的组件其实就是页面的一部分,每个组件都会提供一些对外的接口,允许使用者使用和设置参数属性,可以将不同功能的组件结合在一起,快速的构建一个符合需求的引用

10,谈谈对Vue 路由的理解。

答:首先Vue的单页面应用是基于路由和组件的,路由用于设定访问的路径,并将路径和组件映射起来。传统的页面应用,是通过超链接来实现页面的切换和跳转。在vue-router 中是路径之间的切换,也就是组件的切换。

11.谈谈你对 Vue 钩子函数的理解

答:vue-router 的导航钩子主要用于拦截导航,让他完成跳转或取消。

12,如何让 css 只在当前页面起作用

答:<style scoped></style>

13,created 和 mounted 的区别

答:created 是实例创建完成之后的钩子函数;el属性不可见Ϊundefinedmounted是将编译好的HTML挂在到ҳ面完成后ִ行的钩子函数,在整个生命周期中ִֻ行һ次,;el属性不可见Ϊundefinedmounted是将编译好的HTML挂在到ҳ面完成后ִ行的钩子函数,在整个生命周期中ִֻ行һ次,;el 已创建,同时 DOM 已生成。

14,created 和 mounted 分别什么时候用?

答:只有 ajax 数据请求时,使用 created ;如果有依赖DOM的情况,就放在 mounted中

15,vue 和 angular 分别采用什么技术实现双向数据绑定?

答:Angular 采用”脏值检测“的方式,数据发生变更后,对于所有的数据和视图的绑定关系击行一次检测,识别是否有数据发生变化,有变化进行处理,可能进一步引发其他数据变化,所以这个过程可能会重复几次,一直到没有数据发生变化后,将变更的数据发送到视图,更新页面展示。如果是手动对 ViewModel 的数据进行变更,为确保变更同步到试图,需要手动触发一次“脏值检测”。
VueJS 则使用 ES5 提供的 Object.defineProperty 方法,监控对数据的操作,从而可以自动触发数据同步。并且是在不同的数据上触发同步,可以精确的将变更发送给绑定的视图,而不是对所有数据都进行一次检测。

16.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程?

     答: 当 Vue 进入初始化阶段时,一方面 Vue 会遍历 data 中的属性,并用 Object.defineProperty 将它转化成 getter/setter 的形式,实现数据劫持(暂不谈 Vue3.0 的 Proxy);另一方面,Vue 的指令编译器 Compiler 对元素节点的各个指令进行解析,初始化视图,并订阅 Watcher 来更新试图,此时 Watcher 会将自己添加到消息订阅器 Dep 中,此时初始化完毕。
      当数据发生变化时,触发 Observer 中 setter 方法,立即调用 Dep.notify(),Dep 这个数组开始遍历所有的订阅者,并调用其 update 方法,Vue 内部再通过 diff 算法,patch 相应的更新完成对订阅者视图的改变。

17. Vue中watch、methods 和 计算属性的区别是什么?

答:watch 为了监听某个响应数据的变化。计算属性是自动监听依赖值的变化,从而动态返回内容,主要目的是简化模板内的复杂运算。所以区别来源于用法,只是需要动态值,那就用计算属性;需要知道值的改变后执行业务逻辑,才用 watch。

methods是一个方法,它可以接受参数,而computed 不能,computed 是可以缓存的,methods 不会。computed 可以依赖其他 computed,甚至是其他组件的 data。

18.vue中怎么重置data

答:使用Object.assign(),vm.$data可以获取当前状态下的data,vm.$options.data可以获取到组件初始化状态下的data。

Object.assign(this.$data, this.$options.data())

19.Vue组件中写 name 选项有什么作用?

答:

项目使用 keep-alive 时,可搭配组件 name 进行缓存过滤

DOM 做递归组件时需要调用自身 name

vue-devtools 调试工具里显示的组见名称是由vue中组件name决定的

20.Vuex有哪几种属性

答:有五种,分别是 State、Getter、Mutation、Action、Module

21. vue 的优点是什么?

答:低耦合。视图(View)可以独立于 Model 变化和修改,一个 ViewModel 可以绑定到不同的”View”上,当 View 变化的时候 Model 可以不变,当 Model 变化的时候 View 也可以不变。

可重用性。你可以把一些视图逻辑放在一个 ViewModel 里面,让很多 view 重用这段视图逻辑。

独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计,使用 Expression Blend 可以很容易设计界面并生成 xml 代码。

可测试。界面素来是比较难于测试的,而现在测试可以针对 ViewModel 来写。

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

答:v-if(判断是否隐藏)、v-for(把数据遍历出来)、v-bind(绑定属性)、v-model(实现双向绑定)

23. vuex 的 store 特性是什么

答:vuex 就是一个仓库,仓库里放了很多对象。其中 state 就是数据源存放地,对应于一般 vue 对象里面的 datastate 里面存放的数据是响应式的,vue 组件从 store 读取数据,若是 store 中的数据发生改变,依赖这相数据的组件也会发生更新它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性

24.vuex 的 getter 特性是什么

答:getter 可以对 state 进行计算操作,它就是 store 的计算属性虽然在组件内也可以做计算属性,但是 getters 可以在多给件之间复用如果一个状态只在一个组件内使用,是可以不用 getters

25. vuex 的 mutation 特性是什么

答:action 类似于 muation, 不同在于:action 提交的是 mutation,而不是直接变更状态action 可以包含任意异步操作

vue 中 ajax 请求代码应该写在组件的 methods 中还是 vuex 的 action 中

如果请求来的数据不是要被其他组件公用,仅仅在请求的组件内使用,就不需要放入 vuex 的 state 里如果被其他地方复用,请将请求放入 action 里,方便复用,并包装成 promise 返回

26. Vuex 如何区分 state 是外部直接修改,还是通过 mutation 方法修改的?美团

答:Vuex 中修改 state 的唯一渠道就是执行 commit(‘xx’, payload) 方法,其底层通过执行 this._withCommit(fn) 设置_committing 标志变量为 true,然后才能修改 state,修改完毕还需要还原_committing 变量。外部修改虽然能够直接修改 state,但是并没有修改_committing 标志位,所以只要 watch 一下 state,state change 时判断是否_committing 值为 true,即可判断修改的合法性。

27. 不用 vuex 会带来什么问题

答:可维护性会下降,你要修改数据,你得维护 3 个地方

可读性下降,因为一个组件里的数据,你根本就看不出来是从哪里来的

增加耦合,大量的上传派发,会让耦合性大大的增加,本来 Vue 用 Component 就是为了减少耦合,现在这么用,和组件化的初衷相背

28. 1、v-show 与 v-if 区别

答:

1、v-show是css切换,v-if是完整的销毁和重新创建。
2、使用 频繁切换时用v-show,运行时较少改变时用v-if
3、v-if=‘false’ v-if是条件渲染,当false的时候不会渲染

29. Class 与 Style 如何动态绑定?

答:

Class

1、对象方法 v-bind:class=”{‘orange’: isRipe, ‘green’: isNotRipe}”
2、数组方法 v-bind:class=”[class1, class2]”<
3、行内 v-bind:style=”{color: color, fontSize: fontSize+’px’}”

Stlye

1、对象方法 <v-bind:style=”{ color: activeColor, fontSize: fontSize + ‘px’ }”
2、数组方法 v-bind:style=”[styleColor,styleSize]”

30. 说说Vue中的事件修饰符。

答:

.native:绑定一个原生的click事件

.prevent: 提交时间不再重载页面

.stop:阻止单击事件冒泡

.self:当事件发生在该元素本身而不是子元素的时候触发

.capture:事件侦听,事件发生的时候会调用

组合键 click.ctrl.exact 只有ctrl被按下的时候才触发

除非注明,文章均由 Dotnet9 整理发布,欢迎转载。

转载请注明本文地址:https://dotnet9.com/9238.html


.NET课程推荐
  1. 《.NET Core开发实战》  -  .NET Core微服务架构最佳实践                     点击了解更多
  2. 《.NetCore实战精品集》-  分布式/跨平台/微服务/前后分离/IOC/ORM  点击了解更多

发表评论

登录后才能评论

联系我们

186-2806-45xx

在线咨询:点击这里给我发消息

邮件:632871194@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code