ref和reactive

一，前言

1.ref和reactive是vue3基于组合式api模式下，在setup中用于声明的具有响应式的数据的方法。

二，ref

1.ref通常用于声明基础类型响应式数据。

import { ref } from 'vue' 

const age =ref(10) //声明响应式数据

2.ref返回的是被包装过的响应式对象，在setup中访问和修改ref需要使用.value属性

age.value=21

3.在模板中使用ref时vue3会自动将ref对象拆解为原始值（setup里ref对象的value属性值），一定要知道模板上的ref不在是对象，没有.value属

<div>{{age}}</div>

4.上面的自动解包只在顶级属性中生效，当我们使用了hook的设计时，返回的ref不会自动解包

const object = { foo: ref(1) } //foo不是顶级元素，在template中使用object.foo 不会自动解包

三，reactive

1.reactive用于声明复杂类型响应式数据。

import {reactive} from 'vue'

const man=ref({name:'jolin',age:21}) //声明响应式数据

2.reactive返回的是被包装过的响应式对象，在setup中访问和修改直接使用属性即可

man.age=20

3.声明时未定义，动态添加的属性也会是响应式的

man.weight = '50kg' //weight具有响应性

4.在模板中使用属性的形式

<div>{{man.name}}</div>

四，注意事项

1.注意不能解构reactive数据，解构出的数据会失去响应式。

2.在任何地方访问响应式数据都能拿到最新的。

3.同vue2的data，只有数据被应用到模板中时，数据的改变才会触发updated生命周期，否则即使数据被修改了，也不会触发updated生命周期，导致视图不更新。

五，使用typescript为ref和reactive标注类型

1.如果不使用typescript可忽略

2.可以使用泛型参数为ref标注类型，注意指定了一个泛型参数但没有给出初始值，那么最后得到的就将是一个包含 undefined 的联合类型

const ins = ref<number>(1)

const ins1 = ref<string>() // ins 是 string | undefined

3.使用接口为reactive标注类型

interface Table{
	total:number,
	data:any[] | []
}

const table:Table = reactive({
	total:100,
	data:[{...}...]
})

六，标注一个ref和reactive类型

1.除了为ref和reactive里的数据标注类型之外，本身ref和reactive在vue3中也是一种类型，

2.标注一个ref类型

import type { Ref } from 'vue'
const a=ref<number>(1)
const b:Ref<number> = a

3.标注一个reactive类型

import { reactive} from 'vue'
const a=reactive({})
const b:ReturnType<typeof reactive<Record<string,any>>> = a