Vue3--篇10--Vue3中的响应式优化

-Vue2响应式存在问题：

• 新增属性、删除属性, 界面不会更新。
• 直接通过下标修改数组, 界面不会自动更新。

我们来看一下Vue3有没有如上问题

<template>
  <h1>姓名：{{ person.name }}</h1>
  <h1 v-show="person.sex">性别：{{ person.sex }}</h1>
  <h1>爱好：{{ person.hobby.toString() }}</h1>
  <button @click="addSex">添加一个sex属性</button>
  <button @click="delSex">删除sex属性</button>
  <button @click="editHobby">修改第一个爱好</button>
</template>

<script>
import { ref, reactive } from "vue";
export default {
  name: "App",
  setup() {
    let person = reactive({
      name: "张三",
      hobby: ["抽烟", "喝酒", "烫头"],
    });
    function addSex() {
      person.sex = "女";
    }
    function delSex() {
      delete person.sex;
    }
    function editHobby() {
      person.hobby[0] = "学习";
    }

    return {
      person,
      addSex,
      delSex,
      editHobby,
    };
  },
};
</script>

<style lang="scss"></style>

image.png
image.png
image.png