vue3中的reactive数据响应式

· 作用: 定义多个数据的响应式

· const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象

· 响应式转换是“深层的”：会影响对象内部所有嵌套的属性

· 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据都是响应式的

<template>
  <div style="font-size: 14px;">
    <h2>name: {{state.name}}</h2>
    <h2>age: {{state.age}}</h2>
    <h2>wife: {{state.wife}}</h2>
    <button @click="update">更新信息</button>
  </div>
</template>

<script lang="ts">
// vue3.0 版本语法
import { defineComponent, reactive } from 'vue'
export default defineComponent ({
  setup () {
    /* 定义reactive响应式数据对象*/
    const state = reactive({
      name: 'bob',
      age: 25,
      wife: {
        name: 'madongmei',
        age: 22
      },
    })
    console.log(state, state.wife)

    const update = () => {
      state.name += '--'
      state.age += 1
      state.wife.name += '++'
      state.wife.age += 2
    }

    return {
      state,
      update,
    }
  }
})
</script>

初始页面显示：

点击更新信息按钮后页面显示：