قوانین اولویت 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ها و Eventها برای ارتباط والد-فرزند باید به‌جای this.$parent یا prop های جابجاشونده ترجیح داده شوند.

یک اپلیکیشن ایده‌آل Vue به فرم propها پایین، و eventها بالا است. پایبندی به این قرارداد، کامپوننت‌های شما را قابل فهم‌تر می‌کند. با این حال، موارد استثنایی وجود دارند که جابجایی 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>
  `
})

<script setup>
defineProps({
  todo: {
    type: Object,
    required: true
  }
})
</script>

<template>
  <input v-model="todo.text" />
</template>

<script setup>
import { getCurrentInstance } from 'vue'

const props = defineProps({
  todo: {
    type: Object,
    required: true
  }
})

const instance = getCurrentInstance()

function removeTodo() {
  const parent = instance.parent
  if (!parent) return

  parent.props.todos = parent.props.todos.filter((todo) => {
    return todo.id !== props.todo.id
  })
}
</script>

<template>
  <span>
    {{ todo.text }}
    <button @click="removeTodo">×</button>
  </span>
</template>

<script setup>
defineProps({
  todo: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['input'])
</script>

<template>
  <input :value="todo.text" @input="emit('input', $event.target.value)" />
</template>

<script setup>
defineProps({
  todo: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['delete'])
</script>

<template>
  <span>
    {{ todo.text }}
    <button @click="emit('delete')">×</button>
  </span>
</template>