Vue2和Vue3的区别？

vue2和vue3写法上区别：
选项式Api是将data和methods包括后面的watch，computed等分开管理，而组合式Api则是将相关逻辑放到了一起（类似于原生js开发）。
setup语法糖则可以让变量方法不用再写return，后面的组件甚至是自定义指令也可以在我们的template中自动获得。

剩下的借鉴想知道Vue3与Vue2的区别?五千字教程助你快速上手Vue3! - 掘金 (juejin.cn)

vue2 和 vue3 的响应式原理？

对比vue2和vue3的响应式原理 - 掘金 (juejin.cn)

手写Vue2的tab切换栏

写惯了vue3,突然切到vue2，一时间不适应。

微信图片_20220810185947.jpg

<template>
    <div id="app">
        <div class="btn-container">
            <div
                class="btn"
                v-for="(item, index) in arr"
                :key="index"
                :class="currentIndex == index ? 'active' : ''"
                @click="clink(index)"
            >
                {{ item.name }}
            </div>
        </div>
        <div class="content-container">
            <div class="content">{{ arr[currentIndex].content }}</div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'A',
    data() {
        return {
            currentIndex: 0,
            arr: [
                { name: 'a', content: '1' },
                { name: 'b', content: '2' },
                { name: 'c', content: '3' }
            ]
        }
    },
    methods: {
        clink(index) {
            this.currentIndex = index
        }
    }
}
</script>
<style lang="scss" scoped>
.btn-container {
    width: 300px;
    height: 50px;
    display: flex;
}
.btn {
    width: 100px;
    height: 50px;
    border: 1px solid #000;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
}
.content {
    width: 300px;
    height: 200px;
    border: 5px dotted red;
}
/* 高亮css */
.active {
    background-color: red;
    color: #fff;
}
</style>

延伸到可以再内容区域考虑用v-if/v-show,接着问了一下v-if和v-show的区别？

v-if和v-show的区别？

😔这个问题我回答反了，难受

v-show :相当于加了个display：none的样式。而display：none是dom树上有的，内容也在只是不显示在页面上。只是简单的基于css切换
v-if : 为true时，DOM树上面不会有这块代码，页面也不会显示。在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染
v-show 由false变为true的时候不会触发组件的生命周期
v-if由false变为true的时候，触发组件的beforeCreate、create、beforeMount、mounted钩子，由true变为false的时候触发组件的beforeDestory、destoryed方法

性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；
v-if 相比 v-show 开销更大的（直接操作dom节点增加与删除）

如果需要非常频繁地切换，则使用 v-show 较好

如果在运行时条件很少改变，则使用 v-if 较好

接着问了我style里面用了scss预处理器，和css有什么区别？

SCSS与CSS区别？

在 CSS 语法的基础上增加了变量、嵌套、混合、导入等高级功能。

看我学过数据结构，问了我有哪几种排序，快速排序的如何实现，时间复杂度？

几种排序？

这个我看了一下答案，我和面试官都回答错了。

快速排序的实现思路？

排序算法:快速排序的理解与实现 - 掘金 (juejin.cn)

剩下的是智力题，也不算是智力题，用计算机实现，我觉得我的答案也没错。面试官觉得他的答案是对的，怎么说呢，我还是坚持我的。

【8.10】前端面试