SegmentFault 思否技术周刊 Vol.60 — 你对 Vue 了解多少？

本期技术周刊专属 Vue，欢迎大家阅读 ～

文章推荐

在 Vue 中为什么不推荐用 index 做 key

Vue 默认按照“就地更新”的策略来更新通过 v-for 渲染的元素列表。当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。

默认模式是高效的，但只适用于列表渲染输出的结果不依赖子组件状态或者临时 DOM 状态 (例如表单输入值) 的情况。

Spring Security + Vue + Flowable 怎么玩？

玩过工作流的小伙伴应该都知道，工作流中其实自带了一套用户系统，但是我们自己的系统往往也有自己的用户体系，那么如何将两者融合起来呢？或者说是否有必要将两者融合起来呢？

如果你想将自己系统的用户体系和 flowable 中的用户体系融合起来，那么整体上来说，大概就是两种办法吧...

用 Vue.js 写一个命令行贪吃蛇游戏

本文要分享的是如何使用 Vue.js 实现一个命令行贪吃蛇游戏(temir-snake-game)。对于贪吃蛇游戏想必大家都不陌生了，使用 Vue.js 实现一个 Web 版的贪吃蛇游戏似乎没什么难度，那如果是命令行版的呢？是不是你会对它的实现原理感兴趣呢？让我们开始吧！

Vue 树图组件封装

其实树图组件很好理解，就是通过递归自身调用自身来实现树图。再说明白一点，最好在头脑中有一个画面，更加便于理解和开发。

1. 就是我们先定义一个组件，在这个组件里面把第一个节点画出来
2. 然后再这第一个节点下面进行递归调用自身组件。这样就可以实现像糖葫芦一样一串节点
3. 但这只是一串，并不是树，所以还需要在这个基础上，画节点的地方加上循环的画节点。这样就成了树了。

总的来说先易后难，先把主干理解清楚，然后慢慢的往这个树干上面加树枝，这样一棵大树就画好了

elementui 源码学习之仿写一个 el-link

简而言之，el-link 组件就是给a标签包了一层，加上一些样式。故 link 组件除了拥有 a 标签的功能，还需要有一些能够使用的样式效果。所以，我们仿写这个组件标签的时候主要是复习一下传参的变量和样式的搭配，从而实现我们需要的效果

使用 Vite 构建工具快速创建 Vue 项目（ Vue3.0 项目开发）

Vue 项目的优点就是组件化开发，将每个功能、或者是每个页面、容器分成各个组件，一方面是便于维护，另一方面是多人开发的时候也是可以提高效率。可以增加代码的复用性、可维护性和可测试性。提高开发效率，方便重复使用，简化调试步骤，提升整个项目的可维护性，便于协同开发，是高内聚、低耦合代码的实践。

代码目录中的 components 目录就是组件的目录，在这里可以根据自己的项目去创建各个组件，直接在组件里面写 html 代码、以及调用 vue 的 api 去实现很多功能，例如 axios 网络请求，同时，组件内也可以写 css 样式。

Vue3 模板编译原理

Vue 的编译模块包含 4 个目录：

compiler-core
compiler-dom // 浏览器
compiler-sfc // 单文件组件
compiler-ssr // 服务端渲染

其中 compiler-core 模块是 Vue 编译的核心模块，并且是平台无关的。而剩下的三个都是在 compiler-core 的基础上针对不同的平台作了适配处理。

Vue 的编译分为三个阶段，分别是：parse、transform、codegen。

其中 parse 阶段将模板字符串转化为语法抽象树 AST。transform 阶段则是对 AST 进行了一些转换处理。codegen 阶段根据 AST 生成对应的 render 函数字符串。

问答推荐

Vue.config.js devServer 开发阶段和项目上线有什么区别？
Vue3 导出数据为 excel，fs 是被废弃了吗？
Vue 中想定位触发 watch 的函数调用，怎么找？
Vue 如何触发 computed 更新？
Vue 渲染括号问题?
Vue 多个异步请求时的 token 失效？
Vue 程序明明赋值成功但页面上的值没有变？
Vue 页面拿不到后端属性，报 Uncaught (in promise) TypeError 错误？
Vue 使用 vuex 数据更新问题？

---

# SegmentFault 技术周刊 #

「技术周刊」是社区特别推出的技术内容系列，一周一主题。

每周二更新，欢迎「关注」。大家也可以在评论处留言自己感兴趣的主题，推荐主题相关的优秀文章。

如有问题可以添加小姐姐微信~