混入与自定义指令
使用混入复用逻辑，并构建自定义指令
混入与自定义指令 是 CoddyKit 上的免费 Vue Academy 课时。 这是第 1 节课，共 3 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 3 节课。
复用逻辑
随着应用不断发展，您会在许多组件中发现相同的逻辑。Vue 提供了多种共享逻辑的方式。本课介绍其中两种：较旧的混入方式和功能强大的自定义指令。
什么是混入
混入是一个包含组件选项（数据、方法和钩子）的对象，会被合并到使用它的任何组件中。这是 Vue 2 中复用逻辑的经典方式。
export const loggerMixin = {
created() {
console.log("Component created")
},
methods: {
log(msg) { console.log(msg) }
}
}使用混入
通过 mixins 数组将混入添加到组件中。它的选项会与组件自身的选项合并。
import { loggerMixin } from "./loggerMixin"
export default {
mixins: [loggerMixin],
created() {
this.log("Ready")
}
}混入的缺点
混入确实存在问题：属性的来源不明确（隐式来源），不同混入之间可能出现名称冲突，合并规则也会变得令人困惑。这些痛点促成了更好的方式。
组合式函数：更好的方式
在 Vue 3 中，组合式函数（使用组合式应用程序接口的函数）取代了混入。它们使来源明确、避免名称冲突，并能进行清晰的组合。新代码应优先使用它们。
import { ref } from "vue"
export function useCounter() {
const count = ref(0)
function increment() { count.value++ }
return { count, increment }
}使用组合式函数
在 setup 中调用组合式函数，并只解构出您确实需要的内容；其来源一目了然且明确。
import { useCounter } from "./useCounter"
export default {
setup() {
const { count, increment } = useCounter()
return { count, increment }
}
}什么是自定义指令
自定义指令用于封装底层 DOM 行为，您可以通过 v-name 将其附加到元素上。它非常适合直接操作 DOM，例如 focus、滚动或显示工具提示。
注册全局 directive
通过 app.directive 在应用上注册 directive。模板中使用该名称时要加上 v- 前缀。
app.directive("focus", {
mounted(el) {
el.focus()
}
})
// usage: <input v-focus />directive 钩子
指令具有生命周期钩子：mounted（插入元素）、updated（组件更新）、beforeUnmount（清理）等，与组件生命周期相对应。
app.directive("color", {
mounted(el, binding) {
el.style.color = binding.value
},
updated(el, binding) {
el.style.color = binding.value
}
})绑定对象
第二个钩子参数是绑定对象。它包含 value（传入的值）、arg（冒号后面的内容）和 modifiers（点号后面的内容）。
// <p v-color:bg.bold="theme">
// binding.value -> theme
// binding.arg -> "bg"
// binding.modifiers -> { bold: true }局部指令
如果指令只在一个组件中使用，请通过 directives 选项在组件内注册，而不要进行全局注册。
export default {
directives: {
focus: {
mounted(el) { el.focus() }
}
}
}快速检查
检验您对混入和指令的掌握情况。
回顾
混入会将选项合并到组件中，但存在来源隐式和名称冲突的问题；在 Vue 3 中应优先使用组合式函数。使用 app.directive 注册或在组件内局部注册的自定义指令，通过 mounted 等钩子和 binding 对象封装 DOM 行为。接下来您将把功能打包成可复用的插件。
常见问题解答
「混入与自定义指令」课时是免费的吗？
是的 — 「混入与自定义指令」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 3 节课。
「混入与自定义指令」这节课中我会学到什么？
使用混入复用逻辑，并构建自定义指令 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Vue Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 3 节。
「混入与自定义指令」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Vue Academy 课中编写并运行代码吗？
能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。