2.0 vue3数据变量的修改

上一篇：vue3数据的声明https://blog.csdn.net/qq_42543244/article/details/122136377

在上一篇中，已经学习了vue3中数据的声明，下面就该说一下数据的修改，话不多说直接上代码！

<template>
  <h1>个人信息</h1>
  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
  <h2>性别：{{ info.sex }}</h2>
  <h2>身高：{{ info.height }}m</h2>
  <h2>喜欢：{{ info.like }}</h2>
  <h2>其他爱好：{{ hobby }}</h2>
  <button @click="chaneUserInfo1">修改个人信息（one）</button>
  <h2>------------------------------------------------</h2>
  <h2>姓名：{{ person.name }}</h2>
  <h2>年龄：{{ person.age }}</h2>
  <h2>性别：{{ person.info.sex }}</h2>
  <h2>身高：{{ person.info.height }}m</h2>
  <h2>喜欢：{{ person.info.like }}</h2>
  <h2>其他爱好：{{ person.hobby }}</h2>
  <button @click="chaneUserInfo2">修改个人信息（two）</button>
</template>

<script>
import { ref, reactive } from "vue";
export default {
  name: "App",
  setup() {
    // ----------------------ref声明数据-----------------------------
    let name = ref("小明");
    let age = ref(18);
    let info = ref({
      sex: "男",
      height: 1.8,
      like: "游泳",
    });
    let hobby = ref(["打篮球", "打游戏", "健身"]);

    // --------------------reactive声明数据-----------------------------------
    let person = reactive({
      name: "小明",
      age: 18,
      info: {
        sex: "男",
        height: 1.8,
        like: "游泳",
      },
      hobby: ["打篮球", "打游戏", "健身"],
    });

    /* 
    针对于ref声明的数据如何进行修改 注意注意注意： .value  (在ref声明的数据里面，需要先通过.value才可以)
    */
    function chaneUserInfo1() {
      console.log(name);
      console.log(info);
      name.value = "小红";
      age.value = 16;
      info.value.sex = "女";
      info.value.height = 1.6;
      info.value.like = "跑步";
      hobby.value[1] = "听音乐";
    }

    function chaneUserInfo2() {
      console.log(person);
      person.name = "小红";
      person.age = 16;
      person.info = {
        sex: "女",
        height: 1.6,
        like: "跑步",
      };
      person.hobby[1] = "听音乐";
    }

    return {
      name,
      age,
      info,
      hobby,
      person,
      chaneUserInfo1,
      chaneUserInfo2,
    };
  },
};
</script>