面试(前端)

1.介绍
2.项目经验
3.开发使用工具

4.通过什么方式调试代码

5.浏览器的基本调试方法
   F12打开控制台

6.html标签
    <html>
        <head></head>
    </html>

7.块级元素与行级元素的区别
    a,块级元素可以设置宽高。里面可以嵌套块级元素以及行内元素
    b,行内元素的宽高取决于内容,里面只可以内嵌行内元素


8.绝对定位与相对定位的区别
    a,绝对定位是相对于元素最近的已经定位的祖先元素,如果没有已经定位的祖先元素,那他的位置就是相对于最初的包含块。
    b,相对定位是相对于元素在文档中的初始位置,在使用的时候无论是否移动,元素还是会占据原来得到空间。


9.常用的CSS选择器
    a,id选择器
    b,class选择器


10.介绍CSS盒子模型
    盒子内容,边框,内边距,外边距


11.设计首页布局


12.页面怎么适应移动端
    使用响应式布局
    使用vh/vv搭配flex布局

13.css框架


14.页面性能提升的问题
    减少对dom的操作
    用ajax实现异步加载

15.前端与后端的通信用的是什么方式
    通过axios通信

16.get请求与post请求有什么区别
    get主要是用于获取数据,post用于提交数据

17.常见的http返回码有哪些


18.javascript的数据类型有哪些
    string boolean number undefind null       es6新增了symbol表示独一无二的值

19.原生js函数
    Array()  function() object() string() boolean() number()


20.对于字符串或数组的操作的常用方法
    splice() pop() push() reverse()


21.基本dom操作
    getElementById( )


22.单页面应用与多页面应用的区别
    单页面只需要加载一次,用js完成页面的布局和渲染,跳转只刷新局部资源
    多页面必须重复加载,需要整个页面资源刷新


23.单页面应用的好处
    有良好的交互性
    减轻服务器的压力


24.常用的前端js框架
    vue.js


25.为什么使用这些前端框架/前端框架能够帮助开发解决什么问题
    可以帮助程序员减少DOM操作,提高页面渲染的性能


26.对vuex的理解
    实现了组件全局状态管理的机制,通过创建一个集中的数据存储,达到了组件之间的数据共享的作用

27.闭包是什么?闭包的利弊?
    闭包是能够读取其他函数内部的函数
    优点:保护了私有变量,全局都可以使用局部变量,延长了变量的生命周期
    缺点:有可能造成内存泄漏

28.Vue怎么双向绑定?
    使用v-modle

29.let const var的区别

    var:var没有块的概念,定义的变量,可以跨块访问,但是不能跨函数访问
    let:let定义的变量,不能跨块访问,也不能跨函数访问
    const:const用来定义常量,使用时必须初始化,只能在块作用域里访问,而且不能修改

30.Vue的生命周期,分别做了什么?

    beforeCreate 创建前,获取不到DOM一般在实例外使用
    created:创建后,可以初始化一些属性值,再渲染成视图,可以存放异步操作
    beforeMount: 挂载前,挂载的根节点已经创建
    mounted:挂载后,初始化页面完成后对数据和DOM进行操作
    beforeUpdate:更新前,检测到数据更新,在DOM更新前执行
    updated:更新后,对数据更新做统一处理
    beforeDestroy:销毁前,要销毁VUE实例的时候,在销毁前执行
    destoryed:销毁后,销毁vue实例时执行

31.第一次页面加载会触发哪些钩子
    beforeCreate、created、beforeMount、mounted

32.作用域是什么?原型链是什么?
    作用域是针对变量的,先在自己的变量范围中查找,如果找不到,就会沿着作用域往上找。
    原型链是针对构造函数的,访问new出来的函数的某个属性,如果没有在new出来的函数中找到这个变量就会向上查找

33.请求数据应该写在哪个生命周期里?
    一般放在mounted里面,但是如果服务器渲染的时候不支持mounted那就放在created里

34.computed和watch的区别?
    computed支持缓存,相依赖的数据发生改变才会重新计算,属性值是一函数,函数返回值为属性的属性值
    watch不支持缓存,只要监听的数据变化就会触发相应操作,监听的数据必须是data中声明过或父组件传递过来的props中的数据,当数据变化时,触发监听器

35.逻辑运算符以及运算规则

|| 逻辑或    两边只要有一个是true,就返回true,否则返回false
&& 逻辑与    两边都是true,才返回true,否则返回false
! 逻辑非   用来取一个布尔值相反的值

36.防抖节流

防抖:所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。

节流:所谓节流,就是指连续触发事件但是在 n 秒中只执行一次函数。两种方式可以实现,分别是时间戳版和定时器版。

37.object的方法


Object.is() 是一种判断两个值是否相同的方法

Object.assign() 方法用于将所有可枚举的自身属性从一个或多个源对象复制到目标对象。

Object.entries() ES8的Object.entries是把对象转成键值对数组, [key, value] 对的数组。

Object.values() 方法返回给定对象自己的可枚举属性值的数组,其顺序与 for...in 循环提供的顺序相同。

Object.prototype.hasOwnProperty()返回一个布尔值,指示对象是否具有指定的属性作为它自己的属性。

Object.create()方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__。

38.ES6数组的常用方法

Array.from( ):将对象或字符串转成数组,注意得有length。

Array.of( ): 将一组值转换为数组。

values( ):对键值的遍历。

Map( ):是一组键值对的结构,具有极快的查找速度。

Set( ):Set和Map类似,也是一组key的集合,但不存储value。由于key不能重复,所以,在Set中,没有重复的key。

39.arguments 的对象是什么?

当我们不知道有多少个参数传进来的时候就用 arguments 来接收,是一个类似于数组的对象,他有length属性,可以arguments[ i ]来访问对象中的元素, 但是它不能用数组的一些方法。

40.this指向的问题(高频)

在全局的环境下this是指向window 的

普通函数调用直接调用中的this 会指向 window, 严格模式下this会指向 undefined,自执行函数 this 指向 window,定时器中的 this 指向 window

在对象里调用的this,指向调用函数的那个对象,

在构造函数以及类中的this,构造函数配合 new 使用, 而 new 关键字会将构造函数中的 this 指向实例化对象,所以构造函数中的 this 指向 当前实例化的对象

方法中的this谁调用就指向谁。

箭头函数没有自己的 this,箭头函数的this在定义的时候,会继承自外层第一个普通函数的this

41.闭包

闭包的概念就是:只有权利访问另一个函数作用域中的变量,一般就是函数包裹着函数。

闭包的原理:利用了函数作用域链的特性,一个函数内部定义的函数会将包含外部函数的活动对象添加到它的作用域链中,函数执行完毕,其执行作用域链销毁,
但因内部函数的作用域链仍然在引用这个活动对象,所以其活动对象不会被销毁,直到内部函数被烧毁后才被销毁

42.call、apply、bind封装与区别

都是来改变this指向和函数的调⽤,实际上call与apply的功能是相同的,只是两者的传参方式不一样

bind 传参后不会立即执行,而是返回一个改变了this指向的函数,这个函数可以继续传参,且执行,需要类似于bind()()两个括号才能调⽤。

43.window的onload事件

当一个资源及其依赖资源已完成加载时,将触发onload事件。

44.setTimeout与setInterval区别与机制

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式

setInterval()则可以在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除。

45.js延迟加载的方式

a.把JS放在页面的最底部

b.script标签的defer属性:脚本会立即下载但延迟到整个页面加载完毕再执行

c.动态创建script标签,监听dom加载完毕再引入js文件

46.服务端渲染

服务端渲染的模式下,当用户第一次请求页面时,由服务器把需要的组件或
页面渲染成 HTML 字符串,然后把它返回给客户端。客户端拿到手的,是可
以直接渲染然后呈现给用户的 HTML 内容,不需要为了生成 DOM 内容自己
再去跑一遍 JS 代码,有了服务端渲染,当请求用户页面时,返回的body里
已经有了首屏的html结构,之后结合css显示出来。

47.DOM文档对象模型

DOM是 document 用来表示文档中对象的标准模型,他是由节点和对象组成的结构集合。在浏览器解析HTML标签时,会构建一个DOM树结构。

48.常用的api

offset系列 经常用于获得元素位置 offsetLeft offsetTop

client经常用于获取元素大小 clientWidth clientHeight 

scroll 经常用于获取滚动距离 scrollTop scrollLeft

49.箭头函数

a.箭头函数是匿名函数不能作为构造函数,不能使用new

b.箭头函数不绑定arguments,取而代之用rest参数…解决

c. this指向不同,箭头函数的this在定义的时候继承自外层第一个普通函数的this

d.箭头函数通过call()或apply()调用一个函数,只传入了一个参数,对this并没有影响.

e. 箭头函数没有prototype(原型),所以箭头函数本身没有this

f.箭头函数不能当做Generator函数,不能使用yield关键字

g.写法不同,箭头函数把function省略掉了 ()=> 也可以吧return 省略调 写法更简洁

h.箭头函数不能通过call()、apply()、bind()方法直接修改它的this指向。

50.简述 let const var 的区别 以及使用场景

        1.var let 是用来声明变量的,而const是声明常量的 var

        

var声明的变量存在变量提升,即变量可以在声明之前调用,值为undefined 

一个变量可多次声明,后面的声明会覆盖前面的声明 ​ 

在函数中使用var声明变量的时候,该变量是局部的作用域只在函数内部,而如果在函数外部使用 var,该变量是全局的

        2.let

a.不存在变量提升,let声明变量前,该变量不能使用。就是 let 声明存在暂时性死区

b.let命令所在的代码块内有效,在块级作用域内有效,作用域只是在花括号里面

c.let不允许在相同作用域中重复声明,注意是相同作用域,不同作用域有重复声明不会报错

        3.const

a.const声明一个只读的常量,声明后,值就不能改变

b.let和const在同一作用域不允许重复声明变量const声明一个只读的常量。一旦声明,常量的值就不能改变,但对于对象和数据这种  引用类型,内存地址不能修改,可以修改里面的值。

c.let和const不存在变量提升,即它们所声明的变量一定要在声明后使用,否则报错

d.能用const的情况下尽量使用const,大多数情况使用let,避免使用var。 const > let > var const声明的好处,一让阅读代码的人知道该变量不可修改,二是防止在修改代码的过程中无意中修改了该变量导致报错,减少bug的产生

51.map和forEach的区别

相同点

都是循环遍历数组中的每一项 forEach和map方法里每次执行匿名函数都支持3个参数,参数分别是item(当前每一项)、index(索引值)、arr(原数组),需要用哪个的时候就写哪个 匿名函数中的this都是指向window 只能遍历数组

注意:forEach对于空数组是不会调用回调函数的。


不同点

map方法返回一个新的数组,数组中的元素为原始数组调用函数处理后的值。(原数组进行处理之后对应的一个新的数组。) map()方法不会改变原始数组 map()方法不会对空数组进行检测 forEach()方法用于调用数组的每个元素,将元素传给回调函数.(没有return,返回值是undefined)

52.promise的解释

1、Promise 是异步编程的一种解决方案,主要用于异步计算,支持链式调用,可以解决回调地狱 的问题,自己身上有all、reject、resolve、race 等方法,原型上有then、catch等方法。

2、可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果,可以在对象之间传递和操作 promise,帮助我们处理队列

3、promise 有三个状态:pending[待定]初始状态,fulfilled[实现]操作成功,rejected[被否决]操作失败

4、Promise 对象状态改变:从pending变为fulfilled和从pending变为rejected。只要这两种情况发生,状态就凝固了,不会再变了

5、如果不设置回调函数,Promise内部抛出的错误,不会反应到外部,但是写了then 和 catch ,会被then的第二个参数 或 catch所捕获

53.promise 的 then 为什么可以支持链式调用

promise 的then会返回一个新的 promise 对象,能保证 then 方 可以进行链式调用

54.解构赋值

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构赋值

常见的几种方式有

1.默认值

2.交换变量

3.将剩余数组赋给一个变量

结构数组和对象字符串区别

对象的解构与数组类似,但有所不同。数组的元素是按次序排列的,变量的取值由它的位置决定;

而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。字符串也是可以解构赋值的。字符串被转换成了一个类似数组的对象

55. for...in 迭代和 for...of 有什么区别

1、 推荐在循环对象属性的时候,使用 for...in,在遍历数组的时候的时候使用for...of。

2、 for in遍历的是数组的索引,而for of遍历的是数组元素值

3、for...of 不能循环普通的对象,需要通过和 Object.keys()搭配使用

4、for...in 遍历顺序以数字为先 无法遍历 symbol 属性 可以遍历到公有中可枚举的

5、从遍历对象的角度来说,for···in会遍历出来的为对象的key,但for···of会直接报错。

56.js构造函数的静态成员和实例成员

js的构造函数上可以添加一些成员,可以在构造函数内部的this上添加,可以在构造函数本身上添加,通过这两种方式添加的成员,就分别称为实例成员和静态成员

实例成员:构造函数中this上添加的成员 静态成员:构造函数本身上添加的成员

实例成员,只能由实例化的对象来访问 静态成员,只能由构造函数本身来访问 实例化对象的proto指向构造函数的prototype属性指向的对象,实例化的对象可以访问到它后者身上的成员

57.构造函数生成实例的执行过程:使用面向对象编程时,new关键字做了什么?

新建了一个Object对象

修改构造函数this的指向,是其指向新建的Object对象,并且执行构造函数

为Object对象添加了一个proto属性,是其指向构造函数的prototype属性

将这个Object对象返回出去

58.set和map数据结构有哪些常用的属性和方法

set数据的特点是数据是唯一的

const set1 = new Set()
 
增加元素 使用 add
set2.add(4)
 
是否含有某个元素 使用 has
console.log(set2.has(2)) 
 
查看长度 使用 size
console.log(set2.size) 
 
删除元素 使用 delete
set2.delete(2)
 
size: 返回Set实例的成员总数。
add(value):添加某个值,返回 Set 结构本身。
delete(value):删除某个值。
clear():清除所有成员,没有返回值。

Set的不重复性

传入的数组中有重复项,会自动去重
const set2 = new Set([1, 2, '123', 3, 3, '123'])
 
Set`的不重复性中,要注意`引用数据类型和NaN
两个对象都是不用的指针,所以没法去重
const set1 = new Set([1, {name: '孙志豪'}, 2, {name: '孙志豪'}])
 
如果是两个对象是同一指针,则能去重
const obj = {name: '我们一样'}
const set2 = new Set([1, obj, 2, obj])
 
NaN !== NaN,NaN是自身不等于自身的,但是在Set中他还是会被去重
const set = new Set([1, NaN, 1, NaN])

Map`对比`object`最大的好处就是,key不受`类型限制

 
定义map
const map1 = new Map()
 
新增键值对 使用 set(key, value)
map1.set(true, 1)
 
判断map是否含有某个key 使用 has(key)
console.log(map1.has('哈哈')) 
 
获取map中某个key对应的value
console.log(map1.get(true)) 
 
删除map中某个键值对 使用 delete(key)
map1.delete('哈哈')
 
 
定义map,也可传入键值对数组集合
const map2 = new Map([[true, 1], [1, 2], ['哈哈', '嘻嘻嘻']])
console.log(map2) // Map(3) { true => 1, 1 => 2, '哈哈' => '嘻嘻嘻' }

59.Object.assign

Object.assign可以实现对象的合并。它的语法是这样的: Object.assign(target, ...sources)

60.Vue底层实现原理

vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter和getter,在数据变动时发布消息给订阅者

61.为什么要用虚拟DOM来描述真实的DOM呢?

创建真实DOM成本比较高,如果用 js对象来描述一个dom节点,成本比较低,另外我们在频繁操作dom是一种比较大的开销。

62.响应式原理

vue响应式原理指当数据改变后,Vue 会通知到使用该数据的代码。

63.Object.defineProperty怎么用, 三个参数?,有什么作用啊?

 Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。
     Object.defineProperty(obj, prop, {})
     obj:需要定义属性的对象
     prop:需要定义的属性
     {}:要定义或修改的属性描述符。

64.为什么要用 this.$set 呢? this.$set是干什么的?

当你发现你给对象加了一个属性,在控制台能打印出来,但是却没有更新到视图上时,也许这个时候就需要用到this.$set()这个方法

向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新

65.Vue.set 和 this.$set 有什么区别 ?

 Vue.set( ) 是将 set 函数绑定在 Vue 构造函数上,this.$set() 是将 set 函数绑定在 Vue原型上。

66.vue双向数据绑定原理?

是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调从而达到数据和视图同步。

67.vue.js的两个核心是什么

灵活的组件应用,高效的数据绑定

68.一般在哪个生命周期请求异步数据

钩子函数中的 created、beforeMount、mounted 中进行调用,因为在这三个钩子函数中,data 已经创建,可以将服务端端返回的数据进行赋值。

在created中最好能更快获取到服务端数据,减少页面加载时间,用户体验更好

mounted 在请求完数据之后需要对 dom 进行操作的时候可以用到

69.vue中 methods,computed, watch 的区别

computed 是vue中的计算属性,具有缓存性,当他的依赖于值,发生改变的时候才会重新调用

methods 是没有缓存的,只要调用,就会执行,一般结合事件来使用

watch 没有缓存性 监听data中的属性 属性值只要发生变化就会执行 可以利用他的特性做一些异步的操作

70.created和mounted区别?

created:dom渲染前调用,即通常初始化某些属性值

mounted:在dom渲染后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作

71.生命周期钩子是如何实现的

Vue 的生命周期钩子核心实现是利用发布订阅模式先把用户传入的的生命周期钩子订阅好(内部采用数组的方式存储)然后在创建组件实例的过程中会一次执行对应的钩子方法(发布)

71.vuex是什么, state,getters,mutations,actions,modules的用途和用法

vuex是一个状态管理工具,所谓状态的是就是数据,采用集中式存储管所有组件的状态,是为了结局中大型项目一个数据共享的问题。vuex 他可以将数据保存到本地,数据是响应式的,能够保持数据页面的共享,提高开发效率。

state:vuex的基本数据,数据源存放地,用于定义共享的数据。

getter:从基本数据派生的数据,相当于state的计算属性

mutation:提交更新数据的方法,唯一 一个可以操作state 中数据的方法,必须是同步的,第一个参数是state,第二个参数是cmmi传过来的数据

action:action是用来做异步操作的,一般用来发请求,在 action 中写入函数,然后在页面中用dispatch调用,然后在 action 中通过commit 去调用 mutation 通过 mutation 去操作state。

modules:模块化vuex,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理

72.详述Vuex运行机制

Vuex提供数据(state),来驱动视图(这里指的是Vue组件),视图通过Dispatch派发Action,在Action中可以进一步做一些异步的操作(例如通过ajax请求后端的接口数据),然后通过Commit提交给Mutations,由Mutations去最终更改state

73.Vuex 页面刷新数据丢失怎么解决

需要做 vuex 数据持久化 一般使用本地存储的方案来保存数据 可以自己设计存储方案

74.vue-router(路由原理

75.vue路由的跳转方式有几种

1、<router-link to="需要跳转到页面的路径">

2、this.$router.push()跳转到指定的url,并在history中添加记录,点击回退返回到上一个页面

3、this.$router.replace()跳转到指定的url,但是history中不会添加记录,点击回退到上上个页面

4、this.$touter.go(n)向前或者后跳转n个页面,n可以是正数也可以是负数

76.怎么定义 vue-router 的动态路由? 怎么获取传过来的值

在 router 目录下的 index.js 文件中,对 path 属性加上 /:id,使用 route 对象的 params.id 获取

77.Vue-router共有几种模式?默认是那种?

有两种模式 hash和history模式 默认是hash

1、hash ——即地址栏 URL 中的#符号,它的特点在 于:hash 虽然出现 URL 中,但不会被包含在 HTTP 请求中,对后端完全没有影 响,因此改变 hash 不会重新加载页面。

2、history ——利用了 HTML5 History api 在浏览器中没有# 有浏览器兼容问题

history 模式下,前端的 URL 必须和实际向后端发起请求的 URL 一致,如 地址后加上/items/id。后端如果缺少对 /items/id 的路由处理,将返回 404 错误。

78.vue常用修饰以及常见指令

修饰符
.stop  阻止事件冒泡
.cpture 设置事件捕获
.self  只有当事件作用在元素本身才会触发
.prevent 阻止默认事件,比如超链接跳转
.once 事件只能触发一次
.native 触发js原生的事件
.number 把文本框的内容转换为数字
.trim  去除文本框左右空格


常见指令
⑴v-bind:给元素绑定属性
⑵v-on:给元素绑定事件
⑶v-html:给元素绑定数据,且该指令可以解析 html 标签
⑷v-text:给元素绑定数据,不解析标签
⑸v-model:数据双向绑定
⑹v-for:遍历数组
⑺v-if:条件渲染指令,动态在 DOM 内添加或删除 DOM 元素
⑻v-else:条件渲染指令,必须跟 v-if 成对使用
⑼v-else-if:判断多层条件,必须跟 v-if 成对使用
⑽v-cloak:解决插值闪烁问题
⑾v-once:只渲染元素或组件一次
⑿v-pre:跳过这个元素以及子元素的编译过程,以此来加快整个项目的编译速度
⒀v-show:条件渲染指令,将不符合条件的数据隐藏(display:none)

79.v-for 与 v-if 的优先级

v-for 比 v-if 优先,如果每一次都需要遍历整个数组,将会影响速度,尤其是当之需要渲染很小一部分的时候。

80.vue 初始化页面闪动问题。

能够解决插值表达式闪烁问题,需要在style中设置样式[v-clock]{display:none}

90.v-if和v-show的区别及使用场景?

v-if 动态的创建或者销毁元素,为true的时候为显示,为false的时候不显示,要使用v-else必须和v-if紧挨着

v-show 是控制元素的显示或者隐藏,在我们的标签上会看到有display:block,none

v-if 有更高的切换消耗,而 v-show 有更高的初始化渲染消耗,一般推荐频繁切换的时候使用 v-show 更好,当我们的判断分支比较多的时候,和首次渲染的时候 使用v-if

91.在vue.js中mixin和页面执行顺序问题

mixin中的代码先执行,单文件中的后执行。

mixin的beforeCreate > 父beforeCreate > mixin的created > 父created > mixin的beforeMount > 父beforeMount > 子beforeCreate > 子created > 子beforeMount > 子mounted > mixin的mounted >父mounted

92.vue的删除数组和原生删除数组的区别delete

删除数组

delete只是把数组元素的值变成empty/undefined,元素的键不变,数组长度不变。

Vue.delete直接删除数组,改变数组的键值和长度。

删除对象

两者相同,都会把键名(属性/字段)和键值删除。

93.通过 vuex 实现

具体实现:vuex 是一个状态管理工具,主要解决大中型复杂项目的数据共享问题,主要包括 state,actions,mutations,getters 和 modules 5 个要素

主要流程:组件通过 dispatch 到 actions,actions 是异步操作,再 actions中通过 commit 到 mutations,mutations 再通过逻辑操作改变 state,从而同步到组件,更新其数据状态

94.prop 验证,和默认值

props:会接收不同的数据类型,常用的数据类型的设置默认值的写法,Number, String, Boolean, Array, Function, Object

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级prop 的更新流动到子组件中,但是反过来则不行。这样防止子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。若果在子组件中直接修改prop传递的值,Vue会发出警告,

95.VUE组件中的data为什么是一个函数

Object是引用数据类型,如果不用function返回,每个组件的data都是内存的同一个地址,一个数据改变了其他也改变了,这就造成了数据污染。如果data是一个函数,每个实例的data都在闭包中,就不会各自影响了

96.组件特性及好处、组件的基本组成

(1) 特性:重用性、可指定性、互操作性、高内聚性、低耦合度

(2) 好处:组件可以扩展HTML元素、封装可重用代码

template 结构(html代码)

script行为

style样式

97.assets和static的区别?

assets中的文件会经过webpack打包,重新编译,推荐在assets存放js等需要打包编译的文件。

static中的文件,不会打包编译。static中的文件只是复制一遍。static中建议放一些外部第三方文件,自己的放assets里,别人的放static中。(图片推荐放在static里)

98.Vue data 中某一个属性的值发生改变后,视图会立即同步执行重新渲染吗?

不会立即同步执行重新渲染。Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化, Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。

如果同一个watcher被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后,在下一个的事件循环tick中,Vue 刷新队列并执行实际(已去重的)工作。

99.Vue.js 的特点

简洁:页面由 HTML 模板+Json 数据+Vue 实例组成 数据驱动:自动计算属性和追踪依赖的模板表达式

组件化:用可复用、解耦的组件来构造页面 
轻量:代码量小,不依赖其他库 
快速:精确有效批量 DOM 更新 
模板友好:可通过 npm,bower 等多种方式安装,很容易融入 Vue 的核心库只关注视图层,并且非常容易学习

100.请说出 vue.cli 项目中 src 目录每个文件夹和文件的用法

assets 文件夹是放静态资源;

components 是放组件;

router 是定义路由相关的配置;

view 视图;

app.vue 是一个应用主组件;

main.js 是入口文件

101.Es6有class继承

首先利用class构造一个父类,然后利用extends与super实现子类继承

102.请描述一下你对webpack的理解?

Webpack Webpack 是一个项目打包工具

可以压缩代码和图片,把浏览器识别不了的代码转化为能识别的,可以启动一个热加载服务器

配置跨域、路径别名、打包分析、cdn映入、去掉console.log、单独打包第三方模块、ie兼容、eslint规范、图片压缩

103.什么是axios

基于promise的http库,可以用在浏览器和node.js,支持promiseAPI,客户端支持防御xsrf

104.Node是什么

Node是一个基于Chrome V8引擎的JavaScript代码运行环境。

105.模块化的意义

降低软件的复杂性。使其可控,可维护,可扩展。

106.Http和Https区别

1.`HTTP` 的URL 以http:// 开头,而HTTPS 的URL 以https:// 开头
2.`HTTP` 是不安全的,而 HTTPS 是安全的
3.`HTTP` 标准端口是80 ,而 HTTPS 的标准端口是443
4.`在OSI` 网络模型中,HTTP工作于应用层,而HTTPS 的安全传输机制工作在传输层
5.`HTTP` 无法加密,而HTTPS 对传输的数据进行加密,证的网络协议,安全性高于HTTP协议。
6.`HTTP`无需证书,而HTTPS 需要CA机构wosign的颁发的SSL证书,一般免费证书少,因而需要一定费用。https:// 开头

107.GET和POST区别

1.GET在浏览器回退不会再次请求,POST会再次提交请求
2.GET请求会被浏览器主动缓存,POST不会,要手动设置
3.GET请求参数会被完整保留在浏览器历史记录里,POST中的参数不会
4.GET请求在URL中传送的参数是有长度限制的,而POST没有限制
5.GET参数通过URL传递,POST放在Request body中
6.GET参数暴露在地址栏不安全,POST放在报文内部更安全
7.GET一般用于查询信息,POST一般用于提交某种信息进行某些修改操作
8.GET产生一个TCP数据包;POST产生两个TCP数据包
Ge和post的选择:
1.私密性的信息请求使用post(如注册、登陆)。
2.查询信息使用get。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值