Uygulama APIsi

Uygulama API'si

createApp()

Bir uygulama örneği oluşturur.

• Tip

  function createApp(rootComponent: Component, rootProps?: object): App

• Ayrıntılar

  İlk argüman, kök bileşendir. İkinci isteğe bağlı argüman, kök bileşene iletilecek özelliklerdir.

• Örnek

  Inline kök bileşeni ile:

  import { createApp } from 'vue'
  
  const app = createApp({
    /* kök bileşen seçenekleri */
  })

  İçe aktarılan bileşen ile:

  import { createApp } from 'vue'
  import App from './App.vue'
  
  const app = createApp(App)

• Ayrıca bakınız Kılavuz - Vue Uygulaması Oluşturma

createSSRApp()

SSR Hidratasyonu modunda bir uygulama örneği oluşturur. Kullanımı tam olarak aynı şekilde createApp() ile.

app.mount()

Uygulama örneğini bir konteyner elementine monte eder.

• Tip

  interface App {
    mount(rootContainer: Element | string): ComponentPublicInstance
  }

• Ayrıntılar

  Argüman, ya gerçek bir DOM elemanı ya da bir CSS seçici olabilir (ilk eşleşen eleman kullanılacaktır). Kök bileşen örneğini döndürür.

  Eğer bileşenin bir şablonu veya bir render fonksiyonu tanımlanmışsa, konteyner içindeki mevcut DOM düğümlerinin yerini alacaktır. Aksi takdirde, eğer çalışma zamanı derleyicisi mevcutsa, konteynerin innerHTML'si şablon olarak kullanılacaktır.

  SSR hidratasyon modunda, konteyner içindeki mevcut DOM düğümlerini hidrante edecektir. Eğer uyumsuzluklar varsa, mevcut DOM düğümleri beklenen çıktıya uyması için şekillendirilecektir.

  Her uygulama örneği için, mount() yalnızca bir kez çağrılabilir.

• Örnek

  import { createApp } from 'vue'
  const app = createApp(/* ... */)
  
  app.mount('#app')

  Gerçek bir DOM elemanına da monte edilebilir:

  app.mount(document.body.firstChild)

app.unmount()

Monte edilmiş bir uygulama örneğini kaldırır ve uygulamanın bileşen ağacındaki tüm bileşenler için kaldırma yaşam döngüsü kancalarını tetikler.

• Tip

  interface App {
    unmount(): void
  }

app.onUnmount()

Uygulama kaldırıldığında çağrılacak bir geri çağırma kaydeder.

• Tip

  interface App {
    onUnmount(callback: () => any): void
  }

app.component()

Hem bir ad dizgesi hem de bir bileşen tanımı geçirilirse küresel bir bileşeni kaydeder veya yalnızca ad geçilirse daha önce kaydedilmiş bir bileşeni alır.

• Tip

  interface App {
    component(name: string): Component | undefined
    component(name: string, component: Component): this
  }

• Örnek

  import { createApp } from 'vue'
  
  const app = createApp({})
  
  // bir seçenek nesnesi kaydet
  app.component('my-component', {
    /* ... */
  })
  
  // kaydedilmiş bir bileşeni al
  const MyComponent = app.component('my-component')

• Ayrıca bakınız Bileşen Kaydı

app.directive()

Hem bir ad dizgesi hem de bir yönerge tanımı geçirilirse küresel bir özel yönerge kaydeder veya yalnızca ad geçilirse daha önce kaydedilmiş bir yönergeyi alır.

• Tip

  interface App {
    directive(name: string): Directive | undefined
    directive(name: string, directive: Directive): this
  }

• Örnek

  import { createApp } from 'vue'
  
  const app = createApp({
    /* ... */
  })
  
  // kaydet (nesne yönergesi)
  app.directive('my-directive', {
    /* özel yönerge kancaları */
  })
  
  // kaydet (fonksiyon yönerge kısa yolu)
  app.directive('my-directive', () => {
    /* ... */
  })
  
  // kaydedilmiş bir yönergeyi al
  const myDirective = app.directive('my-directive')

• Ayrıca bakınız Özel Yönergeler

app.use()

Bir eklenti yükler.

• Tip

  interface App {
    use(plugin: Plugin, ...options: any[]): this
  }

• Ayrıntılar

  Eklentiyi ilk argüman olarak ve isteğe bağlı eklenti seçeneklerini ikinci argüman olarak bekler.

  Eklenti, bir install() yöntemine sahip bir nesne ya da install() yöntemi olarak kullanılacak bir fonksiyon olabilir. app.use()'nin ikinci argümanı olan seçenekler, eklentinin install() yöntemine iletilecektir.

  Aynı eklenti üzerine app.use() birçok kez çağrıldığında, eklenti yalnızca bir kez yüklenir.

• Örnek

  import { createApp } from 'vue'
  import MyPlugin from './plugins/MyPlugin'
  
  const app = createApp({
    /* ... */
  })
  
  app.use(MyPlugin)

• Ayrıca bakınız Eklentiler

app.mixin()

Küresel bir karışım (uygulamayla sınırlı) uygular. Küresel bir karışım, içerdiği seçenekleri uygulamadaki her bileşen örneğine uygular.

Tavsiye Edilmez

Karışımlar Vue 3'te ana olarak geriye dönük uyumluluk için desteklenmektedir, çünkü ekosistem kütüphanelerinde yaygın olarak kullanılmaktadır. Karışımların, özellikle küresel karışımların, uygulama kodunda kullanılmasından kaçınılmalıdır.

Mantık yeniden kullanımı için, bunun yerine Kompozitler tercih edilmelidir.

• Tip

  interface App {
    mixin(mixin: ComponentOptions): this
  }

app.provide()

Uygulama içindeki tüm alt bileşenlerde enjekte edilebilen bir değeri sağlar.

• Tip

  interface App {
    provide<T>(key: InjectionKey<T> | symbol | string, value: T): this
  }

• Ayrıntılar

  İlk argüman olarak enjekte anahtarını ve ikinci argüman olarak sağlanan değeri bekler. Uygulama örneğini kendisi döndürür.

• Örnek

  import { createApp } from 'vue'
  
  const app = createApp(/* ... */)
  
  app.provide('message', 'hello')

  Uygulamadaki bir bileşen içinde:

import { inject } from 'vue'

export default {
  setup() {
    console.log(inject('message')) // 'hello'
  }
}

export default {
  inject: ['message'],
  created() {
    console.log(this.message) // 'hello'
  }
}

• Ayrıca bakınız
  • Provide / Inject
  • Uygulama Düzeyinde Provide
  • app.runWithContext()

app.runWithContext()

• 3.3+ sürümünde yalnızca desteklenmektedir.

Mevcut uygulamayı enjekte bağlamı olarak kullanarak bir geri çağırmayı çalıştırır.

• Tip

  interface App {
    runWithContext<T>(fn: () => T): T
  }

• Ayrıntılar

  Bir geri çağırma fonksiyonu bekler ve geri çağırmayı hemen çalıştırır. Geri çağırmanın senkron çağrısı sırasında, inject() çağrıları mevcut uygulamanın sağladığı değerlerden enjekte edilenleri arayabilir, mevcut etkin bileşen örneği olmadan bile. Geri çağırmanın döndürdüğü değer de döndürülecektir.

• Örnek

  import { inject } from 'vue'
  
  app.provide('id', 1)
  
  const injected = app.runWithContext(() => {
    return inject('id')
  })
  
  console.log(injected) // 1

app.version

Uygulamanın oluşturulduğu Vue sürümünü sağlar. Bu, eklenti içindeki koşullu mantık için kullanışlıdır, farklı Vue sürümlerine dayanan.

• Tip

  interface App {
    version: string
  }

• Örnek

  Bir eklenti içinde sürüm kontrolü yapmak:

  export default {
    install(app) {
      const version = Number(app.version.split('.')[0])
      if (version < 3) {
        console.warn('Bu eklenti Vue 3 gerektiriyor')
      }
    }
  }

• Ayrıca bakınız Küresel API - sürüm

app.config

Her uygulama örneği, o uygulamanın yapılandırma ayarlarını içeren bir config nesnesini sergiler. Uygulamanızı monte etmeden önce özelliklerini (aşağıda belgelenmiştir) değiştirebilirsiniz.

import { createApp } from 'vue'

const app = createApp(/* ... */)

console.log(app.config)

app.config.errorHandler

Uygulama içindeki yakalanmamış hatalar için küresel bir işleyici atayın.

• Tip

  interface AppConfig {
    errorHandler?: (
      err: unknown,
      instance: ComponentPublicInstance | null,
      // `info`, Vue'ye özgü bir hata bilgisi,
      // örneğin, hatanın hangi yaşam döngüsü kancasında fırlatıldığı
      info: string
    ) => void
  }

• Ayrıntılar

  Hata işleyici, hatayı, hatayı tetikleyen bileşen örneğini ve hata kaynak türünü belirten bir bilgi dizesini içeren üç argümanı alır.

  Aşağıdaki kaynaklardan hataları yakalayabilir:

  • Bileşen render işlemleri
  • Olay işleyicileri
  • Yaşam döngüsü kancaları
  • setup() fonksiyonu
  • İzleyiciler
  • Özel yönerge kancaları
  • Geçiş kancaları
  ipucu

  Üretimde, 3. argüman (info), tam bilgi dizisi yerine kısaltılmış bir kod olacaktır. Kod ile dize eşleştirmesini Üretim Hata Kodu Referansı kısmında bulabilirsiniz.

• Örnek

  app.config.errorHandler = (err, instance, info) => {
    // hatayı işleme, örneğin bir hizmete raporlama
  }

app.config.warnHandler

Vue'dan gelen çalışma zamanı uyarıları için özel bir işleyici atayın.

• Tip

  interface AppConfig {
    warnHandler?: (
      msg: string,
      instance: ComponentPublicInstance | null,
      trace: string
    ) => void
  }

• Ayrıntılar

  Uyarı işleyici, birinci argüman olarak uyarı mesajını, ikinci argüman olarak kaynak bileşen örneğini ve üçüncü argüman olarak bir bileşen izleme dizesini alır.

  Konsol sesliliğini azaltmak için belirli uyarıları filtrelemek için kullanılabilir. Tüm Vue uyarıları geliştirme sırasında ele alınmalıdır, bu nedenle bu yalnızca belirli uyarılara odaklanmak amacıyla hata ayıklama oturumlarında önerilmektedir ve hata ayıklama tamamlandıktan sonra kaldırılmalıdır.

  ipucu

  Uyarılar yalnızca geliştirme sırasında çalışır, bu nedenle bu yapılandırma üretim modunda yok sayılır.

• Örnek

  app.config.warnHandler = (msg, instance, trace) => {
    // `trace`, bileşen hiyerarşisi izidir
  }

app.config.performance

Bunu true olarak ayarlayın, böylece bileşen başlatma, derleme, render ve yamanma performans izleme özellikle tarayıcı geliştirici araçları performans/takvim panosunda etkinleştirilecektir. Yalnızca geliştirme modunda ve performance.mark API'sini destekleyen tarayıcılarda çalışır.

• Tip: boolean

• Ayrıca bakınız Kılavuz - Performans

app.config.compilerOptions

Çalışma zamanı derleyici seçeneklerini yapılandırın. Bu nesnede ayarlanan değerler, tarayıcı içindeki şablon derleyicisine iletilecek ve yapılandırılan uygulamadaki her bileşeni etkileyecektir. Ayrıca bu seçenekleri compilerOptions seçeneği` kullanarak her bir bileşen bazında da geçersiz kılabilirsiniz.

::: warning Önemli Bu yapılandırma seçeneği yalnızca tam derleme kullanıldığında (yani tarayıcıda şablonları derleyebilen bağımsız vue.js) geçerlidir. Eğer bir yapılandırma seti ile çalışma zamanı yalnızca derleme kullanıyorsanız, derleyici seçenekleri yapılandırma araçları yardımıyla @vue/compiler-dom'a iletilmelidir.

• vue-loader için: derleyici seçeneklerini compilerOptions yükleyici seçeneği ile iletin. Ayrıca vue-cli'de nasıl yapılandırılacağını da görebilirsiniz.

• vite için: @vitejs/plugin-vue seçenekleri aracılığıyla geçirin. :::

app.config.compilerOptions.isCustomElement

Yerel özel elementleri tanımak için bir kontrol yöntemi belirtir.

• Tip: (tag: string) => boolean

• Ayrıntılar

  Etiketin yerel özel bir element olarak ele alınması gerekiyorsa true döndürmelidir. Eşleşen bir etiket için, Vue onu yerel bir element olarak render edecek ve bir Vue bileşeni olarak çözmeye çalışmayacaktır.

  Yerel HTML ve SVG etiketlerinin bu fonksiyonda eşleşmesine gerek yoktur - Vue'nin parser'ı bunları otomatik olarak tanır.

• Örnek

  // 'ion-' ile başlayan tüm etiketleri özel elementler olarak ele al
  app.config.compilerOptions.isCustomElement = (tag) => {
    return tag.startsWith('ion-')
  }

• Ayrıca bakınız Vue ve Web Bileşenleri

app.config.compilerOptions.whitespace

Şablon beyaz alanı yönetim davranışını ayarlar.

• Tip: 'condense' | 'preserve'

• Varsayılan: 'condense'

• Ayrıntılar

  Vue şablonlardaki boşluk karakterlerini kaldırır/sıkıştırır, böylece daha verimli derlenmiş çıktı üretir. Varsayılan strateji "sıkıştır"dır ve aşağıdaki davranışa sahiptir:

  1. Bir elementin içindeki önde/arkada bulunan boşluk karakterleri tek bir boşluğa sıkıştırılır.
  2. Satır sonları içeren elementler arasındaki boşluk karakterleri kaldırılır.
  3. Metin düğümlerindeki ardışık boşluk karakterleri tek bir boşluğa sıkıştırılır.

  Bu seçeneği 'preserve' olarak ayarlamak, (2) ve (3)'ü devre dışı bırakır.

• Örnek

  app.config.compilerOptions.whitespace = 'preserve'

app.config.compilerOptions.delimiters

Şablon içindeki metin interpolasyonu için kullanılan ayırıcıları ayarlar.

• Tip: [string, string]

• Varsayılan: {{ "['\u007b\u007b', '\u007d\u007d']" }}

• Ayrıntılar

  Bu genellikle, mustache sözdizimini kullanan sunucu tarafı çerçeveleriyle çakışmayı önlemek için kullanılır.

• Örnek

  // Ayırıcıları ES6 şablon dizesi stiline değiştirdik
  app.config.compilerOptions.delimiters = ['${', '}']

app.config.compilerOptions.comments

Şablonlardaki HTML yorumlarının muamelesini ayarlar.

• Tip: boolean

• Varsayılan: false

• Ayrıntılar

  Varsayılan olarak, Vue üretim aşamasında yorumları kaldırır. Bu seçeneği true olarak ayarlamak, Vue'nun üretimde bile yorumları korumasını sağlar. Yorumlar her zaman geliştirme süresince korunur. Bu seçenek genellikle Vue'nun diğer kütüphanelerle beraber kullanıldığı durumlarda kullanılır.

• Örnek

  app.config.compilerOptions.comments = true

app.config.globalProperties

Uygulama içindeki herhangi bir bileşen örneğinde erişilebilen küresel özellikleri kaydetmek için kullanılabilecek bir nesne.

• Tip

  interface AppConfig {
    globalProperties: Record<string, any>
  }

• Ayrıntılar

  Bu, Vue 2'nin artık mevcut olmayan Vue.prototype uygulamasının yerini alır. Küresel olan her şey gibi, bu da ihtiyatlı bir şekilde kullanılmalıdır.

  Eğer bir küresel özellik bir bileşenin kendi özelliği ile çakışırsa, bileşenin kendi özelliği daha yüksek önceliğe sahip olacaktır.

• Kullanım

  app.config.globalProperties.msg = 'hello'

  Bu, uygulamadaki herhangi bir bileşen şablonunda ve aynı zamanda herhangi bir bileşen örneğinin this üzerinde msg'yi kullanılabilir hale getirir:

  export default {
    mounted() {
      console.log(this.msg) // 'hello'
    }
  }

• Ayrıca bakınız Kılavuz - Küresel Özellikleri Genişletme

app.config.optionMergeStrategies

Özel bileşen seçenekleri için birleştirme stratejilerini tanımlamak için bir nesne.

• Tip

  interface AppConfig {
    optionMergeStrategies: Record<string, OptionMergeFunction>
  }
  
  type OptionMergeFunction = (to: unknown, from: unknown) => any

• Ayrıntılar

  Bazı eklentiler/kütüphaneler, özel bileşen seçenekleri için (küresel karışımlar ekleyerek) destek ekler. Bu seçeneklerin birden fazla kaynaktan "birleştirilmesi" gerektiğinde özel bir birleştirme mantığı gerektirebilir (örneğin, karışımlar veya bileşen kalıtımı).

  Özel bir seçenek için bir birleştirme stratejisi işlevi, app.config.optionMergeStrategies nesnesine, seçeneğin adını anahtar olarak atayarak kaydedilebilir.

  Birleştirme stratejisi işlevi, o seçeneğin ana bileşen ve çocuk bileşen örneklerinde tanımlanmış değerlerini sırasıyla birinci ve ikinci argümanlar olarak alır.

• Örnek

  const app = createApp({
    // kendisinden gelen seçenek
    msg: 'Vue',
    // karışımdan gelen seçenek
    mixins: [
      {
        msg: 'Merhaba '
      }
    ],
    mounted() {
      // birleştirilmiş seçenekler bu.$options üzerinde açığa çıkar
      console.log(this.$options.msg)
    }
  })
  
  // `msg` için özel bir birleştirme stratejisi tanımlayın
  app.config.optionMergeStrategies.msg = (parent, child) => {
    return (parent || '') + (child || '')
  }
  
  app.mount('#app')
  // 'Merhaba Vue' olarak günlüğe kaydeder

• Ayrıca bakınız Bileşen Örneği - $options`

app.config.idPrefix

Bu uygulama içinde useId() aracılığıyla oluşturulan tüm kimlikler için bir ön ek yapılandırın.

• Tip: string

• Varsayılan: undefined

• Örnek

  app.config.idPrefix = 'my-app'

  // bir bileşende:
  const id1 = useId() // 'my-app:0'
  const id2 = useId() // 'my-app:1'

app.config.throwUnhandledErrorInProduction

Yakalanmamış hataları üretim modunda fırlatmayı zorlayın.

• Tip: boolean

• Varsayılan: false

• Ayrıntılar

  Varsayılan olarak, bir Vue uygulaması içinde fırlatılan ancak açıkça işlenmeyen hataların geliştirme ve üretim modları arasında farklı davranışları vardır:

  • Geliştirme modunda, hata fırlatılır ve uygulamayı muhtemelen çökertir. Bu durum, hatanın daha belirgin hale gelmesi amacıyla geliştirme sırasında fark edilebilsin ve düzeltilebilsin diye vardır.

  • Üretim modunda, hata yalnızca konsola kaydedilir, böylece son kullanıcılar üzerindeki etkiyi en aza indirmek amaçlanır. Ancak, bu, yalnızca üretimde meydana gelen hataların hata izleme hizmetleri tarafından yakalanmasını engelleyebilir.

  app.config.throwUnhandledErrorInProduction'ı true olarak ayarlamak, yakalanmamış hataların üretim modunda bile fırlatılmasını sağlar.