前端Vue常见的考试题

您所在的位置：网站首页 › vuejs前端开发实战期末考试 › 前端Vue常见的考试题

前端Vue常见的考试题

#前端Vue常见的考试题| 来源: 网络整理| 查看: 265

1.src和href的区别？

1、请求资源类型不同（1） href是Hypertext Reference(超文本引用)的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。（2）在请求 src 资源时会将其指向的资源下载并应用到文档中，常用的有script，img 、iframe； 2、作用结果不同（1）href 用于在当前文档和引用资源之间确立联系；（2）src 用于替换当前内容； 3、浏览器解析方式不同（1）若在文档中添加，浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式。（2）当浏览器解析到，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。

2.页面元素隐藏方式和各自特点？

displlay:none; 直接 "销毁"元素在页面中的位置;

visibility:hidden;直接让元素不可见,氮元素的物理空间还是存在的;

opacity:0;元素仅仅只是变透明了,但位置还是存在的

zoom:纵过改变元素大小的方式来隐藏属性

3.用过哪些盒模型，以及他们各自的区别？

box-sizing:content-box; 是W3C盒子模型

box-sizing:border-box; 是IE盒子模型

区别:

标准盒模型（W3C盒子模型），设置的width或height是对实际内容（content）的width或height进行设置，内容周围的border和padding另外设置，即盒子模型的width（height）=设置的content的宽高+padding+border+margin

怪异盒模型（IE盒子模型），设置的width或height是对实际内容（content）+内边距（padding）+边框（border）之和的width和height进行设置的，其盒模型的width（height）=设置的width (height)+外边距margin

4.谈谈你的移动端适配方案有哪些？

通过媒体查询的方式即CSS3的meida queries

以天猫首页为代表的 flex 弹性布局

以淘宝首页为代表的 rem+viewport缩放

rem 方式

注:转载

5.js 数据类型有几种？它们之间的区别是什么？

基本数据类型:Boolean Null Undefined Number String Symbol Bilnt

引用数据类型:Array Function Object

基本类型在栈内存,引用类型在堆内存分配地址

不同的内存分配机制也带来了不同的访问机制

复制变量时的不同

参数传递的不同（把实参复制给形参的过程）

6.数据类型强制转化和隐式转化的分别怎么使用？

强制类型转换：

就是指将一个数据类型强制转换为其他数据类型 parseInt() 将字符串强类型制转换为数字整数类型parseFloat() 将字符串类型转换为浮点类型Number() 只能将纯数字的字符转换为数字

隐式类型转换：

只做值的判断，实际隐式转换了类型，然后才进行的比较 7.let const 和 var 的区别？

var定义的变量，没有块的概念，存在变量提升,可以跨块访问, 不能跨函数访问,有全部变量和局部变量

let定义的变量，有块的概念,不存在变量提升, 不允许重复声明,暂时性死区

const一旦声明，常量的值就不能改变,声明必须有初始值,不存在变量提升

8.箭头函数和普通函数的区别？

写法不同:箭头函数使用箭头定义，普通函数中没有。

箭头函数不能用于构造函数,普通函数可以用于构造函数，以此创建对象实例。

箭头函数中this的指向不同: 箭头函数自身没有this，它的this是父级普通函数的this. 在普通函数中，this总是指向调用它的对象或者，如果用作构造函数，它指向创建的对象实例。

箭头函数不具有arguments对象,每一个普通函数调用后都具有一个arguments对象，用来存储实际传递的参数。但是箭头函数并没有此对象。

箭头函数不能当做Generator函数，不能使用yield关键字。箭头函数不具有prototype原型对象。箭头函数不具有super。

9.解释什么叫回调地狱以及怎么解决回调地狱？

回调地狱的列子:

setTimeout(function () { //第一层 console.log('武林要以和为贵'); setTimeout(function () { //第二程 console.log('要讲武德'); setTimeout(function () { //第三层 console.log('不要搞窝里斗'); }, 1000) }, 2000) }, 3000)

总结:可以看到,代码中的回调函数套回调函数，居然套了3层，这种回调函数中嵌套回调函数的情况就叫做回调地狱。

怎么解决：

通过promise链式调用的方式

Promise是js中的一个原生对象，是一种异步编程的解决方案，可以替换掉传统的回调函数解决方案。

Promise构造函数接收一个函数作为参数，我们需要处理的异步任务就卸载该函数体内，该函数的两个参数是resolve，reject。异步任务执行成功时调用resolve函数返回结果，反之调用reject。 Promise对象的then方法用来接收处理成功时响应的数据，catch方法用来接收处理失败时相应的数据。 Promise的链式编程可以保证代码的执行顺序，前提是每一次在than做完处理后，一定要return一个Promise对象，这样才能在下一次than时接收到数据。下面是实例代码：

但是Promise最大的问题就是代码冗余，原来的异步任务被Promise封装一下，不管什么操作都用than，就会导致一眼看过去全是than…than…than…,这样也是不利于代码维护的。

async/await

首先我们看async关键字，他作为一个关键字放到声明函数前面，表示该函数为一个异步任务，不会阻塞后面函数的执行

async function fn(){ return '不讲武德'; } console.log(fn());

可以看到async函数返回数据时自动封装为一个Promise对象。

和Promise对象一样，处理异步任务时也可以按照成功和失败来返回不同的数据，处理成功时用than方法来接收，失败时用catch方法来接收数据：

async function fn() { var flag = true; if (flag) { return '不讲武德'; } else{ throw '处理失败' } } fn() .then(data=>{ console.log(data); }) .catch(data=>{ console.log(data); }) console.log('先执行我，表明async声明的函数是异步的');

当把flag设置为false是，执行结果为：

async关键字说完了，我们看看awai关键字

await关键字只能在使用async定义的函数中使用await后面可以直接跟一个 Promise实例对象（可以跟任何表达式，更多的是跟一个返回Promise对象的表达式）await函数不能单独使用await可以直接拿到Promise中resolve中的数据。 //封装一个返回promise的异步任务 function fn(str) { var p = new Promise(function (resolve, reject) { var flag = true; setTimeout(function () { if (flag) { resolve(str) } else { reject('处理失败') } }) }) return p; } //封装一个执行上述异步任务的async函数 async function test(){ var res1=await fn('武林要以和为贵'); //await直接拿到fn()返回的promise的数据，并且赋值给res var res2=await fn('要讲武德'); var res3=await fn('不要搞窝里斗'); console.log(res1,res2,res3); } //执行函数 test();

为什么叫await等待呢，因为当代码执行到async函数中的await时，代码就在此处等待不继续往下执行，知道await拿到Promise对象中resolve的数据，才继续往下执行，这样就保证了代码的执行顺序，而且使异步代码看起来更像同步代码。

总结总结一下，当我们写代码遇到异步回调时，我们想让异步代码按照我们想要的顺序执行，如果按照传统的嵌套方式，就会出现回调地狱，这样的代码不利于维护，我们可以通过Promise对象进行链式编程来解决，这样尽管可以解决问题，但是ES7给我们提供了更加舒适的async/await语法糖，可以使得异步代码看起来更像是同步代码。

10.说明原生ajax的实现步骤？

创建对象

var xhr = new XMLHttpRequest()

绑定事件

xhr.onreadystatechange = function(){ if(xhr.readyState != 4)return; if(xhr.status == 200 && xhr.readyState == 4){ console.log(xhr.responseText) }else{ console.log("请求失败") } }

初始化请求参数和地址

xhr.open(method,url,async)

发送请求

xhr.send() 11.什么情况下会导致跨域？

违反了同源策略时会导致跨域

12.vue 有几个生命周期以及各个生命周期的调用时机？

有8个

beforeCreate (创建前) 创建前的阶段，这个时候data中的数据，还未定义，所以不能使用

created (创建后) 最早开始使用 data和methods中数据的钩子函数

befoerMount (载入前)

mounted (载入后) 挂在完成，也就是模板中的HTML渲染到HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次。

beforeUpdate (更新前) 在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前，可以在该钩子中进一步地更改状态，不会触发附加地重渲染过程

updated (更新后) 在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用，调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作，然后在大多是情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环，该钩子在服务器端渲染期间不被调用

beforeDestroy (销毁前) 在实例销毁之前调用，实例仍然完全可用，

destroyed (销毁后) 在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用

注:转载

13. 使用vue中的v-for时,为什么要绑定 :key? 如果不绑定会有什么效果？

因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM保持数据的唯一,如果不绑定会造成数据混乱,不利于维护,不绑定会导致所有列表DOM重新渲染

14.v-show 和 v-if 的作用和区别, v-bind 和 v-model的作用和区别？

v-show和v-if作用:都是来控制元素的隐藏

相同点：v-if与v-show都可以动态控制dom元素显示隐藏

不同点：v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css--display:none，dom元素还在。

v-bind和v-model的作用:如下图

v-model:

绑定text

绑定checkBox 单个勾选框，最终的值为逻辑值true和false

v-bind:

绑定属性

区别: v-bind用来绑定数据和属性以及表达式，缩写为'：' v-model使用在表单中，实现双向数据绑定的，在表单元素外使用不起作用

注:转载

15.vue 组件通信如何实现，至少列举3种方式并说明各自的局限性？ 1.父传子:

子组件代码:

{{msg}} export default { data() { return {}; }, props:{ msg: String } }; #container{ color: red; margin-top: 50px; }

父组件的代码:

import Child from "@/components/Child"; export default { data() { return { text: "父组件的值" }; }, methods: { dataChange(data){ this.msg = data } }, components: { Child } }; 2.子传父:

子组件代码：

传递到父组件 export default { data() { return { msg: "传递给父组件的值" }; }, methods: { setData() { this.$emit("getData", this.msg); } } }; #container { color: red; margin-top: 50px; }

父组件代码：

import Child from "@/components/Child"; export default { data() { return { msg: "父组件默认值" }; }, methods: { getData(data) { this.msg = data; } }, components: { Child } };

3. 非父子 vue 中没有直接子对子传参的方法，建议将需要传递数据的子组件，都合并为一个组件如果一定需要子对子传参，可以先从传到父组件，再传到子组件（相当于一个公共bus文件）为了便于开发，vue 推出了一个状态管理工具 vuex，可以很方便实现组件之间的参数传递

注:转载

16.详细说明vue组件中 data ，computed 和 watch的区别？

简单记录一下. vuex中使用store和data和computed计算属性的先后对比例子：计算结果的案例： data：初始组件的时候data拿到的是store的值是还没有输入过的原始值, 点击按钮的时候，取data中的值是原始值，不能自己更新。 computed：换成计算属性时，是当值发生变化的时候，从新计算，不变化的时候拿到的是之前缓存的值。

两个数相加求和: data:

//这里只记录小部分 data(){//只能获取到原始值 return{ ha:this.$store.state.s_a; hb:this.$store.state.s_b; } }

computed:

computed:{//计算属性，获取监听变化后的值 m(){//自定义一个方法，获取到输入后变化后的值 return （this.$store.state.s_a-0）+(this.$store.s_b-0) //这里用减号(-0)是相加在一起，当不用减号时(两个数字会拼接在一起) } }

watch：也可以实现实时监听. computed和watch区别?

Computed特点：需要主动调用，具有缓存能力只有数据再次改变才会重新渲染，否则就会直接拿取缓存中的数据。

Watch特点：无论在哪只要被绑定数据发生变化Watch就会响应，这个特点很适合在异步操作时用上。

注:转载

17.keep-alive的作用是什么？使用它的目的是什么？

作用:

keep-alive可以在组件切换时，保存其包裹的组件的状态，使其不被销毁，防止多次渲染。其拥有两个独立的生命周期钩子函数 actived 和 deactived，使用keep-alive包裹的组件在切换时不会被销毁，而是缓存到内存中并执行 deactived 钩子函数，命中缓存渲染后会执行 actived 钩子函数。

目的:

一般情况下，组件进行切换的时候，默认会进行销毁，如果有需求，某个组件切换后不进行销毁，而是保存之前的状态，那么就可以利用keep-alive来实现

18.vue-router的作用是什么？为什么不使用a标签？

vue-router的作用:根据url锚点路径,在容器上加载不同的模块,本质作用是作业面导航

完成SPA的开发,仅在Web页面初始化加载相应的HTML JavaScript Css

一旦页面加载完成,SPA不会因为用户的操作而进行页面的重新加载或跳转,而是利用JavaScript的动态的变换HTML(采用的是div切换显示和隐藏),从而实现UI与用户的交换

为什么不适用a标签?

至于我们为啥不能用a标签，这是因为用Vue做的都是单页应用，就相当于只有一个主的index.html页面，所以你写的标签是不起作用的，你必须使用vue-router来进行管理。

点击a标签从当前页面跳转到另一个页面通过a标签跳转，页面就会重新加载，相当于重新打开了一个网页,a标签会重新渲染,增加了dom性能的消耗

19.vuex 是什么？怎么使用？为什么用使用它？

vuex 是什么？

介绍：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

理解：核心就是 store（仓库），仓库是用来干什么的？你就当它用来储存东西的。

怎么使用？

在main.js引入store,只用来读取的状态集中放在store中；改变状态的方式是提交mutations，这是个同步的事物；异步逻辑应该封装在action中,modules：把状态管理模块化，各自的组件构成各自的模块

注:转载

为什么用使用它？

组件和数据之间的对应关系，随着项目的复杂，变得混乱。所以需要统一管理数据，把数据的存取集中到一个地方，所有的组件都从这个地方取数据，更新数据也集中到同一个地方。所以就要使用vuex

20.请谈一下你对使用原生js开发和使用vue开发的看法。(至少20字以上)

原生js 面向浏览器编程，需要写很多兼容性代码操作dom更繁琐，复杂交互需要频繁操作dom，且代码不够友好可扩展性和可维护性没有保证团队协作困难开发效率低下 vue 1)优点 : 基于MVVM 实现的数据驱动视图，解放了DOM操作 View 与 Model 分离处理，降低代码的耦合度 2)缺点: 当双向绑定时，Bug调试难度增大大型项目中，View和Model过多，维护成本过高

【本文地址】

公司简介

联系我们