Vue3快速入门-reactive_vue3 reactive 转成

查看本系列文章合集click me

下载本系列文章源码click me

作用： 接收一个普通对象然后返回该普通对象的响应式代理对象
语法： const xxx = reactive({});

• 响应式的数据是深层次的（递归深度响应式）
• 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象 内部数据都是响应式的

<template>
  <div id="app">
    <h2>{{ story.name }}</h2>
    <h3>{{ story.date }}</h3>
    <p>第一章： {{ story.list.first }}</p>
    <p>第二章： {{ story.list.last }}</p>

    <select @change="update">
      <option value="">无</option>
      <option value="name">更新名称</option>
      <option value="first">更新第一章</option>
    </select>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";

export default defineComponent({
  setup() {
    /* 定义响应式数据对象 */
    const story = reactive({
      name: "小说名称",
      date: "更新时间",
      list: {
        first: "第一章",
        last: "第二章",
      },
    });

    /* 更新方法 */
    function update(e) {
      switch (e.target.value) {
        case "name":
          story.name = "妖神记";
          break;
        case "first":
          story.list.first = "重生";
          break;
        default:
          break;
      }
    }

    return {
      story,
      update,
    };
  },
});
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52