Vue3入门指北（三）ref和reactive

前言

在Vue2.x中，我们只需要通过在data选项中定义我们需要使用的数据，这些数据就会变成响应式的数据，使用的时候会动态响应。但是如果你在data中声明一个对象时，你会发现，你对对象的属性进行增加或者删除等操作时，在使用时并不会进行相应的更改的。而在vue3中对这一响应式行为，进行全新的修改。下面就让我们看看，在vue3中是对于响应式的处理是如何的。

reactive()

我们可以使用 reactive() 函数创建一个响应式对象或数组：

在Vue3中，我们如果想要声明一个响应式的对象或者数组时，其提供了一个新的api来实现：

import { reactive } from 'vue'
const state = reactive({ count: 0 })
复制代码

通过reactive声明的对象，和普通对象一样。区别在于解决在vue2.x中对对象属性的增加或删除无法监听的问题，也就是说在vue3中通过其声明的对象，可以跟踪对象属性的增加或删除等操作。当然对实现原理感兴趣的话，可以查看官网和源码。

ref()

而如果你想得到一个响应式的变量。vue3也提供了一个新的api让我们对任何类型的数据，创建响应式的变量：

import { ref } from 'vue'
const count = ref(0)
复制代码

而对于响应式的变量访问或者修改等操作，需要通过.value形式来处理：

const count = ref(0)
console.log(count) // { value: 0 }
console.log(count.value) // 0
count.value++
console.log(count.value) // 1
复制代码

当然这么处理，也是因为 JavaScript对于基本数据类型，也就是值类型数据没用类似引用的机制。

不过，你在template中使用ref声明的响应式变量的时候，并不需要通过.value的形式，因为当 ref 在模板中作为顶层属性被访问时，它们会被自动“解包”。