lzpDailyNotes

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

vue2数据双向绑定和vue3数据双向绑定的原理透析

参考资料 : https://www.jianshu.com/p/d7e2efde434b

https://www.jianshu.com/p/d7e2efde434b

背景:面试官10个有9个都会问这个问题,所以深究一下啦

需要提前了解的知识:

​ 1.什么是MVVM: 是一种设计思想,由模型层(M)+视图层(V)+视图模型层(VM)构成。MVVM主要通过数据劫持+发布订阅模式实现

2.MVVM的优点:

​ ① 低耦合性 view 和 model 之间没有直接的关系,通过 viewModel 来完成数据双向绑定。

​ ②可复用性 组件是可以复用的。可以把一些数据逻辑放到一个 viewModel 中,让很多 view 来重用。

​ ③独立开发 开发人员专注于 viewModel ,设计人员专注于view。

​ ④可测试性 ViewModel 的存在可以帮助开发者更好地编写测试代码。

​ ⑤不用操作大量的dom

​ 3.MVVM的缺点:

​ ①bug很难被调试,因为数据双向绑定,所以问题可能在 view 中,也可能在 model 中,要定位原始bug的位置比较难,同时view里面的代码没法调试,也添加了bug定位的难度。

​ ②一个大的模块中的 model 可能会很大,长期保存在内存中会影响性能。

​ ③对于大型的图形应用程序,视图状态越多, viewModel 的构建和维护的成本都会比较高。

​ 4.mvvm的双向绑定原理:

​ 核心就是数据劫持、数据代理、数据编译和发布订阅模式:

​ ①数据劫持-就是给对象添加get、set钩子函数

​ 1.观察对象,给对象增加Object.defineProperty

​ 2.循环递归data属性,给属性添加get、set钩子函数

​ 3.vue的特点就是新增不存在的属性不会给该属性添加get、set钩子函数

​ 4.每次赋予一个新对象时,会给这个新对象进行数据劫持(defineProperty)

​ ②数据代理:

​ 解释:将data、method、computed上的数据挂在到vm实例上

​ ③数据编译:

​ 解释:把{{}},v-html,v-model,v-on 里面对应的变量用data里面的数据进行替换

​ ④发布订阅:

​ 主要靠的是数组关系,订阅就是放入函数,发布就是让数组里的函数执行。在get钩子函数被调用时进行数据的订阅,在set钩子函数被调用时进行数据的发布。

vue2的数据双向绑定原理:

​ 1.递归data中的值并添加Object.defineProperty()

​ 2.dep的实现

​ 3.compiler实现对vue各个指令模板的解析器,生成抽象语法树,编译成Virtual Dom,渲染视图

​ 4.第四步:Watcher 连接observer和compiler,接受每个属性变动的通知,绑定更新函数,更新视图

​ 5.完整实现代码:

defineProperty的缺点: //监听的是对象的某个属性,而非整个对象

​ 1.无法检测到对象属性的新增或删除

​ 2.不能监听数组的变化

vue3的数据双向绑定原理:

​ proxy的劣势: //监听的是整个对象

​ 1.兼容性问题

​ 2.性能差

posted on 2023-05-30 01:48  码hey  阅读(163)  评论(0编辑  收藏  举报