Vue中实现$set方法(Vue原理之步骤四)，前端面试知识点

在Vue中，$set 方法用于设置对象的属性。当你直接添加一个属性到Vue实例的data对象上时，Vue无法检测到这个属性的变化，因此它不是响应式的。$set 方法可以确保我们添加的属性是响应式的，从而触发视图更新。

以下是一个简单的示例，展示如何在Vue组件中实现一个类似于Vue内置的$set方法的功能：

Vue.prototype.$set = function(target, key, value) {
  if (Array.isArray(target) && isFinite(key)) {
    // 如果target是数组且key是有限数字，直接使用Vue的原生方法
    this.$set(target, key, value);
  } else if (target instanceof Object) {
    // 如果target是对象
    // 使用Vue的`defineProperty`来定义一个响应式的属性
    Object.defineProperty(target, key, {
      value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  }
};

使用这个自定义的$set方法：

new Vue({
  data: {
    myObject: {}
  },
  created() {
    // 使用$set方法设置属性
    this.$set(this.myObject, 'newProp', 'newValue');
  }
});

这个示例中的$set方法首先检查目标是否是数组或对象，并根据情况选择不同的处理方式。对于数组，它使用Vue的原生$set方法；对于对象，它使用Object.defineProperty来定义一个新属性，使其成为响应式的。这样，无论是数组还是对象，都可以使用类似Vue内置的$set方法来添加或更新属性。