Vue3 reactive

作用：定义一个对象类型的响应式数据。

语法

const proxy = reactive(obj)
接收一个普通对象（或数组），然后返回该普通对象的响应式代理器对象（等同于2.x 的 Vue.observable()）
响应式转换是“深层的”：会影响对象内部所有嵌套的属性。
内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据都是响应式的。

原理

reactive通过使用Proxy来实现响应式（数据劫持）, 并通过Reflect操作源对象内部的数据。（ref中放入对象类型最终也是借助了reactive）

注意：reactive使用时，在代码中需要传递一个对象，否则会抛出异常。如果想要对一个单独的变量使用响应式，可以使用ref。

实例

<template>
  <div class="test-container">
    <div>
      <ul v-for="ele in eleList" :key="ele.id">
        <li>{{ ele.name }}</li>
      </ul>
      <a-button @click="addEle">添加</a-button>
    </div>
    <div>
      <ul v-for="ele in dataObj.todoList" :key="ele.id">
        <li>{{ ele.name }}</li>
      </ul>
      <a-button @click="addTodo">添加</a-button>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from 'vue'

export default {
  setup () {
    // ref
    const eleList = ref([])
    function addEle () {
      let len = eleList.value.length
      eleList.value.push({
        id: len,
        name: 'ref 自增值' + len
      })
    }

    // reactive
    const dataObj = reactive({
      todoList: []
    })
    function addTodo () {
      let len = dataObj.todoList.length
      dataObj.todoList.push({
        id: len,
        name: 'reactive 自增值' + len
      })
    }

    return {
      eleList,
      addEle,
      addTodo,
      dataObj
    }
  }
}
</script>
<style>
.test-container {
  width: 300px;
  margin: 0 auto;
}
</style>

小技巧：
可以直接将数据放入到对象中，然后通过reactive来进行包装，然后在js中就不需要.value去调用和取值了

reactive 对复杂数据进行响应式处理，它的返回值是一个 proxy 对象，在 setup 函数中返回时，可以用 toRefs 对 proxy 对象进行解构，方便在 template 中使用。

所以，以上例子还有另一种写法：

<template>
  <div class="test-container">
    <div>
      <ul v-for="ele in eleList" :key="ele.id">
        <li>{{ ele.name }}</li>
      </ul>
      <a-button @click="addEle">添加</a-button>
    </div>
    <div>
      <ul v-for="ele in todoList" :key="ele.id">
        <li>{{ ele.name }}</li>
      </ul>
      <a-button @click="addTodo">添加</a-button>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from 'vue'

export default {
  setup () {
    // ref
    const eleList = ref([])
    function addEle () {
      let len = eleList.value.length
      eleList.value.push({
        id: len,
        name: 'ref 自增值' + len
      })
    }

    // reactive
    const dataObj = reactive({
      todoList: []
    })
    function addTodo () {
      let len = dataObj.todoList.length
      dataObj.todoList.push({
        id: len,
        name: 'reactive 自增值' + len
      })
    }

    return {
      eleList,
      addEle,
      addTodo,
      ...toRefs(dataObj)
    }
  }
}
</script>
<style>
.test-container {
  width: 300px;
  margin: 0 auto;
}
</style>

页面效果：

主要区别在于：

和