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 在模板中作为顶层属性被访问时，它们会被自动“解包”。