Kcko

// 1) cleanup when watch is ended
import { watch, onWatcherCleanup } from 'vue'

watch(id, (newId) => {
  const { response, cancel } = doAsyncWork(newId)
  // `cancel` is called if `id` changes or the component unmounts
  onWatcherCleanup(cancel)
})

Kcko

<!-- https://play.tailwindcss.com/yyRSjWdDIv -->

<section class="m-5 *:mb-2 *:border *:text-red-400 [&_p]:text-blue-500">
  <div>text1</div>
  <div>text2</div>
  <div>text3</div>
  <div>text4</div>
  <div>text5</div>
  <p>Para 1</p>
  <p>Para 2</p>

Kcko

/*
Why It’s a Problem:
Direct DOM manipulation triggers reflows and repaints, slowing down rendering.
Inserting elements one by one instead of batching updates increases the number of re-renders.
Modifying styles directly forces layout recalculations.
*/

// BAD: Multiple reflows
for (let i = 0; i < 1000; i++) {
    const div = document.createElement('div');

Kcko

<!-- works only for color from config not defined like css variables -->

<!--v2 -->
<div class="ring-msp-red-default/30"></div>

<!--v3 -->
<div class="ring-msp-red-default ring-opacity-30"></div>

<!-- Hack if color is defined like css variable in config -->
'my-red': 'var(--primary-color)', // '#ba0c2f',

Kcko

Výhody dynamických importů v JavaScriptu

Výhody dynamických importů

1. Code splitting (rozdělení kódu)

Místo načtení celé aplikace najednou můžeš načítat moduly až když jsou potřeba:

// Běžný statický import

Kcko

export default defineEventHandler(async (event) => {
  try {
    // Získání dat z externího API
    const products = await $fetch('https://externi-api.com/products', {
      headers: {
        'Authorization': `Bearer ${process.env.API_KEY}`
      }
    })
    
    return products.map(product => ({

Kcko

// 1
await new Promise(resolve => setTimeout(resolve, 1000)); // wait for 1 sec


// 2
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
   
   

Kcko

<?php

libxml_use_internal_errors(true);
 
$data = file_get_contents('https://www.psidetektiv.cz/ztracena-zvirata/');

// Load HTML into DOMDocument
$dom = new DOMDocument();
$dom->loadHTML($data, LIBXML_NOERROR | LIBXML_NOWARNING);
$finder = new DomXPath($dom);

Kcko

<!-- 1. PROPS  -->

<!-- JS -->
<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  foo: { type: String, required: true },
  bar: Number,
});

Kcko

<!-- https://www.vuemastery.com/courses/component-design-patterns/one-object-to-rule-them-all -->

<!-- To heavy , to complicated, all props we dont need ...-->
<template>
  <main>
    <Component 
      v-for="content in apiResponse"
      :key="content.id"
      :is="content.type"
      :article-title="content.title"