logo资料库

前端面试题(2019).docx

发布时间：2022-06-14 发布人：admin 分类：说明书 资料大小：0.29M 资料格式：docx 举报 版权申诉
第1页 / 共16页
第2页 / 共16页
第3页 / 共16页
第4页 / 共16页
第5页 / 共16页
第6页 / 共16页
第7页 / 共16页
第8页 / 共16页
资料共16页，剩余部分请下载后查看
    vue的优点是什么？
    1.低耦合 2. 可重用性 3. 独立开发 4. 可测试.
    vuex有哪几种属性？
    的作用是什么?
    指令v-el的作用是什么?
    第一次页面加载会触发哪几个钩子
    简单描述每个周期具体适合哪些场景
    超链接四个状态的正确顺序
    类数组转换为数组的方法
    JS继承的实现方式
    1、原型链继承
    2、构造继承
    3、实例继承
    4、拷贝继承
    6、寄生组合继承
    数组去重的6种方法
    JS异步加载的三种实现方式
    二. v-show和v-if指令的共同点和不同点?
    指令v-el的作用是什么?
    vue如何实现按需加载配合webpack设置
    为什么使用key？
    input和textarea的区别
    div模拟textarea文本域及高度自适应
    一个普通的div元素上加个contenteditable="true"就ok了
    说说你对作用域链的理解
    渐进增强和优雅降级
    JS继承的实现方式
    1.原型链继承：核心： 将父类的实例作为子类的原型
    2、构造继承
    3、实例继承
    什么情况会引起内存泄漏？
    Promise实现原理
    检测网站打开速度
    Vue.js双向数据绑定原理
    网页图片的懒加载和预加载
    解决跨域问题 1. 用 jsonp 来解决 2. 在 php 脚本中写入: Header(‘Access-control-Allow-Origin’)//允许所有来源访问 Header(‘Access-control-Allow-Method:Post,Get’)//允许访问方式 This 的指向问题 1. 普通的函数指向 window 2. 对象方法调用指向对象 3. 构造器方法调用，指向构造函数实列出来的对象 4. Call，apply，bind 可以自定义 this 指向第一个参数 New 操作符到底干了什么 1. 创建一个对象 2. 将构造函数的作用域值给新对象（这里的 this 指向了新对象） 3. 执行构造函数的代码（为这个新对象添加属性） 4. 返回新对象 事件委托代理 利用冒泡的原理，将事件绑定到父元素上，让父元素进行监听， 提高性能 在浏览器上输入 url 到整个页面显示发生了什么 1. 当发送一个 url 请求时，浏览器都会开启一个线程来处理请求， 同时在远程 dns 服务器上启动一个 dns 查询，这能使浏览器获 得请求对应的 ip 地址
    2. 浏览器与远程 web 服务器通过 tcp 三次握手协商来建立一个 tcp/ip 连接，该握手包括一个同步报文，一个同步应答报文和 一个应答报文，这三个报文在浏览器和服务器之间传递，该握 手首先由客户端建立起通信，而后服务器应答并接受客户端的 请求，最后又客户端发出该请求已经被接受的报文 3. 一旦 tcp/ip 连接建立，浏览器会通过该连接向远程服务器发送 http 的 get 请求，远程服务器找到资源并使用 http 响应返回该 资源，值为 200 的 http 响应状态表示一个正确的响应 4. Web 服务器提供资源服务，客户端开始下载资源 箭头函数不能用可以用什么来代替箭头函数？ 1. 定义对象方法、定义原型方法、定义构造函数、定义事件回调函数。 隐式转换跟另外一种转换？ 1. 强制转换：通过 String（），Number（），Boolean（）函数强制转换 2. 隐式转换：我们可以用 typeof 方法打印来某个是属于哪个类型的。不同类型 的变量比较要先转类型，叫做类型转换，类型转换也叫隐式转换。隐式转换通 常发生在运算符加减乘除，等于，还有小于，大于等。 ==与===的区别 第一点：前者仅判断数据的值，而后者是先判断数据的类型，相同的前提下在 判断数据的值。 第二点：也就是评论中所说的“操作数类型不同时它们的处理方式不同” Mvc 和 mvvm 的区别 在 MVC 里，View 是可以直接访问 Model 的！从而，View 里会包含 Model 信息，不可避免的还要包括一些业务逻辑。 MVC 模型关注的是 Model 的不变，
    所以，在 MVC 模型里，Model 不依赖于 View，但是 View 是依赖于 Model 的。不仅如此，因为有一些业务逻辑在 View 里实现了，导致要更改 View 也是 比较困难的，至少那些业务逻辑是无法重用的。 MVVM 在概念上是真正将页面与数据逻辑分离的模式，它把数据绑定工作 放到一个 JS 里去实现，而这个 JS 文件的主要功能是完成数据的绑定，即把 model 绑定到 UI 的元素上。 vue 的优点是什么？ 1.低耦合 2. 可重用性 3. 独立开发 4. 可测试. vuex 有哪几种属性？ 有五种，分别是 State、 Getter、Mutation 、Action、 Module 的作用是什么? 包裹动态组件时，会缓存不活动的组件 实例，主要用于保留组件状态或避免重新渲染。 指令 v-el 的作用是什么? 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标.可以是 CSS 选择器，也可以是一个 HTMLElement 实例 第一次页面加载会触发哪几个钩子 答：第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子 简单描述每个周期具体适合哪些场景 beforecreate : 可以在这加个 loading 事件，在加载实例时触发 created : 初始化完成时的事件写在这里，如在这结束 loading 事件，异步 请求也适宜在这里调用 mounted : 挂载元素，获取到 DOM 节点 updated : 如果对数据统一处理，在这里写上相应函数 beforeDestroy : 可以做一个确认停止事件的确认框 如何阻止 Vue 中的绑定事件不发生冒泡
    可以使用“事件修饰符”来处理事件冒泡，如：v-on:click.stop 阻 止事件冒泡 或 v-on:submit.prevent 阻止默认事件。 什么是动态组件？他的作用是什么？ 通过使用保留的 元素，动态地绑定到它的 is 特性，我们让多 个组件可以使用同一个挂载点，并可以动态地切换。 除此之外，Vue 还提供了 keep-alve 指令。keep-alive 指令允许把切换出去的 组件保留在内存中，并保留它的状态或避免重新渲染。 为什么组件中的 data 属性的值必须是一个函数？ 因为在一个组件被多次引用的情况下，如果 data 的值是一个 Object 的话，那 么由于 Object 是一个引用类型，所以即使是该组件被多次引用，而其实操作的 是同一个对象，最终导致了引用该组件的所有位置都同步的显示了。 导航钩子有哪些?它们有哪些参数? 答:导航钩子有:a/全局钩子和组件内独享的钩子。 b/beforeRouteEnter、 afterEnter 、 beforeRouterUpdate 、 beforeRouteLeave 参数:有 to (去的那个路由)、 from (离开的路由)、 next (一 定要用这个函 数才能去到下一个路由,如果不用就拦截)最常用就这 几种 超链接四个状态的正确顺序 A:link 超链接的默认样式 A:visited 访问过的（已经看过的）链接样式 A:hover 鼠标处于鼠标悬停状态的链接样式 A:active 当鼠标左键按下时，被激活（就是鼠标按下去那一瞬间） 的链接样式。 类数组转换为数组的方法 1、 Array.prototype.slice.call() 这种方法是借用了数组 原型中的 slice 方法，返回一个数组
    2、 Array.from()是 ES6 中新增的方法，可以将两类对象转为真 正的数组： 3、 同样是 ES6 中新增的内容，扩展运算符（…）也可以将某些 数据结构转为数组 JS 继承的实现方式 1、原型链继承 2、构造继承 3、实例继承 4、拷贝继承 6、寄生组合继承 数组去重的 6 种方法 1. map:(push indexOf)把每个元素通过函数传递到当前匹配集 合中，生成包含返回值的新的 jQuery 对象 2. indexOf(push)搜索数组中的元素，并返回它所在的位置。 3. splice 对数组进行删除、插入、替换，是最强大的数组方法。 改变原数组 4. push(数组去重一一对比)添加到数组末尾 JS 异步加载的三种实现方式 (1) (2) defer，只支持 IE defer 属性的定义和用法 defer 属性规定是否对脚本执行进行延迟，直到页面加载为止。 async： async 的定义和用法(是 HTML5 的属性) async 属性规定一旦脚本可用，则会异步执行。 (3) 创建 script，插入到 DOM 中，加载完毕后 callBack 1.vue 的虚拟 dom？ 虚拟的 DOM 的核心思想是：对复杂的文档 DOM 结构，提供一种方便的 工具，进行最小化地 DOM 操作。 2.如何理解 vue 中 MVVM 模式？ MVVM 全称是 Model-View-ViewModel；vue 是以数据为驱动的，一旦 创建 dom 和数据就保持同步，每当数据发生变化时，dom 也会变化。 DOMListeners 和 DataBindings 是实现双向绑定的关键。DOMListene rs 监听页面所有 View 层 DOM 元素的变化，当发生变化，Model 层的 数据随之变化；DataBindings 监听 Model 层的数据，当数据发生变 化，View 层的 DOM 元素随之变化。
    3.vue 中的作用？ 把切换出去的组件保留在缓存中，可以保留组件的状态或者避免重新 渲染。 5.组件之间的传值通信？ 父组件向子组件传值： 1）子组件在 props 中创建一个属性，用来接收父组件传过来 的值； 2）在父组件中注册子组件； 3）在子组件标签中添加子组件 props 中创建的属性； 4）把需要传给子组件的值赋给该属性 子组件向父组件传值： 1）子组件中需要以某种方式（如点击事件）的方法来触发 一个自定义的事件； 2）将需要传的值作为$emit 的第二个参数，该值将作为实 参传给响应事件的方法； 3）在父组件中注册子组件并在子组件标签上绑定自定义事 件的监听。 二. v-show 和 v-if 指令的共同点和不同点?  v-show 指令是通过修改元素的 displayCSS 属性让其显示或者隐 藏  v-if 指令是直接销毁和重建 DOM 达到让元素显示和隐藏的效果 指令 v-el 的作用是什么? 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标.可 以是 CSS 选择器，也可以是一个 HTMLElement 实例, vue 如何实现按需加载配合 webpack 设置 webpack 中提供了 require.ensure()来实现按需加载。以前引入路由 是通过 import 这样的方式引入，改为 const 定义的方式进行引入。 不进行页面按需加载引入方式：import home from '../../common/ home.vue'
    进行页面按需加载的引入方式：const home = r => require.ensur e( [], () => r (require('../../common/home.vue'))) 为什么使用 key？ 当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来 标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部 的内容。 父组件调用子组件方法 this.$refs.child.$emit('') // 方法 1 this.$refs.child.callMethod() // 方法 2 子组件调用父组件的方法可以使用 this.$emit()这个方法 原型链 JavaScript 中的对象，都有一个内置属性[[Prototype]]，指向这个对象的原型 对象。当查找一个属性或方法时，如果在当前对象中找不到定义，会继续在当前 对象的原型对象中查找；如果原型对象中依然没有找到，会继续在原型对象的原 型中查找（原型也是对象，也有它自己的原型）；如此继续，直到找到为止，或 者查找到最顶层的原型对象中也没有找到，就结束查找，返回 undefined。可以 看出，这个查找过程是一个链式的查找，每个对象都有一个到它自身原型对象的 链接，这些链接组成的整个链条就是原型链。拥有相同原型的多个对象，他们的 共同特征正是通过这种查找模式体现出来的。 input 和 textarea 的区别 是一个单行输入框，有 value 属性（value 属性指定初始值），但是它 不能自动换行；用来放置字数较少的单行文字内容