On gists

Watchefffect (Oldvalues & NewValues at the same time ;-))

Vue.js

watchEffect.js Raw #

// onInvalidate

import { watchEffect, ref } from 'vue'

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

    watchEffect((onInvalidate) => {
      const oldValue = count.value // Store the current value as the old value
      onInvalidate(() => {
        const newValue = count.value // Get the new value when the effect is invalidated
        console.log(`Count changed from ${oldValue} to ${newValue}`)
      })
    })

    return { count }
  }
}

reactive-array.js Raw #

// lepsi pres ref() jinak je to docela slozite, ale jde to ...

<script setup>
import { reactive, watchEffect } from 'vue';

const state = reactive([1, 2, 3]);

// Uchováváme předchozí stav
let previousState = [...state];

watchEffect((onInvalidate) => {
  // Ukládáme aktuální stav jako starý, než je efekt invalidován
  const oldState = [...previousState];
  
  onInvalidate(() => {
    const newState = [...state]; // Získání nové hodnoty při invalidaci efektu
    console.log('State changed from', oldState, 'to', newState);
    
    // Aktualizujeme previousState pro další invalidaci
    previousState = [...state];
  });

  // Nutíme efekt ke sledování pole
  state.forEach(item => item);
});

setTimeout(() => {
  state.push(500);
}, 1000);
</script>

<template>
  {{ state }}
</template>