基础/响应式基础-reactive篇

另一种声明响应式状态的方法是通过 reactive API

import { reactive } from 'vue'

const state = reactive({ count: 0 })

响应式对象是 JavaScript 代理，其行为就和普通对象一样。不同的是，Vue 能够拦截对响应式对象所有属性的访问和修改，以便进行依赖追踪和触发更新。

这句话的意思是：我们通过 reactive 创建一个变量如：const state = reactive({ count: 0 })，然后我们修改这个变量内部的属性的值如：state.count = 5，Vue能自动监测到变化，并更新DOM。又是我们之前说的 响应性，只不过在这里告诉你可以通过 reactive 来声明这种带有响应性的数据（ref声明的变量同样具有响应性）。还记得什么是 声明式渲染吗？

reactive() 将深层地转换对象：当访问嵌套对象时，它们也会被 reactive() 包装。当 ref 的值是一个对象时，ref() 也会在内部调用它。

上面说 reactive 声明响应式状态 Vue 能监测到内部属性的变化，这里又说内部嵌套对象也会被 reactive() 包装，总结就是：通过 reactive 创建的响应式数据，不管这个对象嵌套多少层，每次访问内部属性都会被Vue监测到，这就是深层响应性。值为对象通过 ref 创建的响应式数据也是一样具有深层响应性，例如：

// 通过 ref 或者 reactive 声明变量，传递嵌套对象
const data = ref({
  info: {
    name: 'lorem'
  },
  list: [1,2,3]
})

const baz = reactive({
  info: {
    name: 'lorem'
  },
  list: [1,2,3]
})

// 我们修改最外层属性的值，Vue可以监测到变化
data.value.info = {
  name: '小明'
}

// 同样我们访问嵌套对象深层属性的时候，Vue同样可以监测到，页面依然正常更新
data.value.info.name = '小红'
baz.list.push(4)

Vue2创建响应式数据，如果是对象，初始化的时候就要给定内部属性，不然后期添加响应式属性只能通过 $set 的方式，数组也要使用 Vue 封装之后的 push、pop、splice 等方法。

相比之下，Vue3 的响应性使用起来更方便。

与 ref 的区别

• 访问通过 reactive 声明的变量不需要访问 .value

  import { reactive } from 'vue'
  
  const state = reactive({ count: 0 })
  
  function increment() {
    state.count++
  }
  

使用 reactive 需要注意的地方

• reactive 只接收对象类型的参数包括(对象、数组、Set、Map、WeakSet、WeakMap)
• 解构时通过 toRef、 toRefs 使解构出来的变量成为通过 ref() 创建的响应式数据