浅析vue3自定义指令

vue3中可以像下面这样使用自定义指令。

这里我们只是定义了一个vFoucs变量，vue怎么知道这是一个指令呢？

这是因为约定大于配置，vue3中有这样一个约定（截图来自官方文档）：

注意这里说的是驼峰命令，如果是vfocus，那么vue并不会把它当成自定义指令。

这里还有一个隐藏的细节，就是vue只是约定了变量的名字，而没有约定变量的内容。换句话说，vue并不会检查变量值是否符合一个指令的必要条件，只要这个变量满足 v 开头的驼峰式命名，就会把他当成一个自定义指令，比如：

const vFocus = 1
const vFocus = "2";
const vFocus = {}

上面这几种形式都会被当成自定义指令来注册，只是它不是一个完整的实现，因此使用的时候没有任何效果，但也不会报错。

所以为了尽量避免混淆，我们应该尽量避免，给非自定义指令的变量使用 v 开头的驼峰式命名。

此外，我们应该注意到自定义指令，本质上就是一个js对象，因此我们完全可以将其独立到一个js文件中管理。

比如，我们可以用一个单独的js文件定义一个大指令。

// vFocus.js
export default {mounted: (el) => el.focus()
}

使用的时候只需要把它import进来就可以了：

<script setup>
import vFocus from './vFocus'
</script><template><input v-focus />
</template>

或者，你可以用一个js文件统一管理多个指令。

// directives.js
const vFocus =  {mounted: (el) => { el.focus();}
}const vDefaultValue = {mounted: (el) => { el.value = 123}}export {vFocus, vDefaultValue}

使用时，像下面这样引入：

<script setup>
import { vFocus, vDefaultValue} from './directives.js'
</script><template><input v-focus v-defaultValue />
</template>

注意：由于自定义指令就是一个js对象，所以定义的时候不必使用vXXX这种命名，只要导入的时候确保vXXX这种命名即可。

比如：

// directives.js
const focus =  {mounted: (el) => { el.focus();}
}const defaultValue = {mounted: (el) => { el.value = 123}}export {focus, defaultValue}

使用时，像下面这样引入：

<script setup>
import { focus as vFocus, defaultValues as vDefaultValue} from './directives.js'
</script><template><input v-focus v-defaultValue />
</template>