优先级 D 的规则:谨慎使用 (潜在风险)
Vue 的一些特性可以适应罕见的边缘情况或从遗留代码库更平滑的迁移。然而,当过度使用时,它们会使您的代码更难维护,甚至成为错误的来源。这些规则揭示了潜在的风险特征,描述了何时以及为什么应该避免它们。
scoped 中的元素选择器
元素选择器应该避免在 scoped 中出现。在 scoped 样式中,类选择器要比元素选择器更好,因为大量地使用元素选择器是很慢的。
反面例子
<template> <button>×</button> </template> <style scoped> button { background-color: red; } </style>
正面例子
<template> <button class="btn btn-close">×</button> </template> <style scoped> .btn-close { background-color: red; } </style>
隐性的父子组件通信
应该优先通过 prop 和事件进行父子组件之间的通信,而不是通过 this.$parent 或对 prop 做出变更。一个理想的 Vue 应用是 prop 向下传递,事件向上传递的。遵循这一约定会让你的组件更易于理解。然而,在一些边界情况下,对 prop 的变更或 this.$parent 能够简化两个深度耦合的组件。
问题在于,这种做法在很多简单的场景下也可能会更方便。但请当心:不要为了一时方便(少写代码)而牺牲简明性(易于理解的状态流)。
反面例子
app.component('TodoItem', { props: { todo: { type: Object, required: true } }, template: '<input v-model="todo.text">' }) app.component('TodoItem', { props: { todo: { type: Object, required: true } }, methods: { removeTodo() { this.$parent.todos = this.$parent.todos.filter(todo => todo.id !== vm.todo.id) } }, template: ` <span> {{ todo.text }} <button @click="removeTodo"> × </button> </span> ` })
正面例子
app.component('TodoItem', { props: { todo: { type: Object, required: true } }, emits: ['input'], template: ` <input :value="todo.text" @input="$emit('input', $event.target.value)" > ` }) app.component('TodoItem', { props: { todo: { type: Object, required: true } }, emits: ['delete'], template: ` <span> {{ todo.text }} <button @click="$emit('delete')"> × </button> </span> ` })
非 Flux 的全局状态管理
应该优先通过 Vuex 管理全局状态,而不是通过 this.$root 或一个全局事件总线。通过this.$root
和/或全局事件总线管理状态在很多简单的场景下都是很方便的,但是并不适用于绝大多数的应用。
Vuex 是 Vue 的官方类 flux 实现,其提供的不仅是一个管理状态的中心,还包括组织、追踪和调试状态变更的工具。它很好地集成在了 Vue 生态系统之中(包括完整的 Vue DevTools 支持)。
反面例子
// main.js import { createApp } from 'vue' import mitt from 'mitt' const app = createApp({ data() { return { todos: [], emitter: mitt() } }, created() { this.emitter.on('remove-todo', this.removeTodo) }, methods: { removeTodo(todo) { const todoIdToRemove = todo.id this.todos = this.todos.filter(todo => todo.id !== todoIdToRemove) } } })
正面例子
// store/modules/todos.js export default { state: { list: [] }, mutations: { REMOVE_TODO (state, todoId) { state.list = state.list.filter(todo => todo.id !== todoId) } }, actions: { removeTodo ({ commit, state }, todo) { commit('REMOVE_TODO', todo.id) } } }
<!-- TodoItem.vue --> <template> <span> {{ todo.text }} <button @click="removeTodo(todo)"> X </button> </span> </template> <script> import { mapActions } from 'vuex' export default { props: { todo: { type: Object, required: true } }, methods: mapActions(['removeTodo']) } </script>