vue3 从入门到放弃之【 reactive 】

 

// 作用定义多个数据的响应

// const proxy = react(Object) : 接受一个对象放回对象的响应式代理器对象

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

// 内部基于es6

的proxy实现，通过代理对象操作源对象内部数据的都是响应式的

<template>
  <div class="home">
    <div>{{ user.name }}</div>
    <div>{{ user.age }}</div>
    <div>{{ user.wife.age}}</div>
    <div>{{user.wife.like}}</div>
    <div></div>
    <div></div>
    <div @click="change">点击改变</div>
  </div>
</template>

<script lang="ts">
// 定义一个组件
import { defineComponent, reactive } from "vue";

// 暴露出去的一个定义好的主键
export default defineComponent({
  name: "Home",
  setup() {
    // reactive 
    // 作用定义多个数据的响应
    // const proxy = react(Object) : 接受一个对象放回对象的响应式代理器对象
    // 响应式转换是 “深层的”：会影响对象内部所有的属性
    // 内部基于es6的proxy实现，通过代理对象操作源对象内部数据的都是响应式的
    const user = reactive({
     // user 对象的类型是proxy
      name: "消息",
      age: 20,
      wife: {
        name: "消",
        age: 19,
        like: ["包", "口红"],
      },
    });
    function change() {
      // 只能用代理对象来更新数据
      user.name = "11";
      user.wife.age += 1
      user.wife.like[0] = '钱'，
       delete user.age; // 删除
    }
    return {
      user,
      change,
    };
  },
});
</script>