8月5号，尤大宣布Vue3.2版本发布，普天同庆。

一个月后的今天，我才写尝鲜，姗姗来迟，豆腐都凉透了。

尤大公布升级消息后，在本地进行了更新测试，没有明显问题，而且尤大说没有破坏性的升级，那就安排！

升级内容

其实3.2的升级，是已经传播很久的两个功能：<script setup> 和 css 里的 v-bind。

script setup

简单来说就是Composition API里setup的语法糖，但是有了它我们可以少写很多东西：比如 setup里的return，比如引入的组件可以不用声明直接使用。

尤大真是帮我们将懒的精神发挥到了极致。

script setup模式下，变化比较大的主要是props和emits的声明，必须使用defineProps和defineEmits两个方法，这只是书写方式的问题，影响不大。

还有就是script setup组件，文档中的描述是 组件默认是关闭的。简单来说，就是这种方式写的组件内所有的属性都是只有组件内部可以访问的，在父组件通过ref或在子组件通过$parent拿到组件后访问不到任何组件内定义的属性。

因此我们需要通过 defineExpose 主动抛出外部访问的属性。

v-bind

可以让我们在style里直接使用js中的变量，接下来举个栗子

可以看到页面里的div背景色就是我们定义的background变量，通过v-bind我们可以很方便的动态改变样式。

但是代码截图里background变量有报错，这里是eslint的报错，变量定义了但从未使用。

这里的代码用的还是之前搭建生产项目系列文章的代码，解决这个问题升级vue的eslint插件eslint-plugin-vue就可以了，在它的更新日志里我们也能看到，v7.16.0版本适配了vue3.2新增的v-bind方法。

升级以后，重启eslint服务器，报错就不见了。

实现

v-bind的实现其实基于css已有的API：css自定义属性。

在F12里可以看到，我们v-bind绑定的变量，通过自定义属性绑定到了DOM节点上。

通过下面的代码，我们自己也可以实现同样的需求：

遇到的问题

说完升级内容，下面该说开发中遇到的问题了。

其实vue3用到现在，并没有遇到过比较棘手的大问题（否则我也不会活到现在写文章了），只是因为目前还没有被大量使用，可以参考的资料很少，遇到问题不容易从网上找到解决办法。

defineEmits 与 defineEmit

在3.2之前，我们在组件内触发父组件事件时，会通过 emits 来接收父组件传入的事件。但在 <script setup> 中，我们必须要使用 defineEmits() 来接收事件，props也有相同的改变，但是开发过程中不会遇到问题，所以不在这里提及。

不就是emits改成了defineEmits吗，这很简单啊。确实，一开始我也是这样觉得，但当在项目里引入defineEmits后，才发现事情和预期有差距。

通过const emits = defineEmits(['test'])引入事件后，得到的emits是null，没有办法调用。

最后在issues上看到解决办法，升级@vue/compiler-sfc包问题就可以解决。

但是更离奇的事儿在我写文章的时候遇到了，文章的实验项目没有复现这个问题。把vue降级成3.2.1，@vue/compiler-sfc也是旧版本，但是问题依然无法复现；就连生产项目，把@vue/compiler-sfc降级回旧版，都无法复现了。

所以遇到类似问题的同学可以尝试升级@vue/compiler-sfc解决，如果没有遇到就不用纠结了。

总结

vue3.2遇到的比较明显的问题也就这一个，其它的一些小问题有的和项目结构有关，有的和vite有关，回头专门整理一篇文章。

其实到目前为止，vue3+vite的开发组合用起来还算舒服，没有比较大的问题出现。但是Element-plus真的值得吐槽，各种bug各种有。

所以敬请期待下一篇的吐槽大会~