前言
每当开始一场技术面试的过程中，面试官总会是有意去询问想，会vue吗？可见vue在国内的地位不容小觑，首当其问的就是能说说vue是如何实现数据双向绑定吗？
为了避免尴尬的场景再发生，我们一起好好研究下vue的响应式原理吧！
如果小伙伴早已熟知这两个问题，可以浏览下一朋友正在筹划中的 面试汇总库
闲事少管，走路陈展。开始正题。
1.Object.defineProperty()
引用vue官网的一段话。
当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。
Object.defineProperty在本次项目中扮演着至关重要的角色。
所以暂时不太熟悉这个方法的小伙伴可以点击 MDN
2.数据劫持
什么是数据劫持？
通过Object.defineProperty来定义所有的属性，这些属性就可以拥有get/set方法。
用vue官网的一个🌰。当我在控制台输入 app.$data我就可以访问到app实例中的data对象。
我们可以看到data对象下的属性message，有属于自己的get/set.
如何实现数据劫持？
现在我们vue实例的data属性都有了set()/get()。但我们在vue中经常还会遇到 比如
this.$data.message = {repoter:{person:'zhx'}}
既然我们要达到响应式，那么就算后期改变我们也要为它加上get()/set()
我们只需要在set方法中再一次调用Observe()即可，如下代码所示
数据代理
在vue中我们经常取值都是通过this.message取值而不是this.$data.message，所以这一步我们要做$data的代理
本次主要分享了有
- 1.Object.defineProperty
- 2.数据劫持
- 3.数据代理
下一次主要分享 1.编译模板处理 2.发布订阅模式
如果面试官再问起这题，我必定能胸有成竹。
希望本文能够对你有所帮助。祝你工作生活都愉快❤
