11_数据监视

2023-6-28

数据监视

Vue数据监视原理：

Vue会监视data中所有层次的数据。
检测对象中的数据
1. 通过setter实现监视，且要在new Vue时就传入要监测的数据。
2. 对象中后追加的属性，Vue默认不做响应式处理，页面无法刷新
3. 如需给后添加的属性做响应式，使用如下API：
```
Vue.set(target, propertyName/index, value)
或者
vm.$set(target, propertyName/index, value)
```
监测数组中的数据
1. 通过包裹数组更新元素的方法实现，本质就是做了两件事：
  1. 调用原生对应的方法对数组进行更新。
  2. 重新解析模板。进而更新页面。
  3. 在Vue中修改数组中的某个元素一定要用如下方法：
    1. 使用这些API: push()、pop()、shift()、unshift()、splice()、sort()、reverse()
    2. Vue. set() 或 vm.$set()

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

<body>
  <div id="app">
    <h3>姓名：{{ student.name }}</h3>
    <h3>年龄：{{ student.age }}</h3>
    <!-- 当值为 undefined 的时候，v-if 也不会展示出来 -->
    <h3 v-if="student.gender">性别：{{ student.gender }}</h3>
    <h3>爱好：{{ student.hobby }}</h3>
    <h3>朋友：</h3>
    <ul>
      <li v-for="item in student.friends">{{ item.name }} - {{ item.age }}</li>
    </ul>
    <button @click="addGender">后期追加性别属性</button>
    <button @click="addFriend">后期追加一个朋友javascript</button>
    <button @click="ageChange">修改javascript的年龄</button>
    <button @click="hobbyChange">修改eat为running</button>
  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      data() {
        return {
          student: {
            name: 'byboy',
            age: 20,
            hobby: ['eat', 'drink', 'sleep'],
            friends: [
              { name: 'java', age: 19 },
              { name: 'python', age: 20 },
            ],
          },
        };
      },
      methods: {
        addGender() {
          // 后期追加响应式数据
          // 第一中写法
          // Vue.set(this.student, 'gender', '男');
          // 第二种写法
          this.$set(this.student, 'gender', '男');
        },
        addFriend() {
          this.student.friends.push({ name: 'javascript', age: 20 });
        },
        ageChange() {
          this.student.friends[2].age = 21;
        },
        hobbyChange() {
          // 第一中写法
          // this.student.hobby.splice(0, 1, 'running');
          // 第二种写法
          // Vue.set(this.student.hobby, 0, 'running');
          // 第三中写法
          this.$set(this.student.hobby, 0, 'running');
        },
      },
    });
  </script>
</body>

阅读剩余

THE END