Vue.js 笔试题解决业务中常见问题

魔王哪吒

关注

发布于: 2021 年 01 月 25 日

哪吒人生信条：如果你所学的东西处于喜欢才会有强大的动力支撑。

每天学习编程，让你离梦想更新一步，感谢不负每一份热爱编程的程序员，不论知识点多么奇葩，和我一起，让那一颗像四处流荡的心定下来，一直走下去，加油，2021加油！欢迎关注，欢迎点赞、收藏和评论

不要害怕做梦，但是呢，也不要光做梦，要做一个实干家，而不是空谈家，求真力行。

前言

希望可以通过这篇文章，能够给你得到帮助。(感谢一键三连)

1.h5 底部输入框被键盘遮挡问题

如果你遇到h5页面这个问题，当输入框在最底部，点击软键盘后输入框会被遮挡，可以如下解决问题：

var getHeight = $(document).height();
$(window).resize(function(){ if($(document).height() < getHeight) {  $('#footer').css('position','static'); }else {  $('#footer').css('position','absolute'); }});

复制代码

2.触屏即播放

$('html').one('touchstart',function(){ audio.play()})

复制代码

3.阻止旋转屏幕时自动调整字体大小

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

复制代码

4.主流网站布局

页面分为 3 个部分：页面的顶部header，底部footer，中间部分（侧栏side和主要部分main）。

下面代码展示：

<body> // 页面层容器 <div id="container">  // 页面头部  <div id="header"></div>  // 页面主体  <div id="main">>   // 侧边栏   <div id="side">   </div>  </div>  // 页面底部  <div id="footer"></div> </div></body>

复制代码

设计页面样式代码如下：

<style type="text/css"> body{  font: 12px 微软雅黑;  margin: 0px;  text-align: center;  background: #fff; }  // 页面层容器 #container {  width: 100%; } #header {  width: 800px;  margin: 0 auto;  height: 100px;  background: #FFCC99; } #main {  width: 800px;  margin: 0 auto;  height: 400px; } #side {  float: left;  width: 20em;  background: red;  padding: 15px 0; } #foot {  width: 800px;  margin: 0 auto;  height: 50px;  background: #00ffff; }</style>

复制代码

效果图如下：

5.什么是 MVVM 框架？

MVVM框架是一个Model-View-ViewModel框架，其中ViewModel连接模型Model和视图View。

在vue.js中的MVVM模式：

vue.js是通过数据驱动的，vue.js实例化对象将dom和数据进行绑定，一旦绑定，dom和数据将保持同步，每当数据发生变化，dom也会随着变化；ViewModel是Vue.js的核心，它是Vue.js的一个实例。Vue.js会针对某个HTML元素进行实例化，这个HTML元素可以是body，也可以是某个css选择器所指代的元素。DOM Listeners和Data Bindings是实现双向绑定的关键。DOM Listeners监听页面所有View层中的DOM元素，当发生变化时，Model层的数据随之变化。Data Bindings会监听Model层的数据，当数据发生变化时，View层的DOM元素也随之变化。

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

它是vue-router模块的router-link组件的属性

7.如何定义 vue-router 的动态路由

在静态路由名称前面添加冒号，如设置id动态路由参数，为路由对象的path属性设置/:id

8.如何获取传过来的动态参数

在组件中，使用$router对象的params.id，如$route.params.id

9.vue-router 有哪几种导航的钩子

有三种，第一种是全局导航钩子，router.beforeEach(to,from,next)，作用是跳转前进行判断拦截；第二种是组件内的钩子；第三种是单独路由独享组件。

导航钩子又叫导航守卫，又分为全局钩子，单个路由独享钩子和组件级钩子。

全局钩子有beforeEach,beforeResolve,afterEach，单个路由独享钩子有：beforeEnter

组件级钩子有：beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave：它们有以下参数：

to表示即将要进入的目标路由对象；from表示当前导航正要离开的路由；next表示一定要用这个函数才能到达下一个路由，如果不用就会遭到拦截。

10.mint-ui 是什么

mint-ui它是基于Vue.js的前端组件库，用npm安装，然后通过import导入样式和JavaScript代码，vue.use(mintUi)用于实现全局引入，import {Toast} from 'mint-ui'用能于在单个组件局部引入

11.v-model 是什么

v-model是vue.js的一条指令，实现数据的双向绑定

双向数据绑定的原理：

vue.js使用es5提供的属性特性功能，结合发布者-订阅者模式，通过Object.defineProperty()为各个属性定义get,set特性方法，在数据发送改变时给订阅者发布消息，触发相应的监听回调。

过程：a，对需要观察的数据对象进行递归遍历，包含子属性对象的属性，设置set和get特性方法；当给这个对象的某个值赋值时，会触发绑定的set特性方法，就能起到监听数据的变化。b，用compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，就会收到通知，并更新视图。c，Watcher订阅者是Observer和Compile之间通信的桥梁：在自身实例化时向属性订阅器dep里面添加自己；自身必须有一个update()方法；在dep.notice()发布通知时，能调用自身的update()方法，并触发Compile中绑定的回调函数。d，MVVM是数据绑定的入口，整合了Observer，Compile和Wathcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher来搭起Observer和Compile之间的通信桥梁，达到数据变化通知视图更新的效果，利用视图交互，变化更新数据model变更的双向绑定效果。

12.vue.js 中标签如何绑定事件

第一种方式，使用v-on；第二种方式，使用@语法糖

13.vuex 是什么

vuex是vue.js框架实现的状态管理系统。使用vuex，要引入store，并注入vue.js组件中，在组件内部可以通过$store访问store对象；使用场景，在单页应用中，用于组件之间的通信，如音乐播放，登录状态管理，加入购物车等

vuex可以说是一种开发模式或框架，它是对vue.js框架数据层面的扩展，通过状态集中管理驱动组件的变化，应用的状态集中放在store中，改变状态的方式是提交mutations，这是个同步的事务，异步的逻辑应该封装在action中。

14.在 vue 中说说你知道的自定义指令

自定义指令两种：一种全局自定义指令，vue.js对象提供了directive方法，可以用来自定义指令，directive方法接收两个参数，一个是指令名称，另一个是函数；第二种是局部自定义指令，通过组件的directives属性定义。

15.vue.js 中常用的 4 种指令

v-if判断对象是否隐藏；v-for循环渲染；v-bind绑定一个属性；v-model实现数据双向绑定

在v-if循环中实现v-model数据的双向绑定：

有时需要创建input，并用v-model实现数据的双向绑定。此时可以为v-model绑定数组的一个成语selected[$index]，这样可以给不同的input绑定不同的v-model:

<div v-for="(item,index) in arrDa"> <input type="text" v-model="arrData[index]"> <h1>{{arrDa[index]}}</h1></div>

复制代码

16.vue-router 是什么

vue-router是vue.js的路由插件，（常用router-link和router-view）

17.vue.js 的生命周期

共分 8 个阶段：

beforeCreate

在实例初始化之后，数据观测者data observer和event/watcher事件配置之前调用

created

在实例创建完成后立即调用，此时，实例已完成：观测者，属性和方法的运算，watch/event事件回调，挂载阶段还没开始，$el属性目前不可见。

beforeMount

在挂载开始之前调用，相关的render函数首次调用。

mounted

el被新创建的vm.$el替换，并且在挂载到实例上之后再调用该钩。如果root实例挂载了一个文档内元素，当调用mounted时vm.$el也在文档内。

beforeUpdate

在数据更新时调用，发生在虚拟dom重新渲染和打补丁之前。

updated

由于数据更改导致的虚拟dom重新渲染和打补丁，在这之后会调用该钩子。

beforeDestroyed

在实例销毁之前调用，在这一步，实例仍然完全可用。

destroyed

在vue.js实例销毁后调用，vue.js实例指示的所有东西都会解除绑定，所有的事件监听会被移除，所有的子实例也会被销毁。

如果使用组件的keep-alive功能时，增加两个周期：

activated在keep-alive组件激活时调用；
deactivated在keep-alive组件停用时调用。

<keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。<keep-alive>是一个抽象组件，它自身不会渲染一个DOM元素，也不会出现在父组件链中。

当在<keep-alive>内切换组件时，它的activated和deactivated这两个生命周期钩子函数将会执行。

<keep-alive> <component :is="view"></component></keep-alive>

复制代码

增加一个周期钩子：ErrorCaptured表示当捕获一个来自子孙组件的错误时调用。

18.描述封装 vue 组件的作用过程

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

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

使用自定义组件：

在components目录中新建组件文件，脚本一定要导出暴露的接口；导入需要用到的页面；将导入的组件注入vue.js的子组件的components属性中；在template的视图中使用自定义组件。

创建组件

<div id="app"> <dada></dada></div><template id="demo"> <div>  <h1>{{msg}}</h1> </div></template><script type="text/javascript">// 定义组件类var dada = Vue.extend({ template: '#demo', data:function() {  return {   msg: 'dadaqianduan.cn'  } }})// 注册组件Vue.component('dada',dada);// 定义Vue实例化对象var app = new Vue({ el: '#app', data: {}})</script>

复制代码

19.vue-loader 是什么

vue-loader它是解析.vue文件的一个加载器，将template/js/style转换成javascript模块；通过这个vue-loader，javascript可以写EMAScript6语法，style样式可以应用scss或less，template可以添加jade语法。。。

20.在 vue.cli 项目中的 src 目录说明

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

21.对 vue.js 的 template 编译的理解

首先转化成AST抽象语法树，Abstract Syntax Tree，就是将源代码语法结构抽象成树状表现形式，然后通过render函数进行渲染，并返回VNode（Vue.js的虚拟dom节点）。

通过compile编译器把template编译成AST，compile是createCompiler的返回值，createCompiler用来创建编译器，compile还负责合并option；AST会经过generate-将AST转换成render function 字符串的过程-得到render函数，render的返回值是VNode，VNode是Vue.js的虚拟DOM节点，里面有标签名，子节点，文本等。

22.v-show 指令和 v-if 指令的区别

它们都是条件渲染指令，不同的是，v-show的值无论是true或false元素都会存在于html页面中，而v-if的值为true时，元素才会存在于html页面中。

v-show指令是通过修改元素的style属性值实现的。

23.让 css 只在当前组件中起作用

只需要在style标签中添加scoped属性，<style scoped></style>

24.在 vue.js 中如何实现路由嵌套

路由嵌套会将其他组件渲染到该组件内，而不是使整个页面跳转到router-view定义组件渲染的位置，要进行页面跳转，要将页面渲染到根组件内。首先实例化根组件，在根组件中定义组件渲染容器，然后，挂载路由，当切换路由时，将会切换整个页面。

new Vue({ el: '#dada', router: router, template: '<router-view></router-view>'})

复制代码

25.在 vue.js 中的 ref 属性有什么作用

可以直接访问组件内部的一些元素，定义属性可以在组件内部通过this.$refs属性，，访问设置ref属性的元素，这是一个原生的DOM元素，要使用原生DOM API操作它们。

26.在 vue.js 开发环境下调用接口，如何避免跨域

在config/index.js内对proxyTable项进行如下配置：

proxyTable: { '/api': {   target: 'http://xxx.com',   changeOrign: true,   pathRewrite: {    '^/api': ''   }  }}

复制代码

27.axios 是什么

axios是vue2.0中用来替换vue-resource.js插件的一个模块，是一个请求后台资源的模块

使用npm install axios来安装axios

import Vue from 'vue'import axios from 'axios';Vue.prototype.$http = axios;new Vue({ el: 'dada', data: {  mag: '' }, template: '<h1>{{msg}}</h1>', created: function() {  this.$http.get('data.json').then(res=>{   this.msg = res.data.data  }) }})

复制代码

当调用axios.post('api/user')时，表示发送post异步请求。

28.sass 是什么

sass是一种css预编译语言，用npm安装加载程序；在webpack.config.js中配置sass加载程序

module: { // 加载程序 loaders: {  // 加载scss  {   test: /\.scss$/,   loader: 'vue-style-loader!css-loader!sass-loader'  } }}

复制代码

29.什么情况下会产生片段实例

模板包含多个顶级元素；模板只包含普通文本；模板只包含其他组件，模板只包含一个元素指令，如vue-router的<router-view>；模板根节点有一个流程控制指令，如v-if或v-for

这些情况让实例有未知数量的顶级元素，模板将把它的DOM内容当作片段。片段实例仍然会正确地渲染内容。不过，模板没有一个根节点，它的$el指向一个锚节点，即一个空的文本节点。

在vue2.0中，组件的模板只允许有权只有一个根节点。

30. 实现多个根据不同条件显示不同文字的方法

<div id="app"> <input type="text" v-model="inputValue"> <h1>{{showValue}}</h1></div>var app = new Vue({ el: '#app', data: {  inputValue: '' }, computed: {  showValue: function() {   return this.inputValue || '请输入内容'  } }})

复制代码

31.什么是数据的丢失

如果在初始化时没有定义数据，之后更新的数据是无法触发页面渲染更新的，这部分数据是丢失的数据，这种现象叫数据的丢失。

32.如何检测数据的变化

通过直接索引设置元素：app.arr[0]=
修改数据的长度：app.arr.length

为了解决该问题，Vue.js扩展了观察数组，为它添加了一个$set()方法，用该方法修改的数组，能触发视图更新，检测数据变化。

app.$set(app.arr, 5, 500);

复制代码

由于javascript特性的限制，vue.js不能检测到对象属性的添加或删除，因为Vue.js在初始化时将数组转化为getter/setter，所以属性必须在data对象中定义，才能在初始化时让vue.js转换它并让它响应。

var data = { obj: {  a: 1 }}var app = new Vue({ el: '#app', data: data})app.ojb.a = 10app.obj.b = 20 // 不是响应的data.obj.b = 20 // 不是响应的

复制代码

如果需要在实例创建之后添加属性并且让它能够响应，使用$set实例方法：

app.$set(app.obj, 'b', 200)

复制代码

对于普通数据对象，可以全局方法Vue.set(object,key,value)

Vue.set(data.obj, 'b', 250)

复制代码

33.vue.js 文件中的样式覆盖不生效的问题

在style上加上scoped可以让样式私有化，只针对当前vue.js文件中的代码有效，不会对别的文件中的代码造成影响，有时，引入第三方UI，在vue.js文件中进行样式覆盖不生效，大概是因为style上的scoped导致的。

可以将需要覆盖样式的这部分代码放到单独的css文件中，在main.js文件导入即可。

34.如何解决数据层级结构太深

在开发中，常出现异步获取数据的情况，有时数据层次太深，如：

<text v-text="a.b.c.d"></text>

复制代码

可以使用vm.$set手动定义一层数据：vm.$set("dada", a.b.c.d)

35.vue.js 页面的闪烁

在vue.js有一个v-cloak指令，该指令一直保持在元素上，直到关联实例结束编译。当和css使用时，这个指令可以隐藏未编译的标签，直到实例编译结束：<div>不会显示，直到编译结束。

[v-cloak] { display: none;}<div v-cloak>{{dada}}</div>

复制代码

面向 JavaScript 爱好人员提供：Web 前端最新资讯、原创内容、JavaScript、HTML5、Ajax、jQuery、Node.js、Vue.js、React、Angular 等一系列教程和经验分享。

点赞、收藏和评论

我是 Jeskson(达达前端)，感谢各位人才的：点赞、收藏和评论，我们下期见！(如本文内容有地方讲解有误，欢迎指出☞谢谢，一起学习了)

我们下期见！

文章持续更新，可以微信搜一搜「程序员哆啦 A 梦」第一时间阅读，回复【资料】有我准备的一线大厂资料，本文 http://www.dadaqianduan.cn/#/ 已经收录

github 收录，欢迎 Star：https://github.com/webVueBlog/WebFamily

发布于: 2021 年 01 月 25 日阅读数: 30

原文链接:【http://xie.infoq.cn/article/eca8026c6e7b3d0fd0aaa3d3a】。未经作者许可，禁止转载。

魔王哪吒

关注

微信搜：程序员哆啦A梦 2018.05.08 加入

面向JavaScript爱好人员提供：Web前端最新资讯、原创内容、JavaScript、HTML5、Ajax、jQuery、Node.js、Vue.js、React、Angular等一系列教程和经验分享。博客首发：http://www.dadaqianduan.cn/#/

发布

暂无评论

创作场景

Vue.js 笔试题解决业务中常见问题

前言

1.h5 底部输入框被键盘遮挡问题

2.触屏即播放

3.阻止旋转屏幕时自动调整字体大小

4.主流网站布局

5.什么是 MVVM 框架？

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

7.如何定义 vue-router 的动态路由

8.如何获取传过来的动态参数

9.vue-router 有哪几种导航的钩子

10.mint-ui 是什么

11.v-model 是什么

12.vue.js 中标签如何绑定事件

13.vuex 是什么

14.在 vue 中说说你知道的自定义指令

15.vue.js 中常用的 4 种指令

16.vue-router 是什么

17.vue.js 的生命周期

18.描述封装 vue 组件的作用过程

19.vue-loader 是什么

20.在 vue.cli 项目中的 src 目录说明

21.对 vue.js 的 template 编译的理解

22.v-show 指令和 v-if 指令的区别

23.让 css 只在当前组件中起作用

24.在 vue.js 中如何实现路由嵌套

25.在 vue.js 中的 ref 属性有什么作用

26.在 vue.js 开发环境下调用接口，如何避免跨域

27.axios 是什么

28.sass 是什么

29.什么情况下会产生片段实例

30. 实现多个根据不同条件显示不同文字的方法

31.什么是数据的丢失

32.如何检测数据的变化

33.vue.js 文件中的样式覆盖不生效的问题

34.如何解决数据层级结构太深

35.vue.js 页面的闪烁

点赞、收藏和评论

我们下期见！

魔王哪吒

评论