1.vue生命周期有哪些,在每个生命周期都做什么事情?
vue实例从创建到销毁的整个过程,总共有8个生命钩子函数
- beforecreate创建之前的状态,初始化事件和生命周期,里面可以加载一些页面渲染前出现的内容
- created创建完成之后,此时存在data属性,但是没有el元素,可以在这个生命周期函数内进行数据和资源的加载
- beforeMount挂在之前,先判断有没有el元素,如果没有可以通过手动调用$mount这个方法进行手动挂载,这个生命周期基本上不常用
- mounted挂在完成之后,先看看有没有template模板,如果有,就渲染,如果没有,就渲染外层的html,在这个生命钩子函数里面可以进行DOM元素的一些操作
- 当页面发生数据更新的时候,会触发beforeupdate和updated这两个生命钩子函数,但是在beforeupdate里面可以监听到数据的变化,但是页面没有发生变化,在updated里面才实现页面的变化
- 如果要销毁这个组件,调用$destroy这个方法销毁组件,destroyed 可以执行一些优化操作,清空定时器,解除绑定事件
2.watch和computed的区别?
watch是监听属性,里面可以传两个参数,一个新值和旧值,里面可以做一些异步的操作
computed是计算属性,有缓存机制,只有依赖的数据发生改变才会重新计算,computed里面不能进行异步操作
3.组件之间的通讯?
父组件给子组件传值:在父组件里面的子组件的标签上面自定义一个变量,在子组件中通过props属性来接收,props是一个数组,也可以是一个对象,第一个参数为数据的类型 第二个参数为默认值(default)是否必填项(required)自定义验证函数(validator)
子组件给父组件传值,需要通过事件来触发,在子组件中定义一个事件,通过$emit(函数名,数据)传递参数,在父组件里面定义这个自定义事件,就可以接受到子组件传过来的参数
兄弟之间的传值:需要定义一个公共的实例文件,然后通过on响应事件并接受参数
4.v-if和v-show的区别?
都是用来控制元素的显示和隐藏,在控制元素隐藏的时候v-if采用的是惰性加载,不加载这个DOM节点,而v-show则采用的是利用display来控制元素的隐藏
如果需要频繁的切换元素的显示和隐藏就用v-show
如果通过条件判断来控制元素的显示和隐藏的时候使用v-if
5.key值得作用?
当使用v-for采用循环的dom节点的时候,采用的是‘就地复用的元素’,所以我们需要为每一个元素绑定一个唯一值来区分,提高虚拟dom的渲染速率
6.vuex的使用流程?
先使用npm i vuex 来安装
创建一个store文件夹,在里面创建一个index文件,然后将文件引入到main.js文件中,vue.use(vuex)
vuex有5个模块,分别是state,mutations,getters,actions,module
1.在vue组件里面,通过dispatch来触发actions提交修改数据的操作。 this.$store.dispatch()
2.然后再通过actions的commit来触发mutations来修改数据。this.$store.commit()
3.mutations接收到commit的请求,就会自动通过Mutate来修改state(数据中心里面的数据状态)里面的数据。
4.最后由store触发每一个调用它的组件的更新
可以通过this.store.state直接调用里面的数据,通过this.store.commit()调用mutations里面的方法
getters相当于vue中的计算属性,通过this.$store.getters.xx来调用,
module可以在每个模块中定义自己的仓库
使用场景:音乐播放,加入购物车
7.vue中的修饰符?
stop阻止冒泡, prevent阻止事件的默认行为, once只触发一次 , self 只在自己身上触发 capture 触发捕获事件 .lazy失去焦点或回车才更新 .number转成number类型 .trim 过滤首尾空格
8.vue-router模块?
有router-view 用来显示视图 router-link 用来实现路由跳转
9.动态路由的跳转和编程式导航的跳转?
动态路由跳转: 在路由文件中先配置path路径,在后面写:id ,然后通过params.id来接收参数
编程式导航的方式进行跳转,通过 this.route.params.id 获取传过来的参数 this.route.query.id
10.params和query获取参数的方法有什么区别?
- query需要path来引入,params需要name来引入
- query类似于ajax中的get,params则类似于post
- query刷新不会丢失query里面的数据,params刷新会丢失params里面的数据
11.axios是什么?
请求后台数据的模块。
使用方法:先npm i axios,然后将其挂载到vue原型上面,如果请求的地址有跨域,需要先在config/index.js中进行配置,然后使用.get和.post方法,请求成功将在then中返回数据,失败的话在catch里面
12、自定义指令(v-check、v-focus)的方法有哪些?它有哪些钩子函数?还有哪些钩子函数参数?
全局定义指令:在vue对象的directive方法里面有两个参数,一个是指令名称,另外一个是函数。组件内定义指令:directives
钩子函数:bind(绑定事件触发)、inserted(节点插入的时候触发)、update(组件内相关更新)
钩子函数参数:el、binding
13.vue实现双向数据绑定的原理?
vue实现双向数据绑定的原理是采用数据劫持结合发布者-订阅者模式,通过Object.defineProperty()来劫持各个属性的getter和setter方法,在数据发生变化的时候发布消息给订阅者,触发相对应的回调函数。
需要observe的数据对象进行递归遍历
compile解析模板指令
Watcher订阅者是Observe和compile之间通信的桥梁
MVVM作为数据绑定的入口,整合Observe、compile、Watcher三者,通过Observer 来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据model变更的双向绑定效果。
14. 的作用是什么?
15.methods、computed、watch三者的区别?
methods是个方法,执行的时候需要事件进行触发
computed是一个计算属性,是实时响应的,只要data中的属性发生了变化那么就会触发computed,计算属 性是基于属性的依赖进行缓存的,methods调用的时候需要加(),而computed调用的时候是不需要加()
watch属性监听,watch用来监听属性的变化,当值发生变化的时候来执行特定的函数,watch监听属性的时候 会有2个参数newVal和oldVal一个新值一个旧值
16.vue中的过滤器如何使用?
Vue.filter()
参数1:过滤器名称
参数2:过滤器实现的方法 该方法中有2个参数 参数1为需要过滤的数据,参数2为过滤器传递的参数
使用场景:日期的过滤.....
17.为什么在组件内部data是一个函数而不是一个对象?
因为每次调用组件的时候都会重新生成一个对象,如果是一个对象的情况下,data数据会进行复用(因为对象是引 用数据类型),而当data是一个函数的时候每次调用的时候就会返回一个新的对象
18.如何实现路由解耦?
在路由的配置项中设置props:true 在需要接受组件的内部通过props进行接受
19.什么是路由守卫?路由的钩子函数有哪些?分别说出使用的场景,及用法?
1、什么是路由守卫? 路由跳转前后做的一些验证
2、路由常见的钩子函数 berforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
使用的场景: beforeRouteEnter:当路由进入之前:登陆验证、热力图的记录、
beforeRouteUpdate:当路由进行更新的时候。如果当前路由发生了变化,但是不需要组件的创建销毁的过程的 时候,就需要用到这个钩子函数
beforeRouterLeave:当路由离开的时候、当用户没有进行支付离开的时候、当用户填写完信息没有保存的时候
20.使用vue的时候会一下子加载所有的东西使得初始化页面很卡,该如何解决? vue-router解决首次加载缓慢的问题。懒加载简单来说就是按需加载?
像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时, 需要加载的内容过多,时间过长,会出现长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载 则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时。
用法:在配置路由时使用:component:resolve=>require([“@components/路由的路径”],resolve)。 就是用了懒加载后打完包直接运行那个index.html会报错,报文件引用错误其实是打包时候路径配置有点问 题,找到build下面的webpack.prod.conf.js 添加 publicPath:"./",
21.vm.$nextTick( [callback] )是什么?
将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。
22.vue2.0和vue3.0有什么区别?
- 默认进行懒观察:在 2.x 版本里,不管数据多大,都会在一开始就为其创建观察者。当数据很大时,这可能会在页面载入时造成明显的性能压力。3.x 版本,只会对「被用于渲染初始可见部分的数据」创建观察者,而且 3.x 的观察者更高效。
- 3.0中加入了typescript
- 创建项目的时候不一样:2.0 vue init webpack , 3.0 vue create
- 启动项目: 2.0 npm run dev 3.0 npm run serve
- 文件结构不一样:移除了配置文件,移除了static文件,新增了public文件夹
23.get请求和post请求有什么区别?
- 传参的时候,get将参数拼接到url后面,而post将参数放到请求体中
- get有大小限制(大约10KB),post没有大小限制
- post请求相对安全
- get有缓存,post没有缓存
24.为什么说get请求不安全?
Get是不安全的,因为在传输过程,数据被放在请求的URL中,而如今现有的很多服务器、代理服务器或者用户代理都会将请求URL记录到日志文件中,然后放在某个地方,这样就可能会有一些隐私的信息被第三方看到。另外,用户也可以在浏览器上直接看到提交的数据,一些系统内部消息将会一同显示在用户面前。
25.浅拷贝和深拷贝?
浅拷贝:如果拷贝的对象是基本数据类型,则拷贝的值就是基本数据类型的值,如果是复杂类型的值,则拷贝的就是内存地址,因此对于基本数据类型,修改一个,不会影响其他的值,对于复杂类型,改变一个,对其他的也有改变
深拷贝:深拷贝会拷贝所有的属性,并拷贝属性指向的动态分配的内存。当对象和它所引用的对象一起拷贝时即发生深拷贝。可以利用递归和浅拷贝来实现深拷贝,也可以利用jquery中的extend()这个方法,第一个参数表示是否深拷贝
26.基本数据类型和复杂数据类型有什么区别?
基本数据类型把数据名和值直接存储在栈当中
复杂类型在栈中存储数据名和一个堆的地址,在堆中存储属性和值,访问时先在栈中获取地址,在拿到堆中的值。
27.清除浮动的方法?
- 在最后一个浮动元素的后面添加一个空标签,加上clear:both这个属性
- 在父级元素上面加上overflow:hidden
- 使用after伪元素来清除浮动
- 使用before和after双伪元素清除浮动
28.移动端适配问题?
弹性布局:利用display:flex布局来实现
自适应布局:页面中的元素在不同的屏幕下元素的位置会变化而大小不会变化
流式布局:页面元素的宽度按照屏幕进行适配调整
响应式布局:
通过媒体查询,可以设置在不同的屏幕大小中设置不同的样式,css3中引入了rem的单位,rem是相对于根标签的字体大小
29.let,var,const的区别?
- var声明的变量会挂载在window上,而let和const声明的变量不会
- var声明变量存在变量提升,let和const不存在变量提升
- let和const声明形成块作用域
- 同一作用域下let和const不能声明同名变量,而var可以
- const声明了必须赋值,声明后不能修改
30.箭头函数与普通函数的区别?
箭头函数是匿名函数,不能作为构造函数,不能使用new
箭头函数不绑定arguments,取而代之用rest参数...解决
箭头函数不绑定this,会捕获其所在的上下文的this值,作为自己的this值
当只有一个参数时可以省略括号,当只有一条返回语句时,可以省略return和大括号
31.在地址栏里输入一个URL,到这个页面呈现出来,中间会发生什么?
输入url后,首先需要找到这个url域名的服务器ip,为了寻找这个ip,浏览器首先会寻找缓存,查看缓存中是否有记录。
缓存的查找记录为:浏览器缓存>系统缓存>路由器缓存,缓存中没有则查找系统的hosts文件中是否有记录,如果没有则查询DNS服务器。
得到服务器的ip地址后,浏览器根据这个ip以及相应的端口号,构造一个http请求,这个请求报文会包括这次请求的信息,主要是请求方法,请求说明和请求附带的数据,并将这个http请求封装在一个tcp包中,这个tcp包会依次经过传输层,网络层,数据链路层,物理层到达服务器,服务器解析这个请求来作出响应。
返回相应的html给浏览器,因为html是一个树形结构,浏览器根据这个html来构建DOM树,在dom树的构建过程中如果遇到JS脚本和外部JS连接,则会停止构建DOM树来执行和下载相应的代码,这会造成阻塞,这就是为什么推荐JS代码应该放在html代码的后面。
32.浏览器常见的兼容性问题?
块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大
解决方法:在float的标签样式控制中加入 display:inline;将其转化为行内属性
b.当标签的高度设置小于10px,在IE6、IE7中会超出自己设置的高度
解决方案:超出高度的标签设置overflow:hidden,或者设置line-height的值小于你的设置高度
c.图片默认有间距
解决方案:使用float 为img 布局
d.阻止事件冒泡,阻止事件默认行为
解决方案:冒泡 ev.stopPropagation() ev.cancelBubble = true
默认事件 e.preventDefault() ev.returnValue = false
33.判断数据类型的方法?
typeof() Number,String,Boolean,Function,undefined,如果想判断这几种类型,那就可以使用typeof。其他数据类型不能使用这个方法
使用Object.prototype.toString.call()的方式来判断一个变量的类型是最准确的方法
instanceof运算符需要指定一个构造函数,或者说指定一个特定的类型,它用来判断这个构造函数的原型是否在给定对象的原型链上。Number,String,Boolean没有检测出他们的类型,还需要注意null和undefined都返回了false,这是因为它们的类型就是自己本身,并不是Object创建出来它们,所以返回了false。
34.什么是原型和原型链?
原型:每创建一个函数,都会有一个prototype属性,而这个属性就是该函数的原型,而每当new一个对象的时候,该对象上面就会有一个proto这个属性,这个属性会指向该对象的原型上面
原型链:是一种查找机制,访问一个对象的属性时,先在基本属性中查找,如果没有,再沿着proto这条链向上找,当查到 Object.prototype 就可以停止查找了
Object.prototype.proto 的值为 null 跟 Object.prototype 没有原型,其实表达了一个意思
35.什么是BFC?
BFC 全称为 块格式化上下文,它是一个独立渲染区域,里面的元素不会影响外面的元素,
布局规则:
内部的Box会在垂直方向,一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
每个盒子(块盒与行盒)的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时,浮动元素也参与计算。
如何创建BFC:
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible
作用:
1.可以解决外边合并的问题
2.可以清楚浮动
3.自适应两栏布局
36.如何使用git?
先下载git,然后安装
三个区:
工作区(working diretory) 用于修改文件
缓存区(stage) 是用来暂时存放工作区中修改的内容
提交历史(commit history) 提交代码的历史记录
常用的命令:
- 远程仓库相关命令
检出仓库:$ git clone git://github.com/jquery/jquery.git
查看远程仓库:$ git remote -v
添加远程仓库:$ git remote add [name] [url]
删除远程仓库:$ git remote rm [name]
修改远程仓库:$ git remote set-url --push [name] [newUrl]
拉取远程仓库:$ git pull [remoteName] [localBranchName]
推送远程仓库:$ git push [remoteName] [localBranchName]
*如果想把本地的某个分支test提交到远程仓库,并作为远程仓库的master分支,或者作为另外一个名叫test的分支,如下:
$git push origin test:master // 提交本地test分支作为远程的master分支
$git push origin test:test // 提交本地test分支作为远程的test分支
2)分支(branch)操作相关命令
查看本地分支:$ git branch
查看远程分支:$ git branch -r
创建本地分支:$ git branch [name] ----注意新分支创建后不会自动切换为当前分支
切换分支:$ git checkout [name]
创建新分支并立即切换到新分支:$ git checkout -b [name]
删除分支:$ git branch -d [name] ---- -d选项只能删除已经参与了合并的分支,对于未有合并的分支是无法删除的。如果想强制删除一个分支,可以使用-D选项
合并分支:$ git merge [name] ----将名称为[name]的分支与当前分支合并
创建远程分支(本地分支push到远程):$ git push origin [name]
删除远程分支: gitpush origin :[name]
*创建空的分支:(执行命令之前记得先提交你当前分支的修改,否则会被强制删干净没得后悔)
$git symbolic-ref HEAD refs/heads/[name]
$rm .git/index
$git clean -fdx
主要的几个命令
git add # 将工作区的修改提交到暂存区
git commit # 将暂存区的修改提交到当前分支
git reset # 回退到某一个版本
git stash # 保存某次修改
git pull # 从远程更新代码
git push # 将本地代码更新到远程分支上
git reflog # 查看历史命令
git status # 查看当前仓库的状态
git diff # 查看修改
git log # 查看提交历史
git revert # 回退某个修改
37.Promise的实现原理?
- Promise本身是一个状态机,每一个Promise实例只能有三个状态,pending、fulfilled、reject,状态之间可的转化只能是pending->fulfilled、pending->reject,状态变化不逆。
- Promise有一个then方法,该方法可以被调用多次,并且返回一个Promise对象(返回新的Promise还是老的Promise对象,规范没有提)。
- 支持链式调用。
- 内部保存有一个value值,用来保存上次执行的结果值,如果报错,则保存的是异常信息。
38.为什么要使用vuex而不将数据存储在本地存储中?
我们都知道在vuex中的数据,页面一刷新数据就会消失,所以我们要配合本地存储来使用。
localStorage可以代替vuex,对于不变的数据确实可以,但是当两个组件共同用以数据源,如果其中一个组件中的数据源改变,希望另一个组件响应变化,这时候就要选择用vuex。vuex是vue的状态管理机制,是方便组件之间通信的。一个组件的数据变化是会映射到使用这个数据的其他组件。而localStorage是本地存储,是将数据存储到浏览器的方法,一般在跨页面时使用。
39.什么是回流,什么是重绘,有什么区别?
什么是回流
当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流,就是在页面第一次加载的时候,这时候是一定会发生回流的,因为要构建render tree。在回流的时候,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分渲染树,完成回流后,浏览器会重新绘制受影响的部分到屏幕中,该过程成为重绘。
什么是重绘
当render tree中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的,比如background-color。则就叫称为重绘。
区别:
他们的区别很大:
回流必将引起重绘,而重绘不一定会引起回流。比如:只有颜色改变的时候就只会发生重绘而不会引起回流
当页面布局和几何属性改变时就需要回流
比如:添加或者删除可见的DOM元素,元素位置改变,元素尺寸改变——边距、填充、边框、宽度和高度,内容改变
40.vue单页面应用怎么优化?
- 提取公共方法,减少js代码量 提取公共组件,减少html代码,较少每个页面中重复的方法
- vue-router路由全部改成懒加载路由,该页面被点开时才加载该页面.vue组件,提高首页加载速度。
- 将所以v-show替换成v-if,v-if如果不为真就不会加载这段代码,而v-show还是会加载这些代码,这样加 快了页面加载速度。
- 对每个页面vuex进行优化,提到全局方法,减少大量重复代码
41.ajax的请求的五个步骤?
- 创建XMLHttpRequest异步对象
var xhr = new XMLHttpRequest()
- 设置回调函数
xhr.onreadystatechange = callback
- 使用open方法与服务器建立连接
// get 方式 xhr.open("get", "test.php", true) // post 方式发送数据 需要设置请求头 xhr.open("post", "test.php", true) xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
- 向服务器发送数据
// get 不需要传递参数 xhr.send(null) // post 需要传递参数 xhr.send("name=jay&age=18")
- 在回调函数中针对不同的响应状态进行处理
function callback() { // 判断异步对象的状态 if(xhr.readyState == 4) { // 判断交互是否成功 if(xhr.status == 200) { // 获取服务器响应的数据 var res = xhr.responseText // 解析数据 res = JSON.parse(res) } } }
(1)创建XMLHttpRequest
对象,也就是创建一个异步调用对象. (2)创建一个新的HTTP
请求,并指定该HTTP
请求的方法、URL
及验证信息. (3)设置响应HTTP
请求状态变化的函数. (4)发送HTTP
请求. (5)获取异步调用返回的数据. (6)使用JavaScript和DOM实现局部刷新.
42.open中的参数有哪些?
- method:请求的类型;GET 或 POST
- url:文件在服务器上的位置,相对位置或绝对位置
- async:true(异步)或 false(同步)
43.同步和异步?
同步:可以理解为在执行完一个函数或方法之后,一直等待系统返回值或消息,这时程序是出于阻塞的,只有接收到返回的值或消息 后才往下执行其他的命令。
异步:执行完函数或方法后,不必阻塞性地等待返回值或消息,只需要向系统委托一个异步过程,那么当系统接收到返回值或消息时,系统会自动触发委托的异步过程,从而完成一个完整的流程。
44.什么是闭包,闭包的优点和缺点?
闭包:能访问其他函数内部变量的函数。
优点:避免全局变量的污染,闭包所使用的变量不会被垃圾回收机制回收,
缺点:会浪费内存,使用不当会造成内存泄露。
45.jquery的好处?
轻量级,只有几十k
强大的选择器
出色的dom封装
可靠的事件处理机制
完善的ajax
链式操作
丰富的插件支持
46.javascript的事件循环机制?
JavaScript 引擎是单线程
JavaScript 引擎是单线程,也就是说每次只能执行一项任务,其他任务都得按照顺序排队等待被执行,只有当前的任务执行完成之后才会往下执行下一个任务。
HTML5 中提出了 Web-Worker API,主要是为了解决页面阻塞问题,但是并没有改变 JavaScript 是单线程的本质。了解 Web-Worker。
JavaScript 事件循环机制
JavaScript 事件循环机制分为浏览器和 Node 事件循环机制,两者的实现技术不一样,浏览器 Event Loop 是 HTML 中定义的规范,Node Event Loop 是由 libuv 库实现。这里主要讲的是浏览器部分。
Javascript 有一个 main thread 主线程和 call-stack 调用栈(执行栈),所有的任务都会被放到调用栈等待主线程执行。
- JS 调用栈
JS 调用栈是一种后进先出的数据结构。当函数被调用时,会被添加到栈中的顶部,执行完成之后就从栈顶部移出该函数,直到栈内被清空。
- 同步任务、异步任务
JavaScript 单线程中的任务分为同步任务和异步任务。同步任务会在调用栈中按照顺序排队等待主线程执行,异步任务则会在异步有了结果后将注册的回调函数添加到任务队列(消息队列)中等待主线程空闲的时候,也就是栈内被清空的时候,被读取到栈中等待主线程执行。任务队列是先进先出的数据结构。
- Event Loop
调用栈中的同步任务都执行完毕,栈内被清空了,就代表主线程空闲了,这个时候就会去任务队列中按照顺序读取一个任务放入到栈中执行。每次栈内被清空,都会去读取任务队列有没有任务,有就读取执行,一直循环读取-执行的操作,就形成了事件循环。
- 定时器
定时器会开启一条定时器触发线程来触发计时,定时器会在等待了指定的时间后将事件放入到任务队列中等待读取到主线程执行。
定时器指定的延时毫秒数其实并不准确,因为定时器只是在到了指定的时间时将事件放入到任务队列中,必须要等到同步的任务和现有的任务队列中的事件全部执行完成之后,才会去读取定时器的事件到主线程执行,中间可能会存在耗时比较久的任务,那么就不可能保证在指定的时间执行。
- 宏任务(macro-task)、微任务(micro-task)
除了广义的同步任务和异步任务,JavaScript 单线程中的任务可以细分为宏任务和微任务。
macro-task包括:script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering。
micro-task包括:process.nextTick, Promises, Object.observe, MutationObserver。
第一次事件循环中,JavaScript 引擎会把整个 script 代码当成一个宏任务执行,执行完成之后,再检测本次循环中是否寻在微任务,存在的话就依次从微任务的任务队列中读取执行完所有的微任务,再读取宏任务的任务队列中的任务执行,再执行所有的微任务,如此循环。JS 的执行顺序就是每次事件循环中的宏任务-微任务。
47.new关键字具体做了那些事?
创建了一个空对象
让这个对象的proto指向函数的原型prototype
将对象作为函数的this传进去,并默认return
48.bind,apply,call三者的异同?
相同点: 1:都是用来改变函数的this对象的指向的
2:第一个参数都是this要指向的对象
3:都可以利用后续参数传参
不同点:
1:call()的第一个参数是this要指向的对象,后面传入的是参数列表,参数可以是任意类型,当第一个参数为null、undefined的时候,默认指向window;
2:apply():第一个参数是this要指向的对象,第二个参数是数组
3:call()改过this的指向后,会再执行函数,bind()改过this后,不执行函数,会返回一个绑定新this的函数
bind与apply、call最大的区别就是:bind不会立即调用,其他两个会立即调用,apply与call的区别是apply第二个是参数组,但是 在确定的参数下,还是最好用call,call的效果会更高,但是在函数的延展性上使用apply更好
49.localStorage和sessionStorage区别?
- localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。
- 他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现)。
- localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。
- sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了。
50.vue.js中created()与activated()的个人使用理解?
created():在创建vue对象时,当html渲染之前就触发;但是注意,全局vue.js不强制刷新或者重启时只创建一次,也就是说,created()只会触发一次;
activated():在vue对象存活的情况下,进入当前存在activated()函数的页面时,一进入页面就触发;可用于初始化页面数据等