On gists

Vue.js: ShallowRef by MichaelThiessen

Vue.js

ShallowRef.vue Raw #

<script setup>
import { shallowRef, watchEffect, triggerRef } from 'vue'

  const user = shallowRef({
    name: 'John',
    job: 'BFU',
    age: 90
  })

// Log the user whenever it changes
  watchEffect(() => {
    console.log('LOG: watchEffect', user)
  });
 
 // Update nested state (no log happens)
 setTimeout(() => {
   user.value.name = 'Martin';
   console.log('LOG: user name changed')
 }, 2000)
 
 
 // Force a reactive update to trigger
  setTimeout(() => {
    triggerRef(user);
    console.log('LOG: whole object changed')
  }, 4000)

  // [user object]
</script>

<