Let's step away from our shopping list app for just a moment to get a grasp on the fundamentals of Vue's reactivity system. We've been using RAP throughout this course in order to define reactive data for our app. This is necessary because Vue has to set up JavaScript proxies in order to listen in to the reading and writing of our data. That way, it can do the reactive things that it does.
But did you know that there's an alternative function to ref called reactive? Well, reactive works a whole lot like ref does, except that it only works for non-primitive data types. That is, data types like objects and arrays. For example, let's create a variable called state.
And I'll set it equal to an object. on which I'll call reactive. Then we'll give that object a property of count, and we'll set it equal to zero. count.
Now let's get rid of that input and instead provide a button to increment our count. count++. All right, over on the right-hand side, when we click the button, sure enough, it increments as we'd expect. All right, this doesn't look a whole lot different from ref so far, but there are a couple major differences.
The biggest difference is that we don't have to use the dot value property that you've seen when we use ref. Let's see that. Here, I'll create a method to increment our count for us. count.
value or anything like that needed. All right, let's use our function as the event handler now. Sure enough, it still works. You might be wondering then, why would I ever use ref and not just use reactive so I don't have to think about the dot value?
Well, there are a couple of reasons. The most obvious one is that reactive just won't work with primitives. Thus, state here couldn't be a string. nor could it be a number or a boolean.
Therefore, for all such primitive values, you'll have to use ref or find some kind of larger object for that primitive to live in, like our count did. The second downside of reactive is that it's not easily replaced. Let me show you. Inside the increment function, instead of incrementing count directly, I'll set state to a whole new object.
Then I'll set its count property to the incremented count. And state has to be defined with let so that we can override it. Now when I try it out on the right-hand side, Yeah, the number is no longer incrementing. While overriding the entire reactive variable state in our instance doesn't really make a whole lot of sense, there are other cases where you really want to be able to do it.
Thus, that's why ref exists. Just a small tip, a lot of people will go ahead and use ref for everything, even their arrays and objects. That way, they just get used to using dot value all the time, and they don't have to think about, should I use it or should I not? But really, it's personal preference and totally up to you.
Lastly, one thing that you've probably already noticed throughout the course is that while dot value is required for refs in the script section, Vue does what's called automatic unwrapping of those refs in the template section. That way, you don't have to specify dot value inside of the template. That's the fundamentals of reactivity in Vue.