Vue_Demo/20_脚手架/vue3_test/5.src_vue3的响应式原理/App.vue

<template>
  <h1>个人信息：</h1>
  <h2 v-show="person.name">姓名：{{ person.name }}</h2>
  <h2>年龄：{{ person.age }}</h2>
  <h2 v-show="person.sex">性别：{{ person.sex }}</h2>
  <h2>工作种类：{{ person.job.type }}</h2>
  <h2>薪水：{{ person.job.salary }}</h2>
  <h2>爱好：{{ person.hobby }}</h2>
  <h2>c的值：{{ person.job.a.b.c }}</h2>
  <button @click="changeInfo">修改信息</button>
  <button @click="addSex">添加性别</button>
  <button @click="deleteName">删除姓名</button>
</template>

<script>
import {ref, reactive} from "vue";

export default {
  name: 'App',
  setup() {
    // 数据
    // let name = ref('张三')
    // let age = ref(19)
    // let job = reactive({
    //   type: '前端工程师',
    //   salary: '30K',
    //   a: {
    //     b:{
    //       c: 666
    //     }
    //   }
    // })
    // let hobby = reactive(['抽烟','喝酒','烫头'])
    let person = reactive({
      name: '张三',
      age: 18,
      job: {
        type: '前端工程师',
        salary: '30K',
        a: {
          b: {
            c: 666
          }
        }
      },
      hobby: ['抽烟', '喝酒', '烫头']
    })

    function changeInfo() {
      person.name = '李四'
      person.age = 88
      person.job.type = '后端工程师'
      person.job.salary = '31K'
      person.hobby[0] = '测试'
    }

    function addSex() {
      person.sex = '男'
    }

    function deleteName() {
      delete person.name
    }

    return {
      person,
      changeInfo,
      addSex,
      deleteName
    }
  }
}
</script>