Vue 官方插件重磅更新，三大高级功能免费了！

如果你平时写 Vue 项目，大概率会在 VS Code 里安装官方的 Vue 插件（以前叫 Volar，现在统一成 Vue(Official)）。

这款插件最近迎来了 3.0.7 版本更新，有一个特别值得关注的变化：原本需要成为赞助者才能解锁的“高级功能”，现在全部免费对所有人开放了！

这次开放的功能有三个：

模板插值高亮

写过复杂的 Vue 模板都知道，满屏的 {{ ... }} 插值看久了眼睛容易花，尤其是在密集的表格、列表里，变量和静态文本常常搅在一起。

模板插值高亮的作用，就是自动把 {{ ... }} 内的表达式用特殊的背景或颜色标出来，让你一眼就能分清哪些是变量、哪些是文字。

如果觉得视觉效果太“亮”，也可以在 VS Code 设置里关掉。

{
  "vue.editor.templateInterpolationDecorators": false
}

专注模式

以前编辑 Vue 单文件组件（SFC）时，经常需要在 <template>、<script>、<style> 之间来回切换，文件一长就显得乱。

焦点模式可以帮你“收敛注意力”：只突出你正在编辑的部分，把其他区域弱化。这样一来，大文件也能看得更专注。

不过，作者考虑到部分用户初次使用会觉得标签“莫名消失”，所以在 3.0.7 里把它改成了默认关闭。如果你想体验，可以在 VS Code 的设置里手动打开。

{
  "vue.editor.focusMode": true
}

响应性可视化

Vue 里数据是响应式的，但在复杂组件里，ref、reactive、computed、watch 之间的依赖关系往往一团乱麻。

响应性可视化能直接在编辑器里，帮你标出数据的依赖关系，让你清楚看到“依赖了谁”。

怎么使用？

不需要任何赞助验证，更新后就能直接用。

写在最后

这次更新最大的意义，就是把原本需要赞助才能用的功能彻底开放。

对于日常开发来说：

如果你平时在 Vue 项目里花的时间很多，这三个功能会提升你的工作效率。

强烈建议大家赶紧升级插件，顺手体验一下。