简介

公司是几百人上下的游戏公司，应聘的是中高级前端岗位，技术面一般有3轮，博主也是一个打工前端，以下问题的解释代表我个人知识讲解，有哪些不对欢迎指出，接下来讲讲我记得的面试题

一、vue2和vue3的区别，展开讲讲

说说答题大纲

双向绑定原理不同
根节点的不同
vue3使用的是组合式api
生命周期的不同
diff算法的不同
v-for和v-if同时使用的优先级

当时主要讲了这6点，其中当然还有一些其他的区别，欢迎补充

双向绑定原理哪里不同

vue2: 通过数据劫持结合发布订阅者模式的方式来实现，通过object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者，然后触发对应的监听回调来渲染视图，也就是说数据和视图同步了

vue3:与vue2不同，vue3的双向数据绑定是通过proxy来直接代理对象，可以直接对整个对象进行代理，可以监听对象某个属性值的变化，还可以监听对象属性的新增删除

根节点哪里不同

vue2:

<template>
    <div>
        <h1></h1>
    </div>
</template>

vue3:

<template>
    <div>
        <h1></h1>
    </div>
    <div>
        <span></span>
    </div>
</template>

具体就是vue2是只能根节点一个，vue3可以支持多个

vue3使用组合式api

vue3比较大的改进就是使用了组合式api，vue2使用的是options api

// vue2
<script>
export default {
	// 数据
    data() {
        return {};
    },
    mounted() {},
    // 方法
    methods: {},
    computed: {},
    components:{}
};
</script>
 
// vue3
 
// 这样代码会更加简洁和整洁。
<script>
export default {
    setup() {
        // 数据 和 方法都在setup里面使用
    }
};
</script>

生命周期的不同

beforeCreate  -> setup()    开始创建组件之前，创建的是data和method
created       -> setup()
beforeMount   -> onBeforeMount  组件挂载到节点上之前执行的函数。
mounted       -> onMounted  组件挂载完成后执行的函数
beforeUpdate  -> onBeforeUpdate 组件更新之前执行的函数。
updated       -> onUpdated  组件更新完成之后执行的函数。
beforeDestroy -> onBeforeUnmount    组件挂载到节点上之前执行的函数。

diff算法不同

vue2： vue2 diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。 vue2 diff算法会比较每一个vnode,而对于一些不参与更新的元素，进行比较是有点消耗性能的。

vue3： vue3 diff算法在初始化的时候会给每个虚拟节点添加一个patchFlags，patchFlags就是优化的标识。只会比较patchFlags发生变化的vnode,进行更新视图，对于没有变化的元素做静态标记，在渲染的时候直接复用。

v-for,v-if优先级

// vue2
v-for 优先于 v-if 生效
<div v-if="index == 1" v-for="(item,index) in arr" :key="index">{{item}}</div>
 
// vue3
v-if 优先于 v-for 生效
<div v-if="index == 1" v-for="(item,index) in arr" :key="index">{{item}}
</div>

二、单点登录问题

一个账号在a.com登录完，怎么在b.com也能直接登录

其实这能提取到的信息就是不同域名，怎么来实现单点登录，面试的时候说了2种，其实还有其他的解法，这里就只说一下面试的第一想法吧

cookie

众所周知，cookie是不能跨域的，那怎么来解决呢，这个我当时也想到了两种解法

直接把 cookie domain 设置为主域名
jsonp来跨域

cas解决方案

讲解这个cas，其实应该单独解决写一篇文章，比较里面的细节比较多，这里先简单讲讲

CAS（Central Authentication Service），中心认证服务，就是单点登录的某种实现方案。你可以把它理解为它是一个登录中转站，通过SSO站点，既解决了Cookie跨域的问题，同时还通过SSO 服务端实现了登录验证的中心化。

大概流程如下

三、css水平垂直居中方法

老生常谈的问题，这里不细说

1、flex布局

2、grid布局

3、绝对定位+marigin

4、绝对定位+transform:translate

5、table居中（引申到第四个问题的优化）

四、table优化

为什么table要优化，这就涉及到浏览器的回流问题，table的回流消耗的性能大概是普通列表的3倍，那就涉及到数据量一多的加载慢问题

懒加载
虚拟加载
canvas解决方案

五、虚拟dom优化

下次补充

浅谈广州游戏中大厂前端面试题

简介