On gists

Vue advanced

Vue.js

advanced.js Raw #

/*
onScopeDispose - Podobně jako onWatcherCleanup, ale obecnější. 
Zavolá se, když je aktuální reaktivní efektový scope (effect scope) ukončen. 
Je to užitečné pro čištění zdrojů v jakémkoliv reaktivním kontextu:
*/

// 1
import { onScopeDispose, effectScope } from 'vue'

// Vytvoření izolovaného scope
const scope = effectScope()

scope.run(() => {
  // Kód uvnitř scope
  
  onScopeDispose(() => {
    // Tento kód se zavolá při scope.stop()
  })
})

// Později můžete ukončit scope
scope.stop()




// 2) 
const scope = effectScope()

scope.run(() => {
  const state = reactive({ count: 0 })
  const double = computed(() => state.count * 2)
  watch(() => state.count, (count) => console.log(count))
})

// Později ukončí všechny reaktivní efekty
scope.stop()

example2.js Raw #

// https://play.vuejs.org/#eNqNVE1v2kAQ/SujvUAkgg/tKTKoXzkQKSFK0p72YuwBnNi7K++uA0X8hN4r5dRjD/0VIf+rs2vsGIJQDgh23pu3854Hr9hnpfqlRXbGQh0XqTKg0Vg15CLNlSwMrACnU4zNbSwV9kAK/+NbqpXUdH6MTDw/94ztoQcFTmEN00Lm0CHtDhdcBAFcU2HzJMTzX7gcXY5BOyE4hURqutGVSzCYqywyyEUshTYgi3SWiiiDgVPtdm6iXKPunNR46/qRUNZsebv4HlJj1f2Dtr8K9kC/sKLbPYHBEFZcAJCBCxRbsobvP65Gdy+/GxNmScHBxCbSQuLDkWVEdyiZ4eaX2Dw5jda0bekdwA/bL6PMutlq/1XBkdc04rahW6M9eKv2Hh33adIwUhGxJVTF4OpUJPs/I22i8vkflC9/MJ6LZRNGWXFJ0OntrshehvuiAicSTJQsq2nCoNpC2j861NtAJ4BxvQph6p9neZrLBLMBZ7U5ziAYQjgp6Gsv7moF3nTuMw4qHOs90OX6XhXCiTVGCvgUZ2n8QG3OOmdDH7eXSMUsDCoWdYRBY5r1mKG4xDSd9e+1FPQf9SlyFstcpRkWY2VSenicndWPnrMoy+Tjha+ZwmKvrsdzjB8O1O/1wtU4uy5QY1EiZw1momKGZM/B57dXuKDfDUg52IzYR8Ab1DKzbsaK9sWKhMZu8fy0I/+moRzu9PnCoNC1KTeo31XP54xeJl+PWH8d90P/o++jpWLr/54urhw=
<script setup>
import { effectScope, onScopeDispose, watchEffect, watch, ref } from 'vue'

// Proměnné MIMO scope - dostupné v template
const original = ref('Ramses')
const watchEffectInput = ref()
const watchInput = ref()

const scope = effectScope()

scope.run(() => {
  // Jen effects UVNITŘ scope - ty se budou disposovat společně
  watchEffect(() => {
    watchEffectInput.value = original.value
  })
  watch(original, () => {
    watchInput.value = original.value
  })
})

const stop = () => {
  scope.stop() // zastaví všechny effects v scope
}

onScopeDispose(() => {
  // scope.stop() // nebo tady
})
</script>

<template>
  Original <input v-model="original" /> <br />
  watchEffectInput <input v-model="watchEffectInput" /> <br />
  watchInput <input v-model="watchInput" /> <br />

  <br />
  <button @click="stop">stop watching</button>
</template>