Vue常见的考试题

最新推荐文章于 2023-11-27 16:38:58 发布

高射炮小熊

最新推荐文章于 2023-11-27 16:38:58 发布

阅读量2.4k

点赞数 3

文章标签： vue.js

本文链接：https://blog.csdn.net/dsdjf/article/details/118175718

版权

一.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,两者都是隐藏,区别如下

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

还有opacity:0

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

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

box-sizing:content-box; 默认值，代表W3C盒模型：盒子定义宽高 = 内容宽高（content）
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.设置回调函数

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

3.设置请求地址

var url = "UserServlet.do?action=showUser";//POST请求
var data = "id="+id;//为POST请求绑定请求参数，需要以键值对形式绑定
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.发送请求

xmlhttp.send(data);//POST请求
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的作用和区别？

v-if是DOM渲染，通过添加或删除DOM节点来实现显隐效果
v-show是css渲染，通过display:none来实现显隐效果

v-bind动态绑定指令，默认情况下标签自带属性的值是固定的，在为了能够动态的给这些属性添加值，可以使用v-bind:你要动态变化的值="表达式"
v-bind用于绑定属性和数据，其缩写为“ : ” 也就是v-bind:id === :id
v-model用在表单控件上的，用于实现双向数据绑定，所以如果你用在除了表单控件以外的标签是没有任何效果的。

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

1.父传子

子组件代码:

<template>
    <div id="container">
        {{msg}}
    </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  props:{
    msg: String
  }
};
</script>
<style scoped>
#container{
    color: red;
    margin-top: 50px;
}
</style>

父组件代码:

<template>
    <div id="container">
        <input type="text" v-model="text" @change="dataChange">
        <Child :msg="text"></Child>
    </div>
</template>
<script>
import Child from "@/components/Child";
export default {
  data() {
    return {
      text: "父组件的值"
    };
  },
  methods: {
    dataChange(data){
        this.msg = data
    }
  },
  components: {
    Child
  }
};
</script>
<style scoped>
</style>

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

2.子传父

子组件代码:

<template>
    <div id="container">
        <input type="text" v-model="msg">
        <button @click="setData">传递到父组件</button>
    </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "传递给父组件的值"
    };
  },
  methods: {
    setData() {
      this.$emit("getData", this.msg);
    }
  }
};
</script>
<style scoped>
#container {
  color: red;
  margin-top: 50px;
}
</style>

父组件代码:

<template>
    <div id="container">
        <Child @getData="getData"></Child>
        <p>{{msg}}</p>
    </div>
</template>
<script>
import Child from "@/components/Child";
export default {
  data() {
    return {
      msg: "父组件默认值"
    };
  },
  methods: {
    getData(data) {
      this.msg = data;
    }
  },
  components: {
    Child
  }
};
</script>
<style scoped>
</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。这样搜索引擎就无法收录你的页面。

注:转载学习

高射炮小熊

关注

3
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
Vue常见的考试题

一.src和href的区别？1、请求资源类型不同（1）href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。（2）在请求 src 资源时会将其指向的资源下载并应用到文档中，常用的有script，img 、iframe；2、作用结果不同（1）href 用于在当前文档和引用资源之间确立联系；（2）src 用于替换当前内容；3、浏览器解析方式不同（1）若在文档中添加，浏览器会识别该文档为 CSS 文件，就会并.
复制链接

扫一扫