添加响应式数据

1. 响应式的基本概念

• 定义：响应式是指当数据（data）发生变化时，页面会自动更新和刷新。类似于Excel中单元格数据联动更新的机制。

2. Vue响应式的实现原理

• 数据劫持：Vue通过Object.defineProperty方法，将data中的数据存储到_data中。通过setter和getter方法，拦截对数据的读取和修改操作。
  • 当数据被修改时，setter方法会被触发，不仅更新数据，还会触发页面的重新渲染。
  • 这种机制被称为“数据劫持”。

3. 响应式的深度处理

• Vue会递归地将data中的所有属性（包括嵌套对象中的属性）都添加响应式处理。
• 示例代码：

  data: {
    msg: "响应式与数据劫持",
    name: "jackson",
    age: 20,
    a: {
      b: {
        c: {
          e: 1,
        },
      },
    },
  }
  

4. 动态添加属性的响应式处理

• 直接给对象添加新属性时，不会自动添加响应式处理。
• 解决方法：
  • 使用Vue.set或vm.$set方法动态添加响应式属性。
  • 示例代码：

    vm.$set(vm.a, "email", "[email protected]");
    

5. 数组的响应式处理

• 数组的索引修改（如array[0] = value）不会触发响应式更新。
• 解决方法：
  • 使用Vue提供的数组方法（push, pop, splice, shift, unshift, reverse, sort）来修改数组。
  • 或者使用Vue.set或vm.$set方法：

    vm.$set(vm.users, 0, '杰克');
    

6. 示例代码

示例1：对象的响应式处理

<div id="app">
  <h1>{{msg}}h1>
  <div>姓名：{{name}}div>
  <div>年龄：{{age}}岁div>
  <div>数字：{{a.b.c.e}}div>
  <div>邮箱：{{a.email}}div>
div>

const vm = new Vue({
  el: "#app",
  data: {
    msg: "响应式与数据劫持",
    name: "jackson",
    age: 20,
    a: {
      b: {
        c: {
          e: 1,
        },
      },
    },
  },
});
vm.$set(vm.a, "email", "[email protected]");

示例2：数组的响应式处理

<div id="app">
  <h1>{{msg}}h1>
  <ul>
    <li v-for="user in users">{{user}}li>
  ul>
  <ul>
    <li v-for="vip in vips" :key="vip.id">{{vip.name}}li>
  ul>
div>

const vm = new Vue({
  el: "#app",
  data: {
    msg: "数组的响应式处理",
    users: ["jack", "lucy", "james"],
    vips: [
      { id: "111", name: "zhangsan" },
      { id: "222", name: "lisi" },
    ],
  },
  methods: {
    update() {
      // 示例：使用Vue.set修改数组元素
      this.$set(this.users, 0, "tom");
    },
  },
});

7. 注意事项

• 避免在运行时直接向Vue实例或其根$data添加响应式属性。建议在声明时提前定义好。
• 使用Vue.set或vm.$set时，需要确保目标对象是Vue实例或其响应式数据的一部分。