原来人家早都招满了，后面约的面试是遛狗呢。。。

我最近看到个帖子，讲的是今年校招的套路，说实话，看完我是真为现在的求职环境捏把汗。帖子里说，部门一早就把校招指标用完了，剩下的那些面试基本是“遛狗”——换句话说，就是让学生去面试、刷存在感，但其实一点机会都不给。

也就是说，这帮学生像是被安排到场子里“陪跑”，啥也拿不到。各位年轻人辛辛苦苦准备了几个月甚至一年，结果到头来只是人力的“宣传工具”。听着就让人心寒。

现在就业市场卷成什么样了，大家多多少少都看在眼里。公司有时招的岗位是稀缺资源，指标少得跟大熊猫似的。尤其是帖子里提到的某研究所，百人团队全年招个研发三人、测试两人，分分钟就签满了。

以往的那些条条框框啥都上了，这次就好比盖了层铁板，还要加上各种奇奇怪怪的隐形门槛：专业跨考、复读、高考失利、性别限制……好家伙，光条条框框都能绕地球好几圈了。

今天聊聊面试的时候经常被问到Vue 3.0的新特性之一——Tree shaking。这个技术让打包体积变得更小，代码运行速度更快，简直是程序员的福音。

那么究竟什么是Tree shaking，它是怎么实现的呢？今天咱们好好聊聊这个东西，并通过代码示例带大家感受下Vue 3.0中的Tree shaking特性。

Tree shaking，简单来说，就是在打包时剔除那些没有用到的代码。打个比方，如果把代码打包比作做蛋糕，传统方式就是把所有材料，包括鸡蛋壳、蛋白蛋黄统统搅拌在一起，等到出炉了再把没用的东西剔除。

但Tree shaking则是在一开始就只把蛋白和蛋黄放进去，最后省时又省力，直接出一个无杂质的蛋糕。换到代码打包上，就是在编译时分析代码，找到用到的部分并打包，没用到的部分就直接忽略掉。这样一来，代码体积小了，运行更高效。

在Vue 2.x中，由于Vue实例是一个单例对象，代码的所有功能和模块都会一起打包进项目里，即使某些功能并不在项目中用到，最终的打包文件中也会出现这些无用的代码。例如，我们在代码中引入Vue并使用nextTick方法：

import Vue from 'vue';

Vue.nextTick(() => {});

即使我们只是使用nextTick这个功能，整个Vue对象还是会被完整地打包进生产代码中。这样就导致了我们需要的代码少，而实际打包的体积却庞大，这对性能和存储都不太友好。

到了Vue 3.0，情况就大不相同了。Vue 3引入了模块化的设计，全局API可以分块处理。这意味着可以在项目中按需引入不同的功能，不需要的代码就不会出现在最终打包中。也就是说，我们可以像这样使用Tree shaking来按需加载Vue的功能：

import { nextTick, reactive } from 'vue';

nextTick(() => {});

在这种方式下，Vue实例的相关依赖只有我们引入的nextTick和reactive部分会被打包，而那些我们没用到的功能就不会出现在代码中。这样可以有效缩小打包体积。

Tree shaking的实现依赖于ES6模块语法，因为ES6的import和export是静态的，可以在编译时确定模块的依赖关系以及哪些变量被导入导出。

Tree shaking做了两件事：首先在编译阶段通过ES6模块语法判断哪些模块已加载；然后检查未被使用的模块和变量并将其删除。正是这种静态编译的特性使得Tree shaking在Vue 3.0中可以大展身手。

来看个实际例子。我们可以通过Vue CLI创建一个简单的Vue 2和Vue 3项目进行对比。

首先，Vue 2的项目代码可能是这样的：

<script>
export default {
    data: () => ({
        count: 1,
    }),
};
</script>

如果我们对这个项目进行打包，打包出来的文件会包含所有Vue实例的代码，即使我们只是用了data属性。如果我们在这个项目中加上computed和watch这些属性，虽然功能增多了，但打包体积却没有明显变化，因为Vue 2的单例设计会将所有功能打包进去，不论是否使用：

export default {
    data: () => ({
        question: "", 
        count: 1,
    }),
    computed: {
        double() {
            return this.count * 2;
        },
    },
    watch: {
        question(newQuestion, oldQuestion) {
            this.answer = 'xxxx';
        },
    },
};

在Vue 3.0项目中情况不同，代码可能长这样：

import { reactive, defineComponent } from "vue";

export default defineComponent({
    setup() {
        const state = reactive({
            count: 1,
        });
        return {
            state,
        };
    },
});

如果我们仅引入reactive和defineComponent，那么打包出来的体积会比Vue 2小很多，因为Vue 3的模块化设计允许只加载必要的部分。然后，当我们引入更多的功能，如computed和watch时：

import { reactive, defineComponent, computed, watch } from "vue";

export default defineComponent({
    setup() {
        const state = reactive({
            count: 1,
        });
        const double = computed(() => {
            return state.count * 2;
        });

        watch(
            () => state.count,
            (count, preCount) => {
                console.log(count);
                console.log(preCount);
            }
        );

        return {
            state,
            double,
        };
    },
});

在引入了computed和watch后，我们可以明显看到打包体积的增大。这样，我们可以清楚地了解到Vue 3的Tree shaking特性，哪些功能我们用到就加载，没用到的部分根本不打包进去。

Tree shaking在Vue 3中的优势主要有三个方面：第一，减少了程序体积，让打包文件更小；第二，减少了代码执行时间，因为只有必要的代码被加载；第三，为项目架构优化提供了便利，因为按需加载的机制使代码更轻量，便于将来进行扩展和维护。

最后，假如面试官问到Vue 3中的Tree shaking特性，最优回答可能是这样的：

Vue 3中的Tree shaking是一种在打包时剔除无用代码的优化技术，通过ES6模块化语法实现。Vue 3将全局API分块管理，在打包时根据实际使用情况按需加载模块，未使用的模块则不被打包。这种机制减少了项目体积，提高了执行效率。