04. Default value of toref

This lesson , Let's take a look toRef The default value of .

We know toRef Can be used for a source responsive object property Create a new ref, then ref Can be delivered , It will stay focused on its source property Responsive connection for .

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

const state = reactive({
  foo: 1,
  bar: 2,
})

const fooRef = toRef(state, 'foo')

fooRef.value++
console.log(state.foo) // 2

state.foo++
console.log(fooRef.value) // 3
</script>

Here we are state Object's foo Property to create a named fooRef Of ref, When we fooRef.value++ when , here state.foo The value of also changes , because toRef Will maintain the response connection to its source object properties , therefore , When state.foo When the value changes ,fooRef The value of will change .

These points , I'm sure you all know that .

but toRef You can also provide a default value , This point may be relatively rare .

Let's take an example , Suppose we want to be state Object's car Property to create a named carRef Of ref,