2023-12-16 19:18 南京大学 前端工程师
关注
说一说你对Vue响应式原理的理解
最近发现好多同学在面试回答Vue响应式原理时，都只是回答了其中一部分，要么就是真的不了解，要么就是不知道该怎么完美回答这个问题，今天，理想哥就和大家说说 该怎么样完美的回答这个问题，征服面试官。
还是老规矩，麻烦大家先点个赞收藏下，且听理想哥说来。
关于这个面试题，大家可以套用这个模板来回答：vue2是怎么做的？vue2这种方法有什么问题？vue3又是怎么做的？vue3是怎么解决vue2的这些问题的？
接下来，理想哥给个完整的回答，大家可以参考下
关于Vue的响应式原理，vue2中是使用了Object.defineProperty来实现的，在页面开始加载时，vue会遍历data中的所有属性，并使用 Object.defineProperty 把这些属性全部都转为 getter/setter，当用户访问或者设置属性时，会触发 getter/setter 方法，然后通知每个组件实例对应的watcher方法，然后实现视图的更新
但是，Object.defineProperty也是有缺点的，主要有以下三个缺点：
第一个，对于复杂对象需要深度监听，一次性监听到底，计算量比较大
第二，对于对象的新增/删除属性的操作，无法监听，需要使用Vue.$set、Vue.$delete辅助
第三，需要重写数组原生方法实现数组的监听
所以，在vue3中，使用了proxy来代替defineProperty，proxy有以下几个优势：
第一，可以直接监听整个对象，而不需要遍历监听属性，性能会有提升
第二，proxy可以直接监听数组的变化，而不需要再去重写数组原生方法
第三，Proxy 有多达 13 种拦截方法，功能更加强大
第四，Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利；
以上就是我的回答
怎么样？这样回答是不是就很完美了，大家下次面试时候可以试着这么回答，看看面试官啥表情。#前端##前端 开发工程师##前端面试必备宝典#
还是老规矩，麻烦大家先点个赞收藏下，且听理想哥说来。
关于这个面试题，大家可以套用这个模板来回答：vue2是怎么做的？vue2这种方法有什么问题？vue3又是怎么做的？vue3是怎么解决vue2的这些问题的？
接下来，理想哥给个完整的回答，大家可以参考下
关于Vue的响应式原理，vue2中是使用了Object.defineProperty来实现的，在页面开始加载时，vue会遍历data中的所有属性，并使用 Object.defineProperty 把这些属性全部都转为 getter/setter，当用户访问或者设置属性时，会触发 getter/setter 方法，然后通知每个组件实例对应的watcher方法，然后实现视图的更新
但是，Object.defineProperty也是有缺点的，主要有以下三个缺点：
第一个，对于复杂对象需要深度监听，一次性监听到底，计算量比较大
第二，对于对象的新增/删除属性的操作，无法监听，需要使用Vue.$set、Vue.$delete辅助
第三，需要重写数组原生方法实现数组的监听
所以，在vue3中，使用了proxy来代替defineProperty，proxy有以下几个优势：
第一，可以直接监听整个对象，而不需要遍历监听属性，性能会有提升
第二，proxy可以直接监听数组的变化，而不需要再去重写数组原生方法
第三，Proxy 有多达 13 种拦截方法，功能更加强大
第四，Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利；
以上就是我的回答
怎么样？这样回答是不是就很完美了，大家下次面试时候可以试着这么回答，看看面试官啥表情。#前端##前端 开发工程师##前端面试必备宝典#
全部评论
zbwer
电子科技大学 前端工程师
你要答响应式，就不能直答响应式，你要说副作用函数，你要说依赖收集与触发更新，你要说proxy具体怎么代理，你还要说副作用怎么用weakmap保存。你甚至可以说watch和computed原理就是副作用函数，你还可以说怎么代理原始值，你可以说很多很多，你要只说proxy，那我只能说你的深度和广度都不太行
相关推荐
查看29道真题和解析 点赞 评论 收藏
分享
查看3道真题和解析 点赞 评论 收藏
分享