vue的set原理 底层基于什么

Vue中的set方法提供了一种响应式地给对象添加属性或修改属性的方式。底层基于Vue的响应式系统实现。下面我将详细介绍Vue的响应式系统和set方法的原理。

Vue的响应式系统采用了基于ES5的Object.defineProperty方法，通过将对象的属性转化为getter和setter来实现对数据的劫持和监听。在Vue实例化时，Vue会遍历data对象的所有属性，利用Object.defineProperty对每个属性进行劫持。当访问属性时，会触发该属性的getter方法，从而进行依赖收集。当属性值发生变化时，会触发该属性的setter方法，从而通知相关的依赖进行更新。

而set方法是Vue提供的一个工具函数，用于在对象上设置一个新属性或修改一个已有属性的值，并且确保这个属性是响应式的。它接受三个参数：target（目标对象），key（属性名）和value（属性值）。当执行set方法时，Vue会判断目标对象是否是一个响应式对象，如果不是，则不做任何处理。如果是，则判断属性是否已存在于对象中，如果已存在，则直接修改属性值，并触发依赖更新；如果不存在，则通过Object.defineProperty方法将属性添加到对象中，并进行依赖收集，然后触发依赖更新。

通过set方法，我们可以实现对响应式对象的属性进行动态添加和修改，同时保证这些属性的变化能够触发界面的重新渲染。这为我们编写高效、灵活的Vue组件提供了很大的便利。

总结起来，Vue的set方法基于其响应式系统实现，通过对目标对象的属性进行劫持和监听，实现了动态添加和修改属性的功能。这一机制为我们操作数据和更新界面提供了非常便捷的方式。

Vue的set原理是基于Object.defineProperty的。Object.defineProperty是JavaScript中用于定义对象属性的函数。

当使用Vue的set方法来添加新的属性时，Vue内部会调用Object.defineProperty来定义这个新的属性。Object.defineProperty接受三个参数：对象，属性名，属性描述符对象。

属性描述符对象包含以下几个属性：

1. value：属性的值
2. writable：是否可写
3. enumerable：是否可枚举
4. configurable：是否可配置

Vue的set方法会将新的属性添加到对象上，并且对新属性调用Object.defineProperty方法进行设置，使得属性可枚举、可配置。

具体的实现过程如下：

1. 判断对象是否已经存在该属性，如果有，则直接返回
2. 判断对象是否是响应式的，如果不是，则直接给对象添加属性，返回
3. 判断属性是否是观察的，如果是，则直接给对象添加属性，返回
4. 通过调用Object.defineProperty方法来向对象添加属性，设置属性的描述符，使其可枚举、可配置
5. 如果对象是响应式的，则调用对象的依赖更新方法，通知依赖更新

这样，当我们使用Vue的set方法来添加新的属性时，就可以实现响应式的更新，使得新属性能够被Vue所观察，并且触发相应的依赖更新。

Vue的set方法是用于对Vue实例中的响应式数据进行更新的方法。它的底层实现是基于JavaScript的Object.defineProperty方法。

实际上，Vue底层依赖的是一个名为“依赖追踪”的核心机制，它通过Object.defineProperty方法来劫持（即重写）对象的属性访问行为，在属性被访问时自动追踪依赖。当属性被修改时，Vue会自动通知相关的订阅者进行更新。

具体来说，当我们给Vue实例的data中的某个属性赋予一个新值时，Vue会使用Object.defineProperty方法将该属性转化为getter和setter，当该属性被访问时，会触发getter函数，当该属性被修改时，会触发setter函数并通知相关的订阅者进行更新。

而set方法是在Vue实例中提供的一个全局函数，用于修改响应式数据中的某个属性的值。其内部实现就是通过触发对应属性的setter函数来更新该属性的值。在set方法内部，Vue会首先判断该属性是否存在于对象中，如果存在，则直接使用赋值操作符进行赋值；如果不存在，则调用Vue.set方法将该属性添加到对象中，并将其转化为响应式。

需要注意的是，在使用Vue.set方法添加属性时，该属性会被定义为响应式的，而在普通的JavaScript对象中直接添加的属性不会是响应式的。

综上所述，Vue的set方法是基于JavaScript的Object.defineProperty方法来实现的，通过重写对象的属性访问行为，实现了自动追踪依赖以及属性的更新。