有使用过vm.$set吗，原理是什么？

vm.$set 是 Vue.js 提供的一个方法，用于在 Vue 实例中动态添加响应式属性。它的主要作用是确保新添加的属性能够被 Vue 的响应式系统监测到，从而触发视图的更新。zLh28资讯网——每日最新资讯28at.com

使用示例

假设我们有一个 Vue 实例zLh28资讯网——每日最新资讯28at.com

var vm = new Vue({  data: {    user: {      name: 'Alice'    }  }});

我们希望在 user 对象中添加一个新的属性 age。直接添加不会触发视图更新zLh28资讯网——每日最新资讯28at.com

vm.user.age = 25; // 直接添加不会触发视图更新

为了确保新添加的属性是响应式的，可以使用 vm.$setzLh28资讯网——每日最新资讯28at.com

vm.$set(vm.user, 'age', 25);

原理

Vue 的响应式系统是基于 Object.defineProperty 实现的。当一个对象被添加到 Vue 实例的 data 中时，Vue 会递归地遍历该对象的所有属性，并使用 Object.defineProperty 将这些属性转换为 getter 和 setter，从而实现响应式。然而，直接添加的新属性并没有通过这种方式定义，因此 Vue 无法检测到这些新属性的变化。vm.$set 方法内部使用了 Vue 的 set 方法，它会确保新添加的属性也能通过 Object.defineProperty 转换为响应式属性。zLh28资讯网——每日最新资讯28at.com

vm.$set 的实现

Vue 源码中 set 方法的实现（Vue 2.x）大致如下：zLh28资讯网——每日最新资讯28at.com

function set(target, key, val) {  if (Array.isArray(target) && isValidArrayIndex(key)) {    target.length = Math.max(target.length, key);    target.splice(key, 1, val);    return val;  }  if (key in target && !(key in Object.prototype)) {    target[key] = val;    return val;  }  const ob = target.__ob__;  if (!ob) {    target[key] = val;    return val;  }  defineReactive(ob.value, key, val);  ob.dep.notify();  return val;}function defineReactive(obj, key, val) {  const dep = new Dep();  let childOb = observe(val);  Object.defineProperty(obj, key, {    enumerable: true,    configurable: true,    get: function reactiveGetter() {      const value = val;      if (Dep.target) {        dep.depend();        if (childOb) {          childOb.dep.depend();        }      }      return value;    },    set: function reactiveSetter(newVal) {      const value = val;      if (newVal === value || (newVal !== newVal && value !== value)) {        return;      }      val = newVal;      childOb = observe(newVal);      dep.notify();    }  });}

总结

vm.$set 方法在 Vue 中用于动态添加响应式属性，确保新属性能够被 Vue 的响应式系统监测到。它通过 Object.defineProperty 将新属性定义为响应式属性，并触发依赖更新，确保视图能够正确更新。zLh28资讯网——每日最新资讯28at.com

使用工具学会使用只是第一步，掌握原理并能够通过原理解决问题才是关键，在平时的开发中，使用时多数，然而在遇到复杂问题或者优化时候掌握原理会提高开发效率。zLh28资讯网——每日最新资讯28at.com

本文链接：http://www.28at.com/showinfo-26-99638-0.html有使用过vm.$set吗，原理是什么？

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： 运小沓 Cuber・数字员工 3.0 发布，WAIC2024 壹沓科技供应链论坛顺利举办

下一篇： 我跟你说@RefreshScope跟Spring事件监听一起用有坑！