Vue3——ref和reactive的使用

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

在前后端分离项目中，前端获取后端返回的数据时，如何将数据赋值给一个属性呢？我们可以用到 ref() 和 reactive() 来实现。

---

一、响应式系统

这里我们先引入 Vue 的核心——响应式系统。
Vue 最标志性的功能就是其低侵入性的响应式系统。组件状态都是由响应式的 JavaScript 对象组成的。当更改它们时，视图会随即自动更新。
这里就有ref()和reactive()的用武之地了。

二、响应式基础

1.ref()

接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value。
ref 对象是可更改的，也就是说你可以为 .value 赋予新的值。它也是响应式的，即所有对 .value 的操作都将被追踪，并且写操作会触发与之相关的副作用。

• 示例

const number = ref()
console.log(number.value) // 0

number.value++
console.log(number.value) // 1

提示：如果在使用number的时候，一定不要忘了加.value

2.reactive()

返回一个对象的响应式代理。

• 示例
  创建一个响应式对象：

const people = reactive({name: '', age: ''})
<p>{{ people.name }}</P>
<p>{{ people.age}}</P>

const setPeople = () => {
	people.name = 'tom';
	people.age = 12
}

console.log(people.name) // tom
console.log(people.age) // 12

---

总结

如果要创建一个属性，并需要更改它的值的情况下，可以使用 ref() 来声明一个属性。如果要创建一个对象的话，使用 reactive() 进行创建。