纯问题链接：juejin.cn/post/714727…

A公司

1. 如何实现10px字体，和解决位置串行问题

font-size: 10px; 
transform: scale(0.83333);  
//谷歌浏览器机制问题，默认的css字体大小最小为12px并设置缩放值为10/12=0.83333，也就是transform:scale(0.83)；
transform-origin：0 0； 
//该值有两个参数值，第一个是水平方位值，第二个是垂直方位值， 默认缩放中心点是在盒子的正中心，所以如果我们需要文本左对齐，就需要改变中心点

2. ES6的解构赋值中使用别名

    const obj = { number: 100 }  
    const { number } = obj
    //使用别名
    const { number: otherNumber } = obj	
    console.log(otherNumber)   // 100

3. es6数组找到是否有一个属性

    var index = arr.findIndex((item) => item.prop === obj.prop);
    // -1 如果arr数组中的对象item.prop的值与obj.prop对象不相同，会返回一个大于0的数

4. vue 自定义指令

    // 1. 指令局部注册
    var vm = new Vue({
        el:'#app',
        data:{
            x:0
        },
        directives:{
            // 定义名为color的指令，指向一个配置对象
            color:{
                // 当指令第一次被绑定到元素上的时候，会立即触发bind函数
                // 形参中的el表示当前指令所绑定到的那个DOM对象
                bind(el,binding) {
                    el.style.color = binding.value
                    console.log(el,binding)
                    console.log("触发了")
                },
                // bind函数只调用一次，当dom更新时bind函数不会触发。
                // update函数会在每次dom更新时调用
                update(el,binding) {
                    el.style.color = binding.value
                }
            }
        }
    });
    
    
    // 2. // 全局自定义指令
    // 参数1：表示全局自定义指令名字
    // 参数2：对象，用来接收指令参数值
    Vue.directive('color',function(el,binding){
        el.style.color = binding.value
    })

5. vue 过滤器

vue filter 过滤器输送介质的一种管道装置，对一些数据进行fotmat加工格式化，也可以理解其为一个纯函数，Vue3中已废弃filter。

    // 第一种用法
    {{date | format}}
    
    // 第二种用法
    <span v-bind:id="id | formatId"></span>
    
    // 局部过滤器
    export default {
        name: 'App',
        data() {
            return {
            date: new Date
            }
        },
        filters: {
            format(value) {
                return moment(value).format('YYYY-MM-DD HH:mm:ss');
            },
        }
    }
    
    // 全局过滤器
    Vue.filter('dateFormat', (value, format) => {
        return moment(value).format(format);
    })
    
    // 过滤器连用
    {{date | format | formatB}}
    
    // 过滤器如何接受参数
    {{ msg | msgFormat(msg, arg1, arg2)}}
    Vue.filter('msgFormat', (msg, arg1, arg2) => {
        return msg.replace(/test/g, arg1 + arg2)
    })

6. vue keep-alive的属性

include ： 只有匹配的组件会被缓存  
exclude ： 任何匹配的组件都不会被缓存  
max ： 最多可以缓存多少组件实例

    <keep-alive include="组件的name">\\\</keep-alive>
    <keep-alive exclude="home,other">
        <router-view></router-view>
    </keep-alive>

7. webpack 源码映射

    module.exports = {
        /* 节省篇幅，其余配置已省略 */
        devtool: "eval-source-map",
    }

• source-map： 会产生单独的映射文件，控制台中的错误信息会定位到代码错误的文件，并且会定位到这文件的第几行第几列。帮助我们调试源代码。
• eval-source-map： 不会产生单独的映射文件，但是控制台中的错误信息会定位到代码错误的文件，并且会定位到这文件的第几行第几列。
• cheap-module-source-map： 会产生单独的映射文件，控制台中国的错误信息会定位到代码出错的文件，但是只能定位到第几行出错，不能定位到第几列。
• cheap-module-eval-source-map： 不会产生单独的映射文件，控制台中国的错误信息会定位到代码出错的文件，但是只能定位到第几行出错，不能定位到第几列。这个模式构建速度适中，而且会生成较好的源代码映射，适合在开发环境中使用 。

8. webpack 第三方库引用报错

sb问题

9. Git 跳版本回退

同上

10. 如何公司实现一个树结构 拆分

blog.csdn.net/weixin_4384…

B公司 一面

1. Vue生命周期

 beforeCreate、created、 beforeMount、mounted、beforeUpdate、 updated、beforeDestroy、destroyed

2. vue渲染父子组件的生命周期

父beforeCreate => 父created => 父beforeMount => 子beforeCreate => 子created => 子beforeMount => 子mounted => 父mounted

• 在数据更新阶段执行顺序为：
  父beforeUpdate => 子beforeUpdate => 子updated => 父updated

• 在组件销毁阶段执行顺序为：
  父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed

  规律：只要子组件被引入触发，都是父组件先开始执行，然后等到子组件执行完，父组件收尾。
  

3. vue组件通信

• props/$emit
• eventbus实现
• $emit/$on
• vuex
• $attrs/$listeners
• provide/inject
• $parent / $children与 ref

blog.csdn.net/QWERTYQ16/a…

4. eventbus实现

实例化了一个Vue实例，并赋值给了eventBus全局变量。就可以在任何地方使用这个全局变量。 blog.csdn.net/m0_37754657…

5. 父组件调用子子组件

6. vue指令

7. vue实现树组件

8. vue监听数组变化

www.jb51.net/article/198…

9. vue重写了那几个方法

push、pop、shift、unshift、splice、sort、reserve

10. message 实现

import vue from 'vue';
import messageComponent from './message.vue';
import './index.css';
const MessageConstructor = vue.extend(messageComponent);
function showMessage({text, type, duration=2000}) {
    const messageDom = new MessageConstructor({
        el: document.createElement('div'),
        data() {
            return {
                isShow: true, // 是否显示
                text: text, // 文本内容
                type: type // 类型
            }
        }
    })
    document.body.appendChild(messageDom.$el);
    setTimeout(() => {
        messageDom.isShow = false;
    }, duration)
}
function Message() {
    vue.prototype.$msg = showMessage;
}
export default Message;

11. hash 和 history 的原理

hash原理：hash通过监听浏览器的onhashchange()事件变化，查找对应的路由规则

history原理： 利用H5的 history中新增的两个API pushState() 和 replaceState() 和一个事件onpopstate监听URL变化history模式

12. js 找出重复次数最多的[1,1,2,2,2,3,3,3,3]

let obj = {} //采用键值对来存储，键表示该数字，值表示给数字出现次数
let maxNum = 0
a.forEach((item,index) => {
    if(a.indexOf(item) == index){
        obj[item] = 1
    }else{
        obj[item] = obj[item] + 1
    }
})
//找出谁是最大值
for(let i in obj){
    if(obj[i] > maxNum){
        maxNum = obj[i]
    }
}
//根据最大值输出对应的数字
for(let j in obj){
    if(obj[j] === maxNum){
        console.log('出现次数最多的数字为',j,' ,次数为',obj[j]);
    }
}

13. js map和foreach区别

• map速度比foreach快
• map会返回一个新数组，不对原数组产生影响,foreach不会产生新数组，foreach返回undefined
• map因为返回数组所以可以链式操作，foreach不能
• map里可以用return ,而foreach里用return不起作用，foreach不能用break，会直接报错

14. js 闭包

有权访问另一个函数作用域内变量的函数都是闭包。
因为变量被引用着所以不会被回收，可以用来封装一个私有变量。这是优点也是缺点，不必要的闭包只会增加内存消耗，造成内存泄露

15. promise.all 实现

function myPromiseAll (promiseeArr) {
    if (!Array.isArray(promiseeArr) || promiseeArr.length === 0) return;
    return new Promise((resolve, reject) => {
        let resolveArr = [];
        let resolveIndex = 0;
        for (let i = 0; i < promiseeArr.length; i ++) {
            (function(i){
                Promise.resolve(promiseeArr[i]).then(
                    res => {
                        resolveArr[i] = res;
                        resolveIndex ++;
                        if (resolveIndex === promiseeArr.length) {
                            return resolve(resolveArr)
                        }
                    },
                    rej => {
                        return reject(rej)
                    }
                )
            })(i)
        }
    })
}

16. 箭头函数和普通函数区别

• 箭头函数使用箭头定义，普通函数中没有
• 箭头函数都是匿名函数
• 箭头函数不能用于构造函数，不能使用new
• 箭头函数中this的指向不同，在普通函数中，this总是指向调用它的对象，箭头函数的 this 永远指向其上下文的 this ，任何方法都改变不了其指向，如 call() , bind() , apply()

17. Webpack 配置和优化 公共抽离

blog.csdn.net/weixin_5197… blog.csdn.net/qq_38888512…

18. Koa的使用

项目中主要主要进行接口转发 和 一些重定向的设置，返回一些tdk

19. http 强缓存和协商缓存

• 强缓存（本地缓存） 不会向服务器发送请求，直接从缓存中读取资源 200 接口返回状态码，遵循属性Expires Cache-Control
• 协商缓存 向服务器发送请求，服务器会根据这个请求的请求头的一些参数来判断是否命中协商缓存，如果命中，则返回304状态码并带上新的响应头通知浏览器从缓存中读取资源，遵循属性if-Modified-Since if-None-Match（请求头） Etag Last-modified

B公司 二面

1. 离职原因

2. vue v-if和v-show区别

v-if: 控制DOM元素的显示隐藏是将DOM元素整个添加或删除;
v-show: 控制DOM 的显示隐藏是为DOM元素添加css的样式display，设置none或者是block，DOM元素是还存在的

3. vue diff算法 和input展示切换diff是否能变化问题

1. diff算法是虛拟DOM技术的必然产物：通过新1日虚拟DOM作对比（民diff），将变化的地方更新在真实DOM上;另外，也需要diff高效的执行对比过程，从而降低时间复杂度为O(n)。
2. vue 2.x中为了降低Watcher粒度，每个组件只有一个Watcher与之对应，只有引入diff才能精确找到发生变化的地方。
3. wue中diff执行的时刻是组件实例执行其更新函数时，它会比对上一次渲染结果oidVnode和新的渲染结果newvnode，此过程称为patch。
4. diff过程整体遵循深度优先、同层比较的策略；两个节点之间比较会根据它们是否拥有子节点或者文本节点做不同操作；比较两组子节点是算法的重点，首先假设头尾节点可能相同做4次比对尝试，如果没有找到相同节点才按照通用方式遍历查找，查找结束再按情况处理剩下的节点；借助key通常可以非常精确找到相同节点，因此整个patch过程非常高效。

4. vue 自定义指令 watch computed filter区别

computed计算属性

1. 支持缓存，只有依赖数据发生改变，才会重新进行计算
2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化 3.computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过的数据通过计算得到的
3. 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed 5.如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

watch监听属性

1. 不支持缓存，数据变，直接会触发相应的操作； 2.watch支持异步； 3.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
2. 当一个属性发生变化时，需要执行对应的操作；一对多；

5. vue 插槽 和 函数作用域插槽传值

插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。

作用域插槽在解析的时候，不会作为组件的孩子节点，会解析成函数，当子组件渲染时，会调用此函数进行渲染。 或者可以说成作用域插槽是子组件可以在slot标签上绑定属性值，在父组件可以拿到子组件的数据，通过子组件绑定数据传递给父组件。

子组件：
<slot :nickName="'wthreesix'"></slot>

父组件：
<slot-child>
    <template slot-scope="scope">å
        <div>{{scope.nickName}}</div>
    </template>
</slot-child>

6. 架构设计模式有哪些

• mvc：jquery backbone 同步渲染方式，导致js文件较大 代码繁重，DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验 当 Model 频繁发生变化，开发者需要主动更新到 View Model：数据层（存数据、改数据）
  View：视图层（页面展示和dom的操作）
  Controller：控制视图层和数据层的关联，主要通过监听dom事件
• mvvm：Model-View-ViewModel 本质是MVC的改进版，最大的区别就是mvc是单向的，而mvvm是双向的，并且是自动的，也就是数据发生变化自动同步视图，视图发生变化自动同步数据
  优点：耦合低，是真的低，view和model完全分离维护性高，易维护，上手快双向绑定：视图发生变化数据自动同步，数据发生变化视图也自动同步减少了dom的操作，可以更多的关注业务逻辑
• mvp：Model-View-Presenter
  Model提供数据，View负责显示，Presenter负责逻辑的处理。
  MVP与MVC有着一个重大的区别：在MVP中View并不直接使用Model，它们之间的通信是通过Presenter (MVC中的Controller)来进行的，所有的交互都发生在Presenter内部，而在MVC中View会从直接Model中读取数据而不是通过 Controller。

7. http1.0 1.1 2.0 区别 （高频！）

• http1.0
  无连接 无状态 非持续的TCP连接方式，所以每次请求都要新建立一个连接

• http1.1

1. 长连接 支持长连接和请求的流水线处理，在一个TCP连接上可以传送多个HTTP请求和响应
2. 缓存处理 http1.1引入了更多的缓存控制策略，例如Entity tag，If-Unmodified-Since, If-Match, If-None-Match等
3. 宽带优化 宽带优化和网络连接的使用，在请求头中引入了range头（它只允许请求资源某个部分）方便开发者选择充分利用宽带和连接
4. Host头处理
   错误通知的管理 新增了24个错误状态响应码 409（Conflict）表示请求的资源与资源的当前状态发生冲突；410（Gone）表示服务器上的某个资源被永久性的删除。

• http2.0

1. 二进制分帧 请求和响应数据分割为更小的帧，并且它们采用二进制编码(http1.0基于文本格式)。多个帧之间可以乱序发送，根据帧首部的流表示可以重新组装
2. 多路复用的技术，做到同一个连接并发处理多个请，并发请求的数量多
3. 头部数据压缩 压缩状态行和头部传输UserAgent、Cookie频繁浪费，数据体积小了，在网络上传输就会更快。
4. 服务端推送 引入了server push，改善延迟，在浏览器明确地请求之前，免得客户端再次创建连接发送请求到服务器端获取。这样客户端可以直接从本地加载这些资源，不用再通过网络

• Http3.0
  底层支撑协议QUIC基于UDP实现，又含TCP的特点，实现了又快又可靠的协议。

8. webpack配置 （高频！）

9. devserver 的配置

host域名的配置
compress启动压缩
proxy的代理
hot模块热替换特性
host 配置项用于配置DevServer服务器监听的地址。 blog.csdn.net/hdchangchan…

10. webpack多入口怎么配置

entty 入口文件配置
src 和项目文件路径分文件夹
blog.csdn.net/qq_41581588…

11. 前端优化 （高频！）

1. 体积优化

• 排查并去除多余依赖、静态资源webpack uglifyjs-webpack-plugin缩js文件 css-loader 解析器css文件

• 采用Tree Shaking技术，对没有用到的插件、api不打包到最终打包后的文件中去

• vue 使用路由懒加载功能

• webpack 忽略打包externals抽离

• 第三方组件库，比如说Ant design of Vue、Element-ui组件库，按需引入进行优化

• webpack splitChunks是分离模块策略的配置，抽离公共引用模块

• 开启Gzip压缩 ，缩小TCP传输时js、css文件的体积

    nginx 配置  
    http:{ 
        #开启和关闭gzip模式
        gzip on;
        #gizp压缩起点，文件大于1k才进行压缩
        gzip_min_length 1k;
        # gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
        gzip_comp_level 6;
        # 进行压缩的文件类型。
        gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript ;
        # nginx对于静态文件的处理模块，开启后会寻找以.gz结尾的文件，直接返回，不会占用cpu进行压缩，如果找不到则不进行压缩
        gzip_static on
        # 是否在http header中添加Vary: Accept-Encoding，建议开启
        gzip_vary on;
    }
  

2. html

• 使用语义化标签 利于seo
• CSS写在文件头部，JS写在文件底部。

3. js

• 减少dom操作，尽可能的用类进行统一操作
• JS优化，如防抖、节流、事件委托、减少重排重绘等
• 懒加载功能

4. css

• 提取公共样式减少代码量、减少选择器嵌套层数
• 使用精灵图 合并资源，减少http请求数量。
• 使用字体图标或CSS绘制，来代替部分图片。
• 压缩图片

5. 加快请求速度

• HTTP协议缓存请求
• 预解析DNS
• 使用HTTP2.0
• 服务器端渲染
• cnd服务器

12. canvas svg怎么实现运动轨迹

13. webP了解吗

C公司

1. vue 生命周期

2. vue watch 和 computed

3. vue 组件通信

4. eventbus实现

5. ES6常用

6. 箭头函数this指向 obj调用 call能改变吗

7. webpack配置

8. 前端优化

D公司

1. 自我介绍

2. 项目介绍

3. 离职原因

4. vue有哪些指令

v-once v-show v-if v-else v-else-if v-for v-html v-text v-bind v-on v-model

5. vue key的作用

1. key的作用主要是为了高效的更新虛拟DOM，其原理是vue在patch过程中通过key可以精准判断两个节点是否是同一个，从而避免频繁更新不同元素，使得整个patch程更加高效，减少DOM操作量，提高性能。
2. 另外，若不设置key还可能在列表更新时引发一些隐蔽的bug
3. vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则 vue只会替换其内部属性而不会触发过渡效果。

6. vue watch和computed区别

7. vue 组件通信

8. vue $nexttick 原理

在下一次DOM 更新循环结束之后, 执行延迟异步的回调，修改数据 nexttick 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout代替。

9. vue template怎么打包的

解析模板parse，生成 AST
优化 ASToptimize
生成代码generate

10. webpack常用配置

11. js 闭包

12. js 继承的几种方式

• 原型链继承
• 构造函数继承（借助 call）
• 组合继承（前两种组合）
• 原型式继承
• 寄生式继承
• 寄生组合式继承 ES6 的 extends 关键字实现逻辑 blog.csdn.net/jatej/artic…

13. js 事件委托

把一个元素的响应事件的函数委托到父元素触发，原理事件冒泡机制

14. js 处理去重和排序的方法

冒泡排序 插入排序 indexof sort Set blog.csdn.net/qq_57688111…

15. h5 和客户端通信

jsbridge 通过method进行参数传递
发布到内部环境 或通过charles联调

16. 支付的实现

E 公司

1. vue和react的区别

vue是一个灵活易用的渐进式双向绑定的MVVM框架。
react是声明式渲染和组件化、单向数据流 组件写法上不同 vue template, react JSX

2. vue和react diff算法的区别

vue对比节点，如果节点元素类型相同，但是className不同，认为是不同类型的元素，会进行删除重建，但是react则会认为是同类型的节点，只会修改节点属性。
vue的列表比对采用的是首尾指针法，而react采用的是从左到右依次比对的方式，遍历两次 vue的对比方式更加高效。

3. 什么是虚拟 dom 优缺点

虚拟 dom 是简单的JS对象，并且最少包含标签名( tag)、属性(attrs)和子元素对象( children)三个属性，用对象属性来描述节点，实际上它只是一层对真实 DOM 的抽象。
优点：操作 DOM 慢，js运行效率高。我们可以将DOM对比操作放在JS层，提高效率，提升渲染性能

4. react 用的什么脚手架 有哪些

1、Create React App；2、Next.js；3、Gatsby；4、nwb；5、razzle；6、Neutrino；7、react-cli；8、Rekit等等 5. react hooks redux

6. rem适配

引入js文件，通过屏幕客户端屏幕宽度和设计稿进行对比，计算html值 动态进行样式设置

var rem = width * 100 / designWidth;
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';

7. webpack配置 vite用过吗

8. ts 使用过吗

9. 前端优化

10. 封装ui组件

11. 埋点怎么实现

动态生成空 img 标签，通过src属性访问url 把方法和参数拼接在路由连接上，进行埋点的提交，然后移除img标签；
优点：原生的HTML属性，兼容性比ajax要好很多，而且支持跨域

12. 大图上传

13. 线上 错误怎么排查

14. 前端书写规范

E公司 二面

1. 自我介绍

2. react state和props的区别

state是组件自己管理数据，控制自己的状态，可变；
props是外部传入的数据参数，不可变。

3. 项目相关问题

4. 前端优化

5. 线上bug怎么解决的 实际案例

6. 公司架构 汇报上级

7. 为什么选择现在去这家公司

8. 离职原因

F公司

1. Rem实现方案

2. 移动端适配方案

• rem
• 媒体查询
• 引入vant等进行布局

3. Koa做了什么 和 和怎么发版的Key的作用

4. 节流和防抖

节流：每一段时间只执行一次
var throttle = function (func, delay) {
    var timer = null;
    return function () {
        var context = this;
        var args = arguments;
        if (!timer) {
            timer = setTimeout(function () {
                func.apply(context, args);
                timer = null;
            }, delay);
        }
    }
}
防抖：在一段时间内连续触发事件，只执行最后一次
function debounce(func, wait, immediate) {
    var timeout; //定时器变量
    return function () {
        clearTimeout(timeout);//每次触发 先清除定时器
        timeout = setTimeout(func, wait);//指定多少秒后触发事件操作handler
    };
};

5. 怎么设置请求前端的性能优化

6. vue和react的区别 和优点

7. 样式独立的 可以使用什么方案

• vue scope
• webpack中的CSS模块化方案Local Scope

8. 和客户端交互怎么调试的头

9. http1.0 1.1 2.0 3.0 区别

10. 跨域方式

• JSONP 动态创建script src跨域参数拼接访问，后端调用callback
• cors 服务器配置Access-Control-Allow-Origin 是否包含请求页面的域名
• postMessage
• document.domain

11. cookie的安全性

• HttpOnly为true
• 给Cookie设置有效期
• 防止crsf

12. Webpack打包热更新原理

www.cnblogs.com/Semmering/a…

13. 埋点实现和优点

G公司 一面

1. 前端优化

2. Koa的使用场景和nginx区别

3. Koa的错误日志

• 原生logger
• koa-logger 插件
• koa-onerror 插件

4. 组件的设计思路

5. 还有什么常用编辑器

6. M3u8和普通视频区别

m3u8准确来说是一种索引文件，通过它来解析对应的放在服务器上的视频网络地址，实现多码率视频的适配 mp4是封装好的h264或h265媒体文件

7. 怎么判断直播推流中断

8. pc自动跳转到h5页面怎么做 多入口文件怎么找

9. 怎么处理跨域

10. 本地存储的应用场景和区别

11. websocket 判断链接失败

• 心跳包
• 轮循socket

12. h5页面内嵌在app中 怎么排错

13. 前端安全问题

xss 跨域脚本攻击.会通过合法的操作（比如在url中输入、在评论框中输入），向你的页面注入脚本,破坏页面的正常结构，插入广告等恶意内容
防范措施：编码、过滤、校正
CSRF 跨站请求伪造 获取cookie 盗用身份进行相关恶意的操作
防范措施 Referer验证 token隐藏在http的head头中 将cookie设置为HttpOnly

14. 前端测试性能 chrome performance

15. http状态码

• 200 请求已成功
• 301 永久重定向 移动到新位置
• 302 临时重定向
• 304 协商缓存
• 400 请求参数有误
• 401 请求需要用户验证
• 403 Forbidden 服务器已经理解请求，但是拒绝执行它
• 404 Not Found 未被在服务器上发现
• 500 服务器错误
• 502 网关或者代理工作的服务器尝试执行请求时，从上游服务器接收到无效的响应
• 503 Service Unavailable 临时的服务器维护或者过载

16. https怎么保证安全

HTTPS在HTTP的基础上加入了SSL协议，SSL依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信加密。
传输数据阶段依然使用对称加密，但是对称加密的秘钥我们采用非对称加密传输。

17. http的缓存

18. vue 双向绑定原理

vue会遍历data数据对象，使用Object. definedProperty0將每个属性都转换为getter和setter， 每个Vue组件实例都有一个对应的watcher实例，在组件初次渲染的时候会记录组件用到了那些数据，当数据发生改变的时候，会触发setter方法，并通知所有依赖这个数据的watcher实例调用update方法去触发组件的compile渲染方法，进行渲染数据。

19. 合并两个有序链表

leetcode.cn/classic/pro…

20. 是否拿到offer

G公司 二面

1. 项目介绍 在团队中的职责 项目的难点和印象深刻的地方

2. 说一个具体线上问题，出现的原因，处理方案和解决时间

3. Vue的优势

4. socket的如何使用和场景

5. 公司的团队技术氛围 工作效率 工作强度

6. 公司的考核情况 表现如何

7. 离职原因

8. 找工作的期望

H 一面

1. 介绍你其中的一个项目

2. get和post的区别

3. 什么是闭包

4. 怎么和后端交互的

5. 弱网环境下的解决方案 pwa

6. websocket

7. Vue生命周期

8. 改变this指向call apply bind

9. 职业发展方向

H 二面

1. 介绍项目

2. koa实现原理

3. 为什么用koa

4. 为什么用koa 调用http

5. webpack treeshaking 能检测esm文件

6. webpack 设置gzip需要配置什么

7. css flex 0 0 auto

8. css 上中下布局 height高度设置什么标签

9. js this指向有哪些

10. js call 第一个参数串空 在node层 和 客户端如何

11. js es6有哪些

12. js await async 什么作用 应该注意些什么

13. js 在node层怎么实现await 异步

14. vue 生命周期

15. vue 虚拟dom和操作dom的区别

16. vue 按需引入组建怎么实现

17. cdn是什么

18. 封装组件的思路

19. 304是什么状态码

20. 强缓存和协商缓存的区别和使用场景

21. git的使用