前言：

经常有面试官会问“你能说说vue的响应式原理吗？很多不明就里的人会说是v-model，其实面试官想问的是vue能实现响应式使用的是JS中的什么API，而且v-model这个属于双向数据绑定和面试官所问的的vue的响应式原理属于牛头不对马嘴了很容易给面试官留下不好的印象，关于v-model的解释，大家可以直接去vue官方看一下，我们这里主要解析一下vue的响应式原理。资料来自B站尚硅谷，喜欢vue的小伙伴可以在哔哩哔哩直接搜索尚硅谷的vue教程，里面有一个叫姓张的老师讲的挺好的（具体叫什么名字我忘了），建议大家去B站看看。
接下来我们分别介绍一下vue2和vue3的响应式原理

响应式浅析（谨记加粗的位置）

vue2

vue2的响应式原理主要使用的是Object.defineProperty( ),里面需要传入三个参数，分别是：
【响应源数据的对象，源数据中的需要读写的属性，相对应的对象方法（包含了get和set方法）】

vue3

vue3的响应式原理主要依靠的是ES6新增的 Proxy 以及相配合的 Reflect，需要在Proxy的实例对象中传入两个参数
【源数据对象，处理对象的方法【get,set,deleteProperty…等】

vue响应式原理示例

下面通过两个实例我们分别来看看vue2和vue3的响应式原理

一、vue2响应式原理

vue2响应式简例

//源数据let person = {name:'张三',age:18}//模拟Vue2中实现响应式let p = {}Object.defineProperty(p,'name',{configurable:true,get(){ //有人读取name时调用console.log('调用了get方法，获取了name属性')return person.name},set(value){ //有人修改name时调用console.log('调用了set方法，修改了name属性')person.name = value}})Object.defineProperty(p,'age',{get(){ //有人读取age时调用return person.age},set(value){ //有人修改age时调用console.log('调用了set方法，修改了age属性')person.age = value}}) console.log(p.name = '李四')  //调用Object.defineProperty中的set方法修改数据console.log(p.name)  //调用Object.defineProperty中的get方法获取数据

vue2响应式分析总结

在上面的示例中，我们利用了JS对象中的defineProperty()方法对对象person进行了数据劫持。
当我们改变空对象p的时候，可以发现person对象中的数据也在跟着改变，
这种方法的意义主要在于看我们劫持的是person对象中的哪一个数据，通过在defineProperty()传入的第三个参数中定义的get(),set()或者使用delete让我们达到对源数据达到增删改查的目的。
这里面比较特殊的是delete关键字（删除对象某个属性），我们需要使用【configurable:true】这个参数才能真正的删除数据。
而我们使用console.log()的输出位置就可以我们作为真正更换数据渲染页面时需要做的一些逻辑处理。我们可以直接打开浏览器的控制台，一些简单的增删改查来验证这个响应式

二、 vue3响应式原理

vue3响应式简例

  //模拟Vue3中实现响应式//源数据let person = {name:'张三',age:18}const p = new Proxy(person,{//有人读取p的某个属性时调用get(target,propName){console.log(`有人读取了p身上的${propName}属性`)return Reflect.get(target,propName)},//有人修改p的某个属性、或给p追加某个属性时调用set(target,propName,value){console.log(`有人修改了p身上的${propName}属性，我要去更新界面了！`)Reflect.set(target,propName,value)},//有人删除p的某个属性时调用deleteProperty(target,propName){console.log(`有人删除了p身上的${propName}属性，我要去更新界面了！`)return Reflect.deleteProperty(target,propName)}})console.log(p.name) //读取到name的时候会调用实例身上的get方法console.log(p.name = '李斯特') //修改name的时候调用实例身上的set方法console.log(p.name) //读取到name的时候会调用实例身上的get方法获取到的是修改后的数据console.log(delete p.age) //删除属性的时候会调用deleteProperty方法

vue3响应式分析总结

通过上面的一个简单示例，我们可以清楚发现，vue3的响应式相对于vue2来说简洁了很多，主要体现的地方就是我们用了Proxy的实例对象之后，不需要在单独的想vue2之中那样（使用的defineProperty）需要特意去知名监控某个对象的变化（name、age属性）。这个是很重要的一个变化。我们一定要谨记。希望能看到这里小伙伴以后面试遇到该类问题的时候都能轻松惬意娓娓道来。

最后

这是本人对vue响应式原理的一个简单认识，如果有什么地方不正确或有所遗漏的，期待您的批评指正。
数风流人物，还看今朝。希望风华正茂的我们都能在自己喜欢的工作岗位上发光发热，积极向上。做一个稻盛和夫先生所说的 “自燃型” 的人

面试官：说说Vue响应式原理相关推荐

Vue响应式原理的简单模型
1.前言最近在梳理vue响应式的原理,有一些心得,值得写一篇博客出来看看. 其实之前也尝试过了解vue响应式的原理,毕竟现在面试看你用的是vue的话,基本上都会问你几句vue响应式的原理.以往学习这 ...
Vue响应式原理详细讲解
面试官:请你简单的说说什么是Vue的响应式. 小明:mvvm就是视图模型模型视图,只有数据改变视图就会同时更新. 面试官:说的很好,回去等通知吧. 小明:.... Vue响应式原理先看官方的说法简 ...
Vue响应式原理探究之“发布-订阅”模式
前言在面试题中经常会出现与"发布订阅"模式相关的题目,比如考察我们对Vue响应式的理解,也会有题目直接考验我们对"发布订阅"模式或者观察者模式的理解,甚至还会 ...
【2019 前端进阶之路】深入 Vue 响应式原理，活捉一个 MVVM
作者:江三疯,专注前端开发.欢迎关注公众号前端发动机,第一时间获得作者文章推送,还有各类前端优质文章,致力于成为推动前端成长的引擎. 前言作为 Vue 面试中的必考题之一,Vue 的响应式原理,想必 ...
vue 数组删除 dome没更新_详解Vue响应式原理
摘要: 搞懂Vue响应式原理! 作者:浪里行舟原文:深入浅出Vue响应式原理 Fundebug经授权转载,版权归原作者所有. 前言 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是 ...
Vue响应式原理（看这一篇就够了）
你肯定听说过Object.denfineProperty或是Proxy\reflect,这的确是在VUE响应式原理中起重要作用的一部分代码,但这远远不能代表整个流程的精妙.上图: 不懂没关系,请往下看 ...
Vue源码--解读vue响应式原理
原文链接:https://geniuspeng.github.io/2018/01/05/vue-reactivity/ Vue的官方说明里有深入响应式原理这一节.在此官方也提到过: 当你把一个普通的 ...
一篇文章带你吃透VUE响应式原理
本篇响应式原理介绍比较长,全文大概1w+字.虽然内容繁杂,但阅读过后,绝对会让你对vue的响应式有更加深刻的理解. 分块阅读,效果更佳.(建议读者有一定vue使用经验和基础再食用) 首先上图,下面这张 ...
深入理解Vue响应式原理
前言 Vue响应式原理是Vue最独特的特性之一,当数据模型进行修改时,视图就会进行更新,这使得状态管理简单直接,但是其底层的细节还是需要我们深入学习理解,这样遇到一些问题我们才能快速进行定位,并解决: ...

面试官：说说Vue响应式原理

前言：