03. 变量

响应式对象和数组：reactive

<template>
  <div>{{ state.count }}</div>
</template>
 
<script setup>
import { reactive } from 'vue'
const state = reactive({ count: 0 })
</script>

state 是什么？

是原始对象的 Proxy，它和原始对象是不相等的

reactive 是默认深层响应式的，改变深层次的对象或数组，改动也能被检测到。（可以通过使用 shallowReactive 放弃深层响应性）

局限

• 仅对对象类型有效（对象、数组和 Map、Set 这样的集合类型），而对 原始类型 无效
• 将响应式对象的属性做赋值操作给一个变量，再修改这个变量不会产生响应式变化

let a = state.count
a = 1 // 不会响应式变化

响应式变量：ref

创建可以使用任何值类型的响应式

<template>
  <div>{{ count }}</div>
</template>
 
<script setup>
import { ref } from 'vue'
const count = ref(1)
 
console.log(count) // { value: 1, ... }
console.log(count.value) // 1
 
count.value++ // 2
 
const newCount = count
console.log(newCount) // { value: 2, ... }
newCount.value = 111 // 111
</script>

ref 是什么？ ref() 将传入参数的值包装为一个带 .value 属性的 ref 对象

ref 是默认深层响应式的，改变深层次的对象或数组，改动也能被检测到。（可以通过使用 shallowRef 放弃深层响应性）

自动解包

不用写 .value

• template 中的顶层属性
• 作为 reactive 响应式对象的属性被访问或修改时自动解包