devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue常见的考试题_期末vue的笔试题目

作者：花生_TL007 | 2024-02-29 08:15:44

赞

踩

期末vue的笔试题目

一.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 脚本放在底部而不是头部的原因。

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

常见的有display:none和visibility:hidden,两者都是隐藏,区别如下

  1. display:none; 让元素隐藏,不占用物理空间位置
  2. visibility:hidden; 让元素隐藏,但还占用物理空间位置

还有opacity:0

opacity:0; 就是设置元素的透明度,透明度为0,也能实现隐藏的效果

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

  1. box-sizing:content-box; 默认值，代表W3C盒模型：盒子定义宽高 = 内容宽高（content）
  2. box-sizing:border-box; 代表IE盒模型：盒子定义宽高 = 内容宽高（content） + 内边距 （padding）+ 边框（border）

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

1.Media Queries媒体查询

2.Flex弹性布局

3.rem + viewport 缩放

4.rem实现

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

基本数据类型

1.number

2.string

3.boolean

4.null

5.undefined

6.symbol

7.bigint

引用数据类型

object(包含Function/Array/Object)

区别:

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

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

3.复制变量时的不同

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

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

强制转化:就是指将一个数据类型强制转化为其他数据类型

        转string

                toString()

                String()

        转number

                number()

                parseInt() / parseFloat()

          转Boolean

                boolean()

七.let const和var的区别？

let 命令

1.用于声明变量,用法与var类似，但所声明的变量只在let命令所在的代码块内生效

2.不允许重复声明

3.不存在变量提升

4.暂时性死区

const

1.用于声明常量，一旦声明，常量的值不可修改

2.不允许重复声明

3.有块级作用域

4.声明时必须设置初始值 ,let和var可以不设置

var

1.用于声明全局变量

2.存在变量提升

3.没有块级作用域

4.允许重复声明

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

1.外形不同,箭头函数使用箭头定义,普通函数没有

2.箭头函数都是匿名函数

3.箭头函数不能用于构造函数，不能使用new

4.箭头函数中的this指向不同

        在普通函数中，this总是指向调用它的函数,如果在构造函数中，则指向创建的实例对象

        箭头函数本身没有this，但是它可以捕获其所在位置的上下文的this供自己使用

        注意：this一旦被捕获就不再发生改变

5.箭头函数的this指向不会被apply()、call()、bind()改变

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

存在异步任务的代码，不能保证能按照顺序执行，回调函数嵌套函调函数

解决方法：promise/async/await

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

1.创建对象

var xmlhttp = new XMLHttpRequest();//获取对象

 2.设置回调函数

  1. hxmlhttp.onreadystatechange = function(){//设置回调函数
  2. 	if(xmlhttp.readyState == 4)//这里的4是请求的状态码，代表请求已经完成
  3. 		if(xmlhttp.status == 200 || xmlhttp.status == 304)//这里是获得响应的状态码，200代表成功，304代表无修改可以直接从缓存中读取
  4. 			var result = xmlhttp.responseText;//这里获取的是响应文本，也可以获得响应xml或JSON
  5. 			alert("获取了响应文本" + result);
  6. }

3.设置请求地址 

  1. var url = "UserServlet.do?action=showUser";//POST请求
  2. var data = "id="+id;//为POST请求绑定请求参数，需要以键值对形式绑定
  3. var url = "UserServlet.do?action=showUser&id="+id;//GET请求

4.设置open()方法

xmlhttp.open("POST",url);

5.设置请求头(get请求可以忽略这一步)

xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

6.发送请求

  1. xmlhttp.send(data);//POST请求
  2. xmlhttp.send();//GET请求

11.什么情况下会导致跨域？

1.因为同源策略限制，不同源会造成跨域

2.以下任意一种情况不同都是不同源

  • 协议不同： http://
  • 子域名不同：www
  • 主域名不同：baidu.com
  •  端口号不同：8080
  •  ip地址和网址不同：www.baidu.com

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

一共8个阶段

  • beforeCreate（创建前）数据的准备阶段
  • created（创建后）数据准备成功,但dom还未挂载
  • beforeMount（载入前）dom挂载之前但还未被挂载,这时捕获不到dom
  • mounted（载入后）dom挂载成功,可以在这里获取dom并进行操作
  • beforeUpdate（更新前）更新之前,数据更新还未更新
  • updated（更新后）数据更新了,可以继续更新后的操作
  • beforeDestroy（销毁前）组件销毁之前,还可以获取dom实例
  • destroyed（销毁后）组件销毁了,获取不到dom,但可以获取data中的数据

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

1、主要是用在vue的虚拟Dom算法，在新旧nodes对比时辨识VNodes，相当于唯一标识ID,

2、vue会尽可能的高效的渲染元素，通常恢复已有的元素而不是从头开始进行渲染，因此使用key值可以提高渲染效率，同理，改变某一个元素的key值会使该元素重新被渲染。

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

  1. v-if是DOM渲染，通过添加或删除DOM节点来实现显隐效果

  2. v-show是css渲染，通过display:none来实现显隐效果

  1. v-bind动态绑定指令，默认情况下标签自带属性的值是固定的，在为了能够动态的给这些属性添加值，可以使用v-bind:你要动态变化的值="表达式"

  2. v-bind用于绑定属性和数据 ，其缩写为“ : ” 也就是v-bind:id  === :id  

  3. v-model用在表单控件上的，用于实现双向数据绑定，所以如果你用在除了表单控件以外的标签是没有任何效果的。

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

1.父传子

子组件代码:

  1. <template>
  2.     <div id="container">
  3.         {{msg}}
  4.     </div>
  5. </template>
  6. <script>
  7. export default {
  8.   data() {
  9.     return {};
  10.   },
  11.   props:{
  12.     msg: String
  13.   }
  14. };
  15. </script>
  16. <style scoped>
  17. #container{
  18.     color: red;
  19.     margin-top: 50px;
  20. }
  21. </style>

父组件代码:

  1. <template>
  2.     <div id="container">
  3.         <input type="text" v-model="text" @change="dataChange">
  4.         <Child :msg="text"></Child>
  5.     </div>
  6. </template>
  7. <script>
  8. import Child from "@/components/Child";
  9. export default {
  10.   data() {
  11.     return {
  12.       text: "父组件的值"
  13.     };
  14.   },
  15.   methods: {
  16.     dataChange(data){
  17.         this.msg = data
  18.     }
  19.   },
  20.   components: {
  21.     Child
  22.   }
  23. };
  24. </script>
  25. <style scoped>
  26. </style>

 父传子的实现方式就是通过props属性，子组件通过props属性接收从父组件传过来的值，而父组件传值的时候使用 v-bind 将子组件中预留的变量名绑定为data里面的数据即可

2.子传父

子组件代码:

  1. <template>
  2.     <div id="container">
  3.         <input type="text" v-model="msg">
  4.         <button @click="setData">传递到父组件</button>
  5.     </div>
  6. </template>
  7. <script>
  8. export default {
  9.   data() {
  10.     return {
  11.       msg: "传递给父组件的值"
  12.     };
  13.   },
  14.   methods: {
  15.     setData() {
  16.       this.$emit("getData", this.msg);
  17.     }
  18.   }
  19. };
  20. </script>
  21. <style scoped>
  22. #container {
  23.   color: red;
  24.   margin-top: 50px;
  25. }
  26. </style>

父组件代码:

  1. <template>
  2.     <div id="container">
  3.         <Child @getData="getData"></Child>
  4.         <p>{{msg}}</p>
  5.     </div>
  6. </template>
  7. <script>
  8. import Child from "@/components/Child";
  9. export default {
  10.   data() {
  11.     return {
  12.       msg: "父组件默认值"
  13.     };
  14.   },
  15.   methods: {
  16.     getData(data) {
  17.       this.msg = data;
  18.     }
  19.   },
  20.   components: {
  21.     Child
  22.   }
  23. };
  24. </script>
  25. <style scoped>
  26. </style>

 子传父的实现方式就是用了 this.$emit 来遍历 getData 事件，首先用按钮来触发 setData 事件，在 setData 中 用 this.$emit 来遍历 getData 事件，最后返回 this.msg

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

data是组件中唯一存放数据的地方

computed特点：

当值发生变化的时候，才会从新计算，不变化的时候拿到的是之前缓存的值
需要主动调用，具有缓存能力只有数据再次改变才会重新渲染，
否则就会直接拿取缓存中的数据。

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

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

可以保存被包裹的组件的状态,使其不被销毁,防止被多次渲染

目的:避免多次渲染减少浏览器性能和重复调用ajax浪费资源

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

用于页面跳转

a标签的作用是从当前页面跳转到另外一个页面，相当于重新加载了页面，还要重新渲染页面，增加了对DOM性能的损耗，vue-router不会重新渲染，它会选择路由所指的组件进行渲染

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

是专为Vue.js程序开发的状态管理模式，通俗来讲就是我们项目中需要的一些共享数据的管理容器，这里的状态就是数据。

从组件的角度看，如果组件要管理要维护的数据不多，我们大可不必使用vuex，但组件要管理的数据一多，代码就会变得杂乱，再者，如果两个组件要用同一数据，那么就要在两个组件中写两次，倒不如把数据放到仓库中管理，组件里写组件里的内容，数据管理交给vuex，后期对数据的维护只需要到仓库里（vuex）修改就行

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

vue的优点:

  • 数据的自动绑定
  • 页面参数传递和页面状态管理。
  • 模块化开发、无刷新保留场景参数更新
  • 代码的可阅读性（模块化开发带来的）
  • 基于强大的nodejs，拥有npm包管理器，可以很好滴管理包的版本
  • 各子组件样式不冲突
  • 视图,数据,结构分离
  • 虚拟dom
  • 各种指令;过滤器

vue的缺点:
vue是单页面页面，对于搜索引擎不友好，影响seo。比如两个vue路由（页面），它的路径是这样的：index.html#aaa 和 index.html#bbb，但对于搜索引擎来说，都是同一个页面，就是index.html。这样搜索引擎就无法收录你的页面。

注:转载学习

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/164538
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号