原文链接：michaelnthiessen.com/newsletter
作者：Michael
新年快乐！希望 2026 年开局一切顺遂。今年就从这些实用的 Vue 和 Nuxt 干货内容开始吧。
🔥 v-for 中的解构赋值
你知道可以在v-for中使用解构赋值吗？
<li
v-for="{ name, id } in users"
:key="id"
>
{{ name }}
</li>
大家更熟知的用法，是通过如下这种元组形式在v-for中获取索引：
<li v-for="(movie, index) in [
'狮子王',
'冰雪奇缘',
'公主新娘'
]">
{{ index + 1 }} - {{ movie }}
</li>
遍历对象时，还能获取对象的键名：
<li v-for="(value, key) in {
name: '狮子王',
released: 2019,
director: '乔恩·费儒',
}">
{{ key }}: {{ value }}
</li>
也可以将上述两种方式结合，同时获取对象属性的键名和索引：
<li v-for="(value, key, index) in {
name: '狮子王',
released: 2019,
director: '乔恩·费儒',
}">
#{{ index + 1 }}. {{ key }}: {{ value }}
</li>
🔥 动态返回值
组合式函数既可以返回单个值，也可以返回一个值对象，通常这些返回值都是ref响应式数据。
但我们也可以根据组合式函数的使用场景，动态切换这两种返回形式：
// 仅获取单个值
const now = useNow()
// 更精细地获取组合式函数的返回内容
const {
now,
pause,
resume
} = useNow({ controls: true })
这种写法非常实用，因为大多数情况下我们只需要单个返回值，没必要为了主场景把接口设计得过于复杂。
而通过动态返回包含所有ref的对象，也能满足少数高级使用场景的需求。
以下是该组合式函数的一种实现方式：
export default function useNow(opts) {
const {
controls = false,
} = opts;
// 组合式函数内部逻辑处理
if (controls) {
return { now, pause, resume };
} else {
return now;
}
}
🔥 切勿重写组件的 CSS 样式
从组件外部直接修改组件的 CSS 样式，往往会让人觉得操作便捷。哪怕只是做一点细微的样式调整，看似无伤大雅，但实际隐患重重。
举个例子，现有一个默认蓝色的按钮组件，你需要在某个特定场景下将它改成绿色。如果从父组件中直接重写背景色，写法如下：
<template>
<Button class="green">将此按钮设为绿色</Button>
</template>
<style>
.green.button {
background: green;
}
</style>
这种写法确实能实现效果，但稳定性极差，很容易出问题。
试想一下：如果组件的类名被修改了怎么办？如果组件的 HTML 结构被调整了怎么办？
任何修改这个按钮组件的开发者，都不会知道该组件的背景色在别处被重写了，自然也不会想到要同步修改相关代码。
正确的做法是扩展按钮组件的功能，将所有修改按钮样式的代码都统一放在按钮组件内部。
我们可以给按钮组件新增一个is-green属性：
<template>
<Button is-green>将此按钮设为绿色</Button>
</template>
<style>
/* 无需编写额外样式！ */
</style>
把样式逻辑内聚到组件本身，后续其他开发者需要绿色按钮时，使用起来也会更方便！
📜 Vue 中的作用域效果是什么？
带你了解 Vue 中的作用域效果、其工作原理，以及如何通过它管理副作用、编写更优质的 Vue 组件。
What are Effect Scopes in Vue?
📜 优化 Vue 应用
米歇尔为大家高屋建瓴地梳理了 Vue 应用的性能优化最佳实践，干货满满。无论是作为优化入门指南，还是制作优化检查清单，这份内容都非常适合想要优化 Vue 应用的开发者。
💬 追求极致
“调试程序时，新手会不断添加修正代码，而高手会剔除有问题的代码。”—— 理查德・帕蒂斯
🧠 间隔重复记忆：Nuxt 3 的自动导入功能
将知识转化为长期记忆的最佳方式，就是定期复习，并且逐步延长复习的时间间隔 👨🔬
真正记住这些技巧，远比走马观花地浏览更有意义，所以这里给大家回顾几周前的一个小技巧，帮大家唤醒记忆。
在 Nuxt 3 中，无需再像这样手动导入所有依赖：
// 我的博客项目代码片段
import BasicLayout from './BasicLayout.vue';
import Footer from '../components/Footer';
import Subscribe from '../components/Subscribe';
import LandingMat from '../components/LandingMat';
import Logo from '../icons/Logo';
import LogoClip from '../icons/LogoClip';
import TriangleShape from '../icons/TriangleShape';
import SquareShape from '../icons/SquareShape';
正确的用法是这样的：
// …开个玩笑，根本不需要手动导入！
直接在需要的地方使用组件、组合式函数或布局即可，剩下的工作 Nuxt 会自动完成。
这看似是个小功能，但 Nuxt 3 的自动导入极大地提升了整体开发体验。它会在需要时，只导入实际用到的内容。
同时，这也能让你的应用运行得更快！
当然，这样一来依赖关系会变得不那么直观。但只要你将组件和组合式函数都设计得足够轻量，这一点影响几乎可以忽略不计，你依然能快速理清应用的代码逻辑。
