Сазнајте више о Вуе.јс Ватцхерс-у да бисте побољшали развој веб апликација

Преглед садржаја

Кључне Такеаваис

ЈаваСцрипт оквири као што је Вуе нуде функције као што су архитектура компоненти, управљање стањем и рутирање како би се поједноставио развој веб апликација.
Вуе посматрачи су функције које прате промене реактивних својстава и омогућавају вам да реагујете на догађаје и модификацију података.
Упоређујући посматраче са израчунатим својствима, израчуната својства су сажетија и лакша за читање, што резултира бољим перформансама и отклањањем грешака.

ЈаваСцрипт оквири су постали витални део веб развоја. То је због њихових лако доступних функција, укључујући архитектуру компоненти, управљање стањем и рутирање. Ово помаже да се смањи стрес, напор и време потребно за прављење веб апликације од нуле.

Вуе, један од ових оквира, нуди многе функције за убрзавање развоја. Функција гледања вам омогућава да надгледате вредности променљивих и израза током извршавања програма.

Шта су посматрачи у Вуе-у?

Вуе посматрачи су функције које прате промене у реактивном својству и реагују у складу са тим. Посматрачи вам омогућавају да реагујете на догађаје и измене података.

Да бисте користили посматрач, увезите функцију гледања из вуе пакета у своју скрипту:

 <script setup>
import { watch } from 'vue';
</script>

Сада можете да користите функцију гледања за имплементацију посматрача у вашу Вуе компоненту. Ево једноставног примера:

 <template>
  <div>
    <p>{{ user }}</p>
    <button @click="changeName">Change Name</button>
  </div>
</template><script setup>
import { ref, watch } from 'vue';
const user = ref('Chinedu');
const changeName = () => {
  user.value="Victor"; // Change the user's name
};
watch(user, (newUser, oldUser) => {
  alert(`User name changed from "${oldUser}" to "${newUser}"`);
});
</script>

Ова једноставна компонента користи функцију сата за праћење промене корисничког имена. Одељак шаблона исечка дефинише ХТМЛ структуру компоненте, која укључује ознаку ап која приказује вредност корисничке реактивне променљиве.

Како сакрити личне податке са слике пре него што их поделите

Шаблон такође садржи елемент дугмета, са функцијом цхангеНаме припојеном слушаоцу догађаја клика. Када се корисничка променљива промени, Вуе покреће функцију повратног позива. Функција повратног позива приказује упозорење: „Корисничко име је промењено из „Цхинеду“ у „Вицтор“.“

Поређење посматрача са рачунарским својствима

Важно је разумети разлику између посматрача и израчунатих својстава. Иако се обоје користе као алати за реактивност у Вуе-у, требало би да их користите у различите сврхе.

На пример, можете израчунати збир старости оца и сина са посматрачима, овако:

 <template>
  <input type="text" placeholder="Father's Age" v-model="father">
  <input type="text" placeholder="Son's Age" v-model="son">
  <p>Total Age: {{ total }}</p>
</template><script setup>
import { ref, watch } from 'vue';
const father = ref();
const son = ref();
const total = ref();
watch(son, (newAge, oldAge) => {
  total.value = Number(father.value) + Number(newAge)
})
watch(father, (newAge, oldAge) => {
  total.value = Number(newAge) + Number(son.value)
})
</script>

Ова Вуе компонента користи посматраче да добије збир старости оца и сина. Да би то урадио, креира нову реактивну променљиву, тотал. Можете да креирате реактивну променљиву када користите Вуеов АПИ за композицију.

Исечак затим користи две функције сата за праћење старости сина и оца. За свако доба, било оца или сина, исечак сажима нову вредност са узрастом другог. Затим чува резултат у укупној реактивној променљивој.

Размотрите исти сценарио у горњем исечку за онај који користи израчуната својства:

 <template>
  <input type="text" placeholder="Father's Age" v-model="father">
  <input type="text" placeholder="Son's Age" v-model="son">
  <p>Total Age: {{ total }}</p>
</template><script setup>
import { ref , computed } from 'vue';
const father = ref();
const son = ref();
const total = computed(() => {
  return Number(father.value) + Number(son.value);
});
</script>

Овај исечак је, у поређењу са претходним, сажетији и лакши за читање. Исечак добија збир старости оца и сина и чува га у израчунатом реф (променљивој), укупно. Одељак шаблона затим приказује укупну променљиву користећи интерполацију, технику везивања података у Вуе-у.

Шта су зли напади близанаца и како их открити и спречити?

Чак и ако можете да добијете збир два узраста помоћу посматрача, боље је то учинити помоћу израчунатих својстава. Коришћење посматрача у овој ситуацији може довести до споријег времена учитавања и тежег отклањања грешака само зато што укључује више кода.

Не користите посматраче као замену за израчуната својства. Користите посматраче да надгледате и реагујете на промене података и израчунате својства када желите да изведете нове податке из постојећих реактивних података.

Непосредна опција је конфигурација коју можете користити када креирате посматрач. Ова опција одређује да ли посматрач треба да покрене свој повратни позив одмах након што Вуе монтира компоненту.

Ево примера компоненте која користи посматрач са тренутном опцијом:

 <script setup>
import { ref, watch } from 'vue';const count = ref(10);
watch(
  count,
  (newCount, oldCount) => {
    console.log(`Count changed from ${oldCount} to ${newCount}`);
  },
  { immediate: true }
);
</script>

У горенаведеном фрагменту, посматрач ће извршити повратни позив одмах након иницијализације компоненте и пријавити „Број промењен са недефинисаног на 10“ у конзолу. Ово показује да је почетна променљива била недефинисана пре него што је Вуе убацио вредност 10 у број реф.

Непосредна опција може бити згодна у сценаријима у којима желите да извршите почетну акцију или иницијализацију на основу тренутне вредности посматраног својства. На пример, када вам је потребна апликација да преузме податке из АПИ-ја када Вуе монтира компоненту.

Опција Дееп доступна у Вуе Ватцхерс-у

Опција Дубока доступна када радите са посматрачима у Вуе-у омогућава дубоко посматрање промена унутар угнежђених објеката или низова. Када је постављено на тачно, посматрач може да открије промене унутар угнежђених својстава.

Како променити подразумевани ПлаиСтатион начин плаћања

Ево примера Вуе компоненте са опцијом дееп:

 <script setup>
import { ref, watch } from 'vue';const data = ref({ length: 42 });
watch(
  data,
  (newData, oldData) => {
    console.log(`Data changed"`);
  },
  { deep: true }
);
// This will trigger the watcher because it's a deep change
data.value.length = 43;
</script>

Исечак изнад иницијализује реф података са објектом који садржи својство дужине. Исечак поставља опцију дееп на труе. Затим на конзоли евидентира да су се подаци променили пошто је својство дужине промењено на 43.

Без опције дееп постављене на труе, функција гледања неће приметити никакве промене на објекту. Међутим, Вуе прати све угнежђене и дубоке промене без дубоке опције када иницијализујете променљиву података као реактивни објекат:

 <script setup>
import { ref, watch } from 'vue';const data = reactive({ length: 42 });
watch(
  data,
  (newData, oldData) => {
    console.log(`Data changed"`);
  }
);
// This will trigger the watcher because it changes a reactive object
data.length = 43;
</script>

Функција посматрања у горњем исечку ће пријавити на конзолу да су подаци промењени јер је променљива података реактивни објекат.

Направите боље апликације помоћу Вуе Ватцхерс-а

Вуе-ови посматрачи могу вам помоћи да постигнете фину реактивност у вашим апликацијама. Они контролишу како можете да посматрате промене у својствима података и покрећете прилагођену логику као одговор.

Разумевање када треба користити посматраче, њихове разлике у односу на израчуната својства и опције као што су тренутни и дубоки могу значајно да побољшају вашу способност да направите Вуе апликације са веома брзим одзивом.