Vue.js

Appearance

Obsah stránky

Základy reaktivity ​

API preference

Tato stránka a mnoho dalších kapitol dále v průvodci obsahuje různý obsah pro Options API a Composition API. Vaše aktuální preference je Options APIComposition API. Mezi API styly můžete přepínat pomocí přepínače "API preference" vlevo nahoře.

Deklarace reaktivního stavu ​

S Options API používáme k deklaraci reaktivního stavu komponenty vlastnost data. Hodnota vlastnosti by měla být funkce, která vrací objekt. Vue zavolá funkci při vytváření nové instance komponenty a zabalí vrácený objekt do svého systému reaktivity. Jakékoli vlastnosti nejvyšší úrovně tohoto objektu jsou proxy na instanci komponenty (this ve funkcích a lifecycle hooks):

js
export default {
  data() {
    return {
      count: 1
    }
  },

  // `mounted` je lifecycle hook, který bude popsán později
  mounted() {
    // `this` odkazuje na instanci komponenty
    console.log(this.count) // => 1

    // data lze rovněž měnit
    this.count = 2
  }
}

Vyzkoušejte si to

Tyto vlastnosti instance jsou přidány pouze při prvním vytvoření instance, takže musíte zajistit, aby byly všechny přítomny v objektu vráceném funkcí data. V případě potřeby použijte hodnotu null, undefined nebo jinou zástupnou hodnotu pro vlastnosti, u nichž požadovaná hodnota ještě není k dispozici.

Je možné přidat novou vlastnost přímo do this, aniž byste ji zahrnuli do data. Vlastnosti přidané tímto způsobem však nebudou moci vyvolat reaktivní aktualizace.

Vue používá předponu $, když vystavuje své vlastní vestavěné API prostřednictvím instance komponenty. Také si vyhrazuje předponu _ pro interní vlastnosti. U vlastností nejvyšší úrovně v data byste se měli vyhnout používání názvů, které začínají jedním z těchto znaků.

Reaktivní proxy vs. originál ​

Ve Vue 3 jsou data reaktivní s využitím JavaScript proxies. Uživatelé zvyklí na Vue 2 by si měli dát pozor na následující speciální případ:

js
export default {
  data() {
    return {
      someObject: {}
    }
  },
  mounted() {
    const newObject = {}
    this.someObject = newObject

    console.log(newObject === this.someObject) // false
  }
}

Když přistupujete k this.someObject po přiřazení hodnoty, tato hodnota je reaktivní proxy původního newObject. Na rozdíl od Vue 2 je původní newObject ponechán nedotčený a nebude reaktivní: ujistěte se, že vždy přistupujete k reaktivnímu stavu jako vlastnosti objektu this.

Deklarace reaktivního stavu ​

ref() ​

V rámci Composition API je doporučený způsob deklarace reaktivního stavu použitím funkce ref():

js
import { ref } from 'vue'

const count = ref(0)

ref() přijímá vstupní parametr a vrací jej obalený uvnitř ref objektu s vlastností .value:

js
const count = ref(0)

console.log(count) // { value: 0 }
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

Viz také: Typování Refs

Chcete-li použít reaktivní stav v šabloně komponenty, deklarujte a vraťte jej z funkce setup() v komponentě:

js
import { ref } from 'vue'

export default {
  // `setup` je speciální hook určený pro Composition API.
  setup() {
    const count = ref(0)

    // zpřístupnit stav pro šablonu komponenty
    return {
      count
    }
  }
}
template
<div>{{ count }}</div>

Všimněte si, že jsme nepotřebovali přidat .value při použití ref v šabloně. Pro větší pohodlí jsou refs v šabloně automaticky rozbaleny (unwrapped) - s několika omezeními.

Můžete také měnit ref přímo v event handlerech:

template
<button @click="count++">
  {{ count }}
</button>

Pro komplexnější logiku můžeme deklarovat funkce, které mění refs ve stejném scope, a vystavit je jako metody napříč stavem:

js
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    function increment() {
      // v JavaScriptu je .value nutné
      count.value++
    }

    // nezapomeňte funkce vystavit
    return {
      count,
      increment
    }
  }
}

Vystavené funkce se obvykle používají jako event listenery:

template
<button @click="increment">
  {{ count }}
</button>

Tady je živá ukázka na Codepen, bez použití build nástrojů.

<script setup>