Vue3.0 reactive 函数

<style lang='scss' scoped>
</style>
<template>
  <div>
    <h3>年龄：{{ obj.name }}</h3>
    <h3>年龄：{{ obj.age }}</h3>
    <h3>{{ person }}</h3>
    <button @click="changeInfo">修改</button>
  </div>
</template>
<script>
import { reactive } from "vue";
export default {
  components: {},
  setup() {
    //reactive 只能定义对象类型的响应式数据
    let person = reactive(["aa", "bb", "cc"]);
    let obj = reactive({
      name: "李四",
      age: 20,
    });
    //通过ref实现响应式数据
    function changeInfo() {
      obj.name = "xxx";
      obj.age = 50;
      person[0] = 1;
      //错误写法  person=1 应为数据变成响应式
    }
    return {
      changeInfo,
      obj,
      person,
    };
  },
};
</script>