પ્રાથમિકતા D નિયમો: સાવધાની સાથે ઉપયોગ કરો (Priority D Rules: Use with Caution) ​

Vue ની કેટલીક સુવિધાઓ દુર્લભ એજ કેસ (edge cases) અથવા જૂના કોડ બેઝમાંથી સ્મૂધ માઇગ્રેશન માટે અસ્તિત્વમાં છે. જો કે જ્યારે વધુ પડતો ઉપયોગ કરવામાં આવે છે, ત્યારે તે તમારા કોડને મેન્ટેન કરવાનું વધુ મુશ્કેલ બનાવી શકે છે અથવા તો બગ્સનું કારણ પણ બની શકે છે. આ નિયમો સંભવિત જોખમી સુવિધાઓ પર પ્રકાશ પાડે છે, તે સમજાવે છે કે ક્યારે અને શા માટે તેમને ટાળવા જોઈએ.

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>

ગર્ભિત પેરેન્ટ-ચાઇલ્ડ કોમ્યુનિકેશન (Implicit parent-child communication) ​

પેરેન્ટ-ચાઇલ્ડ ઘટક કોમ્યુનિકેશન માટે this.$parent અથવા પ્રોપ્સ મ્યુટેશન ના બદલે પ્રોપ્સ અને ઇવેન્ટ્સ ને પ્રાધાન્ય આપવું જોઈએ.

એક આદર્શ Vue એપ્લિકેશન props down, events up છે. આ કન્વેન્શનનું પાલન કરવાથી તમારા ઘટકો સમજવામાં ઘણા સરળ બને છે. જો કે, એવા એજ કેસ છે જ્યાં પ્રોપ મ્યુટેશન (prop mutation) અથવા this.$parent બે ઘટકોને સરળ બનાવી શકે છે જે પહેલેથી ગાઢ રીતે જોડાયેલા (deeply coupled) છે.

સમસ્યા એ છે કે, ઘણા સરળ કિસ્સાઓ પણ છે જ્યાં આ પેટર્ન્સ સુવિધા આપી શકે. સાવધાન રહો: ટૂંકા ગાળાની સુવિધા (ઓછો કોડ લખવો) માટે સરળતા (તમારી સ્ટેટના પ્રવાહને સમજવામાં સમર્થ હોવું) નો વેપાર કરવાથી લલચાશો નહીં.

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>