2 - ref family

[ricardoHer]

// your answers

<script setup lang="ts"> import { ref, Ref, reactive, isRef, unref, toRef } from "vue" const initial = ref(10) const count = ref(0) // Challenge 1: Update ref function update(value) { // impl... count.value = value; } /** * Challenge 2: Check if the `count` is a ref object. * Make the output be 1 */ console.log( isRef(count) ? 1 : 0 ) /** * Challenge 3: Unwrap ref * Make the output be true */ function initialCount(value: number | Ref) { // Make the output be true console.log('Initial count:', unref(value) === 10) } initialCount(initial) /** * Challenge 4: * create a ref for a property on a source reactive object. * The created ref is synced with its source property: * mutating the source property will update the ref, and vice-versa. * Make the output be true */ const state = reactive({ foo: 1, bar: 2, }) const fooRef = toRef(state, 'foo') // change the impl... // mutating the ref updates the original fooRef.value++ console.log('Foo: ', state.foo === 2) // mutating the original also updates the ref state.foo++ console.log('Foo 2: ', fooRef.value === 3) </script>