vue的get和set做了什么

Vue的get和set实现了数据响应式。这包括1、拦截数据访问和修改，2、收集依赖和通知更新。 Vue通过Object.defineProperty或Proxy为对象的每个属性添加getter和setter，从而实现对数据的拦截和监控。这使得Vue在数据发生变化时能够自动更新视图和执行相应的逻辑。

一、拦截数据访问和修改

Vue的响应式系统通过拦截对象属性的读取和设置来实现，这主要依赖于JavaScript的Object.defineProperty或Proxy。以下是详细解释：

1. Object.defineProperty：

   • Vue 2.x主要使用Object.defineProperty来定义对象属性的getter和setter。
   • 通过getter来拦截属性的读取操作，记录依赖。
   • 通过setter来拦截属性的写入操作，触发相关依赖的更新。

2. Proxy：

   • Vue 3.x引入了Proxy来实现响应式数据，这是一种更强大和灵活的方式。
   • Proxy可以直接代理整个对象，而不仅仅是对象的某个属性。
   • 更加简洁和高效，解决了Object.defineProperty的一些局限。

示例代码：

// Vue 2.x 使用 Object.defineProperty

function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      // 依赖收集
      return val;
    },
    set(newVal) {
      if (newVal !== val) {
        val = newVal;
        // 触发更新
      }
    }
  });
}
// Vue 3.x 使用 Proxy
const handler = {
  get(target, key) {
    // 依赖收集
    return Reflect.get(target, key);
  },
  set(target, key, value) {
    const result = Reflect.set(target, key, value);
    // 触发更新
    return result;
  }
};
const proxy = new Proxy(target, handler);

二、收集依赖和通知更新

Vue不仅仅是拦截数据的访问和修改，还需要管理依赖关系，以便在数据变化时通知相关的视图更新。

1. 依赖收集：

   • 在数据的getter中，Vue会记录当前的依赖。
   • 依赖主要是指哪些组件或计算属性在使用这个数据。
   • 每个依赖项会被存储在一个依赖管理器中（例如Dep类）。

2. 通知更新：

   • 在数据的setter中，Vue会通知所有依赖项进行更新。
   • 通知更新通常意味着重新渲染组件或重新计算计算属性。

示例代码：

// 依赖管理器

class Dep {
  constructor() {
    this.subs = [];
  }
  addSub(sub) {
    this.subs.push(sub);
  }
  notify() {
    this.subs.forEach(sub => sub.update());
  }
}
// Vue 2.x 中的依赖收集和通知更新
function defineReactive(obj, key, val) {
  const dep = new Dep();
  Object.defineProperty(obj, key, {
    get() {
      dep.addSub(currentWatcher); // 假设当前的依赖项被存在currentWatcher中
      return val;
    },
    set(newVal) {
      if (newVal !== val) {
        val = newVal;
        dep.notify();
      }
    }
  });
}
// Vue 3.x 中的依赖收集和通知更新
const handler = {
  get(target, key) {
    // 依赖收集
    const dep = getDep(target, key);
    dep.addSub(currentWatcher);
    return Reflect.get(target, key);
  },
  set(target, key, value) {
    const result = Reflect.set(target, key, value);
    // 触发更新
    const dep = getDep(target, key);
    dep.notify();
    return result;
  }
};

三、Vue 2.x 和 Vue 3.x 的区别

虽然Vue 2.x和Vue 3.x都实现了数据响应式，但它们在具体实现上有一些重要区别：

1. 性能：

   • Vue 3.x使用Proxy，能够更高效地处理深度嵌套对象和数组。
   • Proxy可以拦截更多操作，如对象的删除、枚举等。

2. 灵活性：

   • Vue 3.x的Proxy代理整个对象，而不是每个属性。
   • 这使得Vue 3.x能够动态地添加或删除属性，而不需要重新定义响应式。

3. 代码复杂度：

   • Vue 2.x需要手动递归地为每个属性定义getter和setter。
   • Vue 3.x的Proxy简化了代码，使得实现更为简洁和直观。

对比表：

四、实例说明

通过一个具体的例子来更好地理解Vue的get和set的作用。假设我们有一个简单的购物车应用，其中包含商品列表和总价计算。

Vue 2.x 实例：

class Dep {

  constructor() {
    this.subs = [];
  }
  addSub(sub) {
    this.subs.push(sub);
  }
  notify() {
    this.subs.forEach(sub => sub.update());
  }
}
function defineReactive(obj, key, val) {
  const dep = new Dep();
  Object.defineProperty(obj, key, {
    get() {
      dep.addSub(currentWatcher);
      return val;
    },
    set(newVal) {
      if (newVal !== val) {
        val = newVal;
        dep.notify();
      }
    }
  });
}
const cart = {};
defineReactive(cart, 'totalPrice', 0);
function updateTotalPrice() {
  cart.totalPrice = cart.items.reduce((sum, item) => sum + item.price, 0);
}
cart.items = [{ price: 10 }, { price: 20 }];
updateTotalPrice(); // 此时totalPrice会被自动更新为30

Vue 3.x 实例：

const handler = {

  get(target, key) {
    const dep = getDep(target, key);
    dep.addSub(currentWatcher);
    return Reflect.get(target, key);
  },
  set(target, key, value) {
    const result = Reflect.set(target, key, value);
    const dep = getDep(target, key);
    dep.notify();
    return result;
  }
};
const cart = new Proxy({ items: [], totalPrice: 0 }, handler);
function updateTotalPrice() {
  cart.totalPrice = cart.items.reduce((sum, item) => sum + item.price, 0);
}
cart.items.push({ price: 10 });
cart.items.push({ price: 20 });
updateTotalPrice(); // 此时totalPrice会被自动更新为30

五、总结与建议

Vue的get和set机制是其响应式系统的核心，通过拦截数据访问和修改来实现自动更新视图。主要有以下几点：

1. 拦截数据访问和修改：通过Object.defineProperty或Proxy实现。
2. 收集依赖和通知更新：记录数据依赖并在数据变化时通知更新。
3. Vue 2.x和Vue 3.x的区别：包括性能、灵活性、代码复杂度等方面。

为了更好地利用Vue的响应式系统，建议：

1. 充分理解响应式原理：有助于更好地优化代码和排查问题。
2. 选择合适的Vue版本：根据项目需求和复杂性选择Vue 2.x或Vue 3.x。
3. 避免过度依赖响应式：在某些场景下，手动管理状态可能更高效和直观。

通过这些建议，开发者可以更好地理解和应用Vue的get和set机制，实现高效、优雅的前端开发。

相关问答FAQs：

1. 什么是Vue的get和set？
Vue的get和set是Vue.js框架中的两个重要概念，用于实现数据的响应式。get用于获取数据的值，set用于设置数据的值。

2. get和set在Vue中的作用是什么？
在Vue中，get和set的作用是实现数据的双向绑定和响应式更新。通过使用get和set，当数据发生变化时，可以自动更新相关的视图。

3. get和set在Vue中是如何工作的？
在Vue中，当我们定义一个响应式的数据对象时，Vue会通过Object.defineProperty()方法来劫持该对象的属性。在这个过程中，Vue会为每个属性定义一个getter和setter。

4. get的作用是什么？
get用于获取响应式数据的值。当我们在模板中使用这个响应式数据时，Vue会自动调用该属性的getter方法来获取最新的值。例如，当我们在模板中使用{{ message }}来显示一个变量message的值时，Vue会自动调用message的getter方法来获取最新的值并显示在页面上。

5. set的作用是什么？
set用于设置响应式数据的值。当我们修改响应式数据的值时，Vue会自动调用该属性的setter方法来更新数据并通知相关的视图进行更新。例如，当我们通过v-model指令将一个表单元素与一个响应式数据绑定时，当用户在表单中输入内容时，Vue会自动调用该属性的setter方法来更新数据并更新视图。

6. get和set的使用示例
下面是一个使用get和set的示例代码：

var obj = {
  message: '',
  get upperCaseMessage() {
    return this.message.toUpperCase();
  },
  set upperCaseMessage(value) {
    this.message = value.toUpperCase();
  }
};

console.log(obj.upperCaseMessage); // 输出空字符串
obj.upperCaseMessage = 'hello';
console.log(obj.message); // 输出'HELLO'

在上面的示例中，我们定义了一个响应式数据对象obj，并在其中定义了一个名为upperCaseMessage的属性，它的getter方法返回message属性的大写形式，setter方法将设置的值转换为大写并赋给message属性。

7. 注意事项
在使用get和set时，需要注意以下几点：

• get和set只能用于对象的属性，不能用于数组的索引。
• 在getter和setter方法中，尽量不要进行耗时的操作，以免影响性能。
• 在使用get和set时，需要注意避免出现循环调用的情况，否则会导致无限循环。
• 在使用get和set时，需要注意对数据的修改必须通过setter方法进行，直接修改对象的属性值将无法触发响应式更新。

总结
通过使用Vue的get和set，我们可以轻松实现数据的双向绑定和响应式更新，提高开发效率并提升用户体验。get用于获取数据的值，set用于设置数据的值，并通过getter和setter方法实现数据的更新和视图的更新。在使用get和set时，需要注意避免出现循环调用和耗时操作的情况，以保证应用的性能和稳定性。