前一个星期面试补充

高频面试题总结

不求一次就好，而是期望越来越好

直到我叫的外卖迟迟不见送过来之后我才知道我的手机卡已经停机一个多月了，可怕的是我丢出去的简历上面留的电话号码就是这一个，怎一个惨字了得。最近狂丢简历，发现和我对标的小公司几乎都要求要会小程序，而且居然还要会 jQuery，也有可能是我的认知出现了错误，觉得 jQuery 不用再去学了

---

微信小程序的生命周期

Page()函数用来注册一个页面，接受一个 Object 函数，其指定页面的初始数据，生命周期函数，事件处理函数等

生命周期函数：

onLoad–监听页面加载

onReady–监听页面初次渲染完成

onShow–监听页面显示

onHide–监听页面隐藏

onUnload–监听页面卸载

Vue 的生命周期

beforeCreate(初始化页面前)

在实例初始化之后，数据观测(data observer)和 event/watcher 事件配置之前被调用

data 和$el 都没有初始化，全部为 undefined

使用场景：可以在此时加入一些loading效果，在created时进行移除

created(初始化页面后)

实例已经创建完成之后被调用。在这一步，实例已经完成以下的配置:数据观测(data observer)，属性和方法的 2 运算，watch/event 事件回调。然而，挂载阶段还没有开始，$el 属性目前不可见。若在此阶段进行 DOM 操作一定要放在 Vue.nextTick()的回调函数中

data 初始化完成，但$el 没有初始化

没有挂载的意思就是模板还没有被渲染成 HTML，也就是这时候通过 id 等去查找元素不能确保一定能找到，所以一般 created 钩子函数主要用来初始化数据

使用场景：需要异步请求数据的方法可以在此时执行，完成数据的初始化

beforeMount(渲染 DOM 前)

在挂载开始之前被调用:相关的 render 函数首次被调用

data 和$el 都已经存在，但 DOM 为虚拟 DOM 还没有完全加载

使用场景：挂载前，虽然得不到具体的DOM元素，但Vue挂载的根节点已经创建，可以围绕这个根元素继续一些操作

mounted(渲染 DOM 后)

el 被新创建的 vm.$el 替换，并挂载到实例上之后调用该钩子，一般是用来向后端发起请求拿到数据以后做一些业务处理，DOM 操作一般是在 mounted 钩子函数中进行的

data 和$el 均已存在，并且 DOM 加载完成，完成挂载

第一次页面加载会触发以上四个钩子，即 beforeCreate,created,beforeMount,mounted 这四个钩子

使用场景：可在此时发起后端请求，拿回数据，配合路由钩子做一些事情

beforeUpdate(更新数据前)

数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前，我们可以在这个钩子中进一步地更改状态，这不会触发附加地重渲染过程，这也是重新渲染之前最后修改数据的机会

使用场景：可在更新前访问现有的DOM，如手动移出添加的事件监听器

updated(更新数据后)

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以我们现在可以执行依赖于 DOM 的操作

应该避免在此期间更改状态，因为这可能会导致更新无限循环，该钩子在服务器端渲染期间不被调用

使用场景：当数据更新需要做统一业务的时候使用

beforeDestroy(卸载组件前)

实例销毁之前调用，在这一步，实例仍然完全可用

使用场景：可做一些删除提示，如：你确定删除吗？

destroyed(更新数据后)

Vue实例销毁后调用，调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被拆除，所有的子实例也会被销毁，该钩子在服务端渲染期间不被调用

使用场景：销毁监听事件，这时组件已经没有了，无法操作里面任何东西了

另外还有keep-alive独有的生命周期，分别为actived和deactivated。用keep-alive包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行deactivated钩子函数，命中缓存渲染后会执行activated钩子函数

我们可以在created,beforeMounted,mounted这三个周期内执行异步请求，因为这三个钩子函数data已经创建，可以将服务端返回的数据进行赋值

既然异步函数并不会阻塞vue生命周期整个过程，那么在哪个阶段请求都可以，如果考虑到用户体验方面的影响，希望用户尽快感知页面已加载，减少空白页面时间，建议放在created阶段，然后再处理会出现null,undefined这种情况，毕竟越早获取数据，在mounted实例挂载的时候渲染也就越及时；此外，SSR(服务器渲染)不支持beforeMounte,mounted钩子函数，所以放在created中有助于一致性

Vue生命周期

jQuery中的ready方法和js中的onload方法的区别

1：两个方法的执行顺序不一样，jQuery版本不同，方法的执行顺序不同，有的比js的onload方法先执行，有的后执行；一般jQuery的ready在DOM结构加载完毕后执行，window.onload在所有文件加载完毕之后执行jQuery的ready方法类似于JS的DOMContentLoaded

2：编写的个数不同，window.onload不能同时编写多个，如果有多个window.onload方法，只会执行最后一个onload方法，前面的会被覆盖，jQuery的ready可以同时编写多个，并且都可以得到执行

3：简化写法，window.onload没有简化写法，jQuery可以简化

$(document).ready(function(){})
//可以简写成
$(function(){})

页面加载完成有两种事件

1：ready，表示文档结构(DOM结构)已经加载完成(不包含图片等非文字媒体文件)

2：onload,指示页面包含图片等文件在内的所有元素都加载完成(ready在onload前加载)

$(window).load()

使用该方法会等到页面所有内容加载完毕后才会触发，并且同时又没有onlaod事件的弊端

与之相对的unload事件(会在页面关闭时候执行)

DOM文档加载步骤：

1：解析HTML结构

2：加载外部的脚本和样式文件

3：解析并执行脚本代码

4：执行$(function(){})内对应的代码

5：加载图片等二进制资源

6：在页面加载完毕，执行window.onload

用JS实现AJAX

原生JavaScript实现AJAX和jsonp

let xhr = new XMLHttpRequest()
xhr.open('post','url')
xhr.setRequestHeader('Content-type',"application/x-www-form-urlencoded")
xhr.send("somedatas")
xhr.onreadstatechange=function(){
    if(xhr.readyState === 4 && xhr.status === 200){
	    console.log(xhr.responseText)
	}
}

1：实例化一个XHR实例

2：xhr.open定义请求方法和请求路径

3：xhr.setRequestHeader设置请求头

4：xhr.send发送数据

5：xhr.onreadystatechange匿名函数并判断xhr.readystate===4和xhr.status===200

符合这两个条件就表示已经成功发送请求并可以接收返回的数据了