vue 监视数据的原理

1. vue会监视data中所有层次的数据。

2. 如何监测对象中的数据？

• 通过setter实现监视，且要在new Vue时就传入要监测的数据。
  (1).对象中后追加的属性，Vue默认不做响应式处理
  (2).如需给后添加的属性做响应式，请使用如下API：
  Vue.set(target，propertyName/index，value)或vm.$set(target，propertyName/index，value)

3. 如何监测数组中的数据？

• 通过包裹数组更新元素的方法实现，本质就是做了两件事：
  (1).调用原生对应的方法对数组进行更新。
  (2).重新解析模板，进而更新页面。

4.在Vue修改数组中的某个元素一定要用如下方法：

• 1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
• 2.Vue.set() 或 vm.$set()

特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！

<template>
  <div> 
    <p>学生信息</p>

    <p><button @click="student.age++">年龄+1</button></p>
    <p><button @click="addSex">添加性别属性,默认：男</button></p>
    <p><button @click="student.sex = '女'">修改性别：女</button></p>
    <p><button @click="addFriend">列表首位添加一个朋友</button></p>
    <p><button @click="updateFriend">修改第一个朋友为张三</button></p>
    <p><button @click="addHobby">添加一个爱好</button></p>
    <p><button @click="updateHobby">修改第一个爱好为：开车</button></p>
    <p><button @click="removeSmoke">过滤爱好中的抽烟</button></p>

    <h6>姓名：{{ student.name }}</h6>
    <h6 v-if="student.sex">性别：{{ student.sex }}</h6>
    <h6>年龄：{{ student.age }}</h6>
    <h6>爱好：</h6>
    <ul>
      <li v-for="(h, index) in student.hobby" :key="index">
        {{ h }}
      </li>
    </ul>
    <h6>朋友：</h6>
    <ul>
      <li v-for="(f, index) in student.friends" :key="index">
        {{ f.name }}-{{ f.age }}
      </li>
    </ul>

  </div>
</template>

<script>
import vue from "vue";
export default {
  data() {
    return {
      student: {
        name: "tom",
        age: 18,
        hobby: ["抽烟", "喝酒"],
        friends: [
          {
            name: "jerry",
            age: 35,
          },
          {
            name: "tony",
            age: 36,
          },
        ],
      },
    };
  },
  methods: {
    addSex() {
      this.$set(this.student, "sex", "男");
    },

    addFriend() {
      this.student.friends.unshift({ name: "jack", age: 25 });
    },

    updateFriend() {
      this.student.friends[0].name = "zs";
      this.student.friends[0].age = 5;
    },

    addHobby() {
      this.student.hobby.push("学习");
    },

    updateHobby() {
      // this.student.hobby.splice(0, 1, "开车"); //从第0个开始，删除一个，在插入开车
      // this.$set(this.student.hobby, 0, "开车");
      vue.set(this.student.hobby, 0, "开车");
    },

    removeSmoke() {
      // filter 不引起原数组的改变
      this.student.hobby = this.student.hobby.filter((h) => {
        return h != "抽烟";
      });
    },
  },
};
</script>

<style>
</style>