Vue reactive()方法

适用范围:

1. 不适用的场景:

1. 对 对象、数组和 Map、Set 这样的集合类型 无效
2. 解决方案： 2. 数组作为一个Vue 响应式引用
   1. 当数组增删元素时引发响应式 3. 每个数组元素都是响应式变量
   2. 当数组修改元素深层内容的时候，使用该元素的页面也响应式变更
3. 对 string、number 和 boolean 这样的 原始类型 无效

梗概:

将一个对象转换为响应式对象

1. 属于引用值, 功能等同于ref返回的响应式引用

实例:

1. 将任意对象都转换为响应式对象:

import { reactive } from 'vue'
interface Obj {
	name1: number,
		name2: number,
		name3: {
				name31: number,
		}
}
let obj:Obj=reactive({//会自动做类型推断,这里是显示标注类型
    name1: 0,
    name2: 666,
    name3: {
        name31: 888,
    }
})
obj.name3.name31++;
console.log(obj.name3.name31);//889

2. 自动解包对象中的响应式引用:

2.1. 之一:

const count = ref(1)
const obj = reactive({ count })
 
// ref 会被解包
console.log(obj.count === count.value) // true
 
// 它会更新 `obj.count`
count.value++
console.log(count.value) // 2
console.log(obj.count) // 2
 
// 它也会更新 `count` ref
obj.count++
console.log(obj.count) // 3
console.log(count.value) // 3

2.2. 之一:

const count = ref(1)
const obj = reactive({})
 
obj.count = count
 
console.log(obj.count) // 1
console.log(obj.count === count.value) // true