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