• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • 优先级 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>