Working with data

In the Options API, we use the data() method to initialize a component’s local state. By default, all the data properties received from data() are reactive, which can be overkill in many scenarios. Vue has introduced the ref() and reactive() functions, which allow us to decide which local states should be reactive and which shouldn’t be.

Setting a reactive local state with ref()

ref() is a function that accepts a single input parameter as the reactive data’s initial value and returns a reference object for the created reactive data state. We call this reference object a ref object. To start using ref(), you first need to import it from the vue package.

For example, we can create a reactive data called isLightOn, which accepts false as its initial value as follows:

import { ref } from 'vue';
const isLightOn = ref(false);

In the template section, you can access the value of isLightOn in the same way as before, as shown in...