Vue3--篇8--reactive函数

3.reactive函数

• 作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
• 语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）
• reactive定义的响应式数据是“深层次的”。
• 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。

<template>
  <h1>姓名：{{ person.name }}</h1>
  <h1>班级：{{ person.school.grade.class }}</h1>
  <h1>爱好：{{ person.hobby.toString() }}</h1>
  <h1><button @click="editInfo">修改信息</button></h1>
</template>

<script>
import { ref, reactive } from "vue";
export default {
  name: "App",
  setup() {
    let person = reactive({
      name: "张三",
      school: {
        grade: {
          class: "一班",
        },
      },
      hobby: ["抽烟", "喝酒", "烫头"],
    });
    function editInfo() {
      person.name = "李四";
      person.school.grade.class = "二班";
      person.hobby[0] = "学习";
    }
    return {
      person,
      editInfo,
    };
  },
};
</script>

<style lang="scss"></style>

image.png
image.png