前端面经合集（1）

1.vue的生命周期

        vue2.0 

beforeCreate created beforeMount mounted beforeUpdate updated beforeDestory destoryed activated deactivated errorCaptured

        vue3.0

setup onBeforeMount onMounted onBeforeUpate onUpdated onBeforeUnMount onUnMounted onErrorCaptured onRenderTracked onRenderTriggered

2.vue的双向绑定原理（MVVM）

        M: model ,相当于数据

        V: view,相当于dom

        VM: viewmodel 相当于vue，是model和view之间沟通的桥梁

        VM有两个功能：1）从model获取数据绑定到view上

                                   2）当用户操作页面上某个事件时，会将dom监听回调到js对象上

3. vue中nextTick方法的原理以及使用场景

nextTick方法的作用：在数据更新之后，立即调用此方法，获取更新后的dom

nextTick方法的原理：vue是异步执行dom更新操作的，当数据发生变化时，Vue会开启一个新的队列，在同一个事件循环中，将观察到数据发生变化的watcher推送到这个队列中，如果同一个watcher被触发多次，则只推送一次，这种缓冲行为避免了重复数据造成的不必要的计算以及dom操作，在下次事件循环时，vue会清空队列，并完成dom更新，为了在数据变化后vue要等待dom更新，所以一旦数据发生变化，就调用nextTick方法，获取更新后的dom。

nextTick方法的使用场景：1）在created钩子函数中执行的dom操作要放到vue.nextTick回调函数中

                                          2）在数据发生变化后立即使用js来操作新的视图的时候

                                          3）在使用第三方插件时，当vue生成的dom动态发生变化时，还想继续使用第三方插件，那么则应该在vue.nextTick回调函数中写重新使用插件的方法

4.this的指向问题

1）默认情况下，this指向全局，如果是浏览器，则指向window

2) 如果函数被调用的地方存在上下文，则隐式绑定

3）当new一个对象时，this指向这个对象

4）箭头函数没有自己的this,会捕捉上下文的this作为自己的this

5.输入一个url之后的过程：

1）根据域名到DNS中获取IP

2)  根据IP建立TCP连接

3）连接建立成功后发起http请求

4）服务器端响应http请求

5）浏览器解析html文档并请求html中静态资源

6）关闭tcp连接

7）浏览器渲染页面