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

时间 2021-01-12

标签 javascript css html 前端 vue java webpack ios git 程序员栏目 JavaScript 繁體版

原文原文链接

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

把你的前端拿捏得死死的，天天学习得爽爽的，若是你所学的东西处于喜欢才会有强大的动力支撑。
感谢不负每一份热爱前端的程序员，不论前端技能有多奇葩，欢迎关注加我入群vx:xiaoda0423css

前言

但愿能够经过这篇文章，可以给你获得帮助。(感谢一键三连)html

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）。vue

下面代码展现：java

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

设计页面样式代码以下：webpack

<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>

效果图以下：ios

5.什么是`MVVM`框架？

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

在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 = 10
app.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>

点赞、收藏和评论

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

咱们下期见！

文章持续更新，本文 http://www.dadaqianduan.cn/#/ 已经收录
github收录，欢迎Star：https://github.com/webVueBlog/WebFamily

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是什么