vue2响应式原理（vue2响应式原理 observe）

本文目录一览：

• 1、vue2响应式原理总结
• 2、vue响应式原理是什么?
• 3、vue2中computed原理

vue2响应式原理总结

1、vue响应式数据原理是利用Object。defineProperty这个API来实现，该API可以监听对象属性的get和set，当对象属性被调用时，它能够自动触发更新视图。Vue的响应式实现，便是通过使用Object。

2、vue2响应式原理主要通过 Object.fefineProperty 当把一个普通的js对象传入 Vue 实例作为 data 选项，Vue将遍历此对象所有的属性，并使用 Object.fefineProperty 把这些属性全部转为 getter/setter 。

3、vue2中Object.defineProperty响应式只对对象有效，对数组无效，所以对数组做额外处理。

4、这里附上vue响应式原理的地址： vue2数据响应式原理 在vue的watcher实例中配置了lazy，dirty，value属性，就是用来配合实现computed的API。

vue响应式原理是什么?

当一个vue实例加载时，会进行初始化，将他的配置项options和mixins的内容合并，以options为主，而在初始化data时，会对data对象进行数据劫持，并做代理，通过Object。

vue响应式数据原理是利用Object。defineProperty这个API来实现，该API可以监听对象属性的get和set，当对象属性被调用时，它能够自动触发更新视图。Vue的响应式实现，便是通过使用Object。

Vue响应式原理核心是 数据劫持，采用 ES5 的 object.defineproperty 的 getter 和 setter 方法。

在Vue 中，数据模型下的所有属性，会被 Vue 使用 Object.defineProperty (Vue0 使用 Proxy)进行数据劫持代理。

Vue3 使用 Proxy 对象重写响应式系统，这个系统主要有以下几个函数来组合完成的：reactive：接收一个参数，判断这参数是否是对象。

vue2中computed原理

1、每个computed属性都会生成对应的Watcher实例，watcher拥有value属性和get方法，computed的getter函数会在get方法中调用，并返回赋值给value。

2、并把watcher加入到Dep.target中，然后执行他的回调函数。

3、当组件初始化的时候，computed和data会分别建立各自的响应系统，Observer遍历data中每个属性设置get/set数据拦截。

4、computed是一个计算属性，类似于过滤器，对绑定到view的数据进行处理，根据计算所依赖的属性动态返回新的计算结果。computed和data的定义不可重名，否则是会报错的。

5、很多情况下，computed和watch可以实现相同的功能；当需要在数据变化时执行异步或开销较大的操作时，使用watch会更好一些。因为computed会立即返回，此时异步操作可能还没有完成；因为数据是响应式的，使得watch有意义。

6、Vue中computed就是 实时计算 使用。Vue检测到数据发生变动时就会执行对相应数据有引用的函数。下面是一个demo。引用自己的vue.js就可以看效果。利用computed可以做一些监控之类的效果。