使用this.$set（）方法处理，具体如下：

<template>
  <div class="home">
    <div v-show="obj.name">
      姓名：{{obj.name}}
    </div>
    <div v-show="obj.sex">
      性别：{{obj.sex}}
    </div>
    <button @click="addSex">添加性别</button>
    <button @click="deleteName">删除姓名</button>
    <div>
      {{arr}}
    </div>
    <button @click="changeArr">更改数组值</button>
    <button @click="deleteItem">删除第一个数组项</button>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      obj: {
        name: "张三",
        age: 20,
      },
      arr: ["李四", "王五"],
    };
  },
  methods: {
    //新增性别属性值
    addSex() {
      // this.obj.sex = "女"; //数据改变，视图没有更新

      //使用如下方式处理
      this.$set(this.obj, "sex", "女"); 需要改变的源对象、要添加的对象属性名、更改后的对象属性值
    },

    //删除对象属性
    deleteName() {
      // delete this.obj.name; //删除属性，数据改变，视图未更新

      //使用this.$delete方法
      this.$delete(this.obj, "name");
      console.log(this.obj);
    },

    //更改数组的值
    changeArr() {
      // this.arr[0] = "更改后的李四"; //数据改变，视图没有更新

      //使用如下方式处理
      this.$set(this.arr, 0, "更改后的李四"); //需要改变的源数组、索引、数据
    },

    //删除数组的第一项
    deleteItem() {
      this.$delete(this.arr, 0); //需要删除的源数组、索引
    },
  },
};
</script>