vue中set原理是什么

Vue中的set原理是使用JavaScript的Object.defineProperty来实现的。Object.defineProperty是JavaScript的一个方法，它用于在一个对象上定义一个新属性，或者修改对象的现有属性。

在Vue中，当使用Vue.set或this.$set方法来改变对象中的属性时，Vue会通过Object.defineProperty来监听属性的改变，并触发相应的更新。

具体的实现过程如下：

1. 首先，Vue会判断对象是否已经被监听过，如果没有被监听，Vue会调用observe方法对对象进行监听。

2. 然后，Vue会判断属性是否存在于对象的__ob__属性中，如果存在，说明属性已经被监听过，直接返回。

3. 如果属性不存在于__ob__属性中，Vue会通过Object.defineProperty来定义一个新的属性。Object.defineProperty方法的特点是能够定义属性的get和set方法，这样就可以在读取和修改属性时进行响应式的更新。

4. 对于对象中的每个属性，Vue会递归地对其进行监听。如果属性的值是对象，Vue会对该值进行深度监听。这样当对象内部的属性发生改变时，也会触发相应的更新。

通过以上的步骤，Vue能够实现对对象中属性的改变进行监听，当属性发生改变时，Vue会自动触发视图的更新，保持视图和数据的同步。这就是Vue中set的原理。

Vue中的set原理是通过Object.defineProperty方法实现的。

在Vue中，数据的双向绑定是通过观察者模式来实现的。每当数据发生变化时，Vue会通过触发对应的观察者来更新视图。

Vue通过Object.defineProperty方法来实现对数据的劫持。当给一个对象添加一个属性时，Vue会通过Object.defineProperty方法对该属性进行劫持，将该属性转换为访问器属性(getter和setter)。这样，每当属性被读写时，Vue就能够通过触发对应的getter和setter来实现数据的双向绑定。

具体来说，当给一个对象的属性添加get和set方法时，这个属性就变成了一个访问器属性。访问器属性分为两部分，即get方法和set方法。get方法用来获取属性的值，而set方法用来设置属性的值。当属性被读取时，会触发get方法；当属性被赋值时，会触发set方法。

在Vue中，当数据发生变化时，Vue会通过触发set方法来通知相关的观察者进行更新。当我们通过data.xx = newValue来改变数据时，实际上是触发了该属性的set方法。在set方法中，Vue会将新值存储起来，并且通知相关的观察者进行更新。

通过Object.defineProperty方法对数据进行劫持，实现了对数据的双向绑定。当数据发生变化时，Vue会通过触发对应的setter方法来更新数据，从而实现了视图和数据的同步更新。

在Vue中，set方法是用于向响应式对象中添加响应式属性的方法。它的作用是将一个新的属性添加到一个对象上，并且确保当这个属性被访问时，可以触发响应式更新。

set方法的原理可以分为以下几个方面：

1. 对象属性的访问劫持：Vue通过重写对象的getter和setter方法来实现对属性访问的劫持。当访问对象属性时，Vue会先调用getter方法来返回属性值，同时将当前属性与依赖的观察者建立关联。当属性值发生变化时，Vue会调用setter方法来通知观察者进行更新。

2. 对象属性的响应式化：在调用set方法时，Vue会通过defineProperty方法为新添加的属性设置getter和setter方法，这样就可以实现对新属性的监听和响应。

3. 数组的特殊处理：Vue中对数组的响应式处理与对象有所不同。在数组中，有一些改变数组的方法，如push、pop等，这些方法会被重写来实现响应式更新。但是，直接通过索引修改数组的值或者改变数组的长度，无法触发响应式更新。

下面是set方法的操作流程：

1. 首先，Vue会判断对象是否是响应式对象。如果不是响应式对象，则直接返回。如果对象是响应式对象，则继续执行。

2. 接下来，Vue会判断对象的key是否已经存在。如果key已经存在，则判断当前属性值是否与新添加的值相同，如果相同，则直接返回。如果不相同，则将新值赋给属性，并触发更新。

3. 如果key不存在，那么Vue会使用defineProperty方法为对象的key添加getter和setter方法，并将新值赋给属性。通过调用setter方法，触发更新。

需要注意的是，使用set方法添加的属性是响应式的，也就是说，在模板中或者侦听器中使用该属性时，都会触发响应式更新。但是，直接给对象赋值新属性，而不使用set方法，则该属性不会是响应式的。为了保证对象的响应式属性，建议使用set方法来添加属性。