中高级前端大厂面试秘籍，为你保驾护航金三银四，直通大厂(10)

check

• 执行setImmediate

跨域

• JSONP: 利用<script>标签不受跨域限制的特点，缺点是只能支持 get 请求

function jsonp(url, jsonpCallback, success) { 
  const script = document.createElement('script') 
  script.src = url 
  script.async = true 
  script.type = 'text/javascript' 
  window[jsonpCallback] = function(data) { 
    success && success(data) 
  } 
  document.body.appendChild(script) 
} 

• 设置 CORS: Access-Control-Allow-Origin：*
• postMessage

安全

• XSS攻击: 注入恶意代码

  • cookie 设置 httpOnly
  • 转义页面上的输入内容和输出内容

• CSPF: 跨站请求伪造，防护:

  • get 不修改数据
  • 不被第三方网站访问到用户的 cookie
  • 设置白名单，不被第三方网站请求
  • 请求校验

框架：Vue

1. nextTick

在下次dom更新循环结束之后执行延迟回调，可用于获取更新后的dom状态

• 新版本中默认是mincrotasks, v-on中会使用macrotasks

• macrotasks任务的实现:

  • setImmediate / MessageChannel / setTimeout

2. 生命周期

• _init_

  • initLifecycle/Event，往vm上挂载各种属性
  • callHook: beforeCreated: 实例刚创建
  • initInjection/initState: 初始化注入和 data 响应性
  • created: 创建完成，属性已经绑定， 但还未生成真实dom
  • 进行元素的挂载： $el / vm.$mount()

  • 是否有template: 解析成render function

    • *.vue文件: vue-loader会将<template>编译成render function
  • beforeMount: 模板编译/挂载之前
  • 执行render function，生成真实的dom，并替换到dom tree中
  • mounted: 组件已挂载

• update:

  • 执行diff算法，比对改变是否需要触发UI更新

  • flushScheduleQueue

    • watcher.before: 触发beforeUpdate钩子 - watcher.run(): 执行watcher中的 notify，通知所有依赖项更新UI
  • 触发updated钩子: 组件已更新
• actived / deactivated(keep-alive): 不销毁，缓存，组件激活与失活

• destroy:

  • beforeDestroy: 销毁开始

  • 销毁自身且递归销毁子组件以及事件监听

    • remove(): 删除节点
    • watcher.teardown(): 清空依赖
    • vm.$off(): 解绑监听
  • destroyed: 完成后触发钩子

上面是vue的声明周期的简单梳理，接下来我们直接以代码的形式来完成vue的初始化

new Vue({}) 
 
// 初始化Vue实例 
function _init() { 
     // 挂载属性 
    initLifeCycle(vm)  
    // 初始化事件系统，钩子函数等 
    initEvent(vm)  
    // 编译slot、vnode 
    initRender(vm)  
    // 触发钩子 
    callHook(vm, 'beforeCreate') 
    // 添加inject功能 
    initInjection(vm) 
    // 完成数据响应性 props/data/watch/computed/methods 
    initState(vm) 
    // 添加 provide 功能 
    initProvide(vm) 
    // 触发钩子 
    callHook(vm, 'created') 
         
     // 挂载节点 
    if (vm.$options.el) { 
        vm.$mount(vm.$options.el) 
    } 
} 
 
// 挂载节点实现 
function mountComponent(vm) { 
     // 获取 render function 
    if (!this.options.render) { 
        // template to render 
        // Vue.compile = compileToFunctions 
        let { render } = compileToFunctions()  
        this.options.render = render 
    } 
    // 触发钩子 
    callHook('beforeMounte') 
    // 初始化观察者 
    // render 渲染 vdom，  
    vdom = vm.render() 
    // update: 根据 diff 出的 patchs 挂载成真实的 dom  
    vm._update(vdom) 
    // 触发钩子   
    callHook(vm, 'mounted') 
} 
 
// 更新节点实现 
funtion queueWatcher(watcher) { 
    nextTick(flushScheduleQueue) 
} 
 
// 清空队列 
function flushScheduleQueue() { 
     // 遍历队列中所有修改 
    for(){ 
        // beforeUpdate 
        watcher.before() 
          
        // 依赖局部更新节点 
        watcher.update()  
        callHook('updated') 
    } 
} 
 
// 销毁实例实现 
Vue.prototype.$destory = function() { 
     // 触发钩子 
    callHook(vm, 'beforeDestory') 
    // 自身及子节点 
    remove()  
    // 删除依赖 
    watcher.teardown()  
    // 删除监听 
    vm.$off()  
    // 触发钩子 
    callHook(vm, 'destoryed') 
} 

3. 数据响应(数据劫持)

（编辑：ASP站长网）