2 vue和React系列综合学习

た入场券 2024-04-06 12:07 74阅读 0赞

## Vue学习思维导图 ##

> vue是一款基于MVVM和虚拟DOM思想开发的数据双向绑定的前端开发框架，`使用这个框架的好处是组件化开发前端功能`,这个框架的优势是高度封装，数据双向绑定

![在这里插入图片描述][79f13f54b2be45e5a6fe117a870b1901.png_pic_center]

## React学习思维导图 ##

> React是一款基于虚拟Dom思想开发的前端框架，用来进行前端页面的组件化开发，`它的优势就是原生JS开发，上手学习容易`

![在这里插入图片描述][a09c9f09d7924ceeb9db801d84261cfe.png_pic_center]

## Vue和React的重要区别，数据的双向绑定 ##

[参考资料][Link 1]  
[参考资料][Link 2]  
Vue的数据双向绑定是通过`Object.defineProperty数据劫持` 和`观察者模式`实现的

*  使用数据劫持吧data里的所有属性都劫持了，而且重新赋值给了data,这样所有的data的值在代码里进行修改都可以被set方法监听到，监听到之后通过观察者模式来通知所有订阅这个数据的组件进行更新
 *  观察者模式，`是一个单向向外发生数据的过程`，里面为每个属性都注册了一个观察者，观察者负责将订阅这个属性的组件都注册进来，当属性变化的时候就通知组件更新。`另一个向内发送数据的过程`：当组件值发生变化的时候是通过函数事件来在代码层面修改属性值，然后再次触发通知。  
    \-![在这里插入图片描述][2e50800f103d4e31b2d5823a26919984.png]

[79f13f54b2be45e5a6fe117a870b1901.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/1540ce3c1bad4f328ceef21b94aa3d5a.png
[a09c9f09d7924ceeb9db801d84261cfe.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/54ed626321b0464dbc0ec861b7c2c39a.png
[Link 1]: https://blog.csdn.net/ljb376766764/article/details/126001286?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-1-126001286-blog-104782467.t5_refersearch_landing&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-1-126001286-blog-104782467.t5_refersearch_landing&utm_relevant_index=1
[Link 2]: https://zhuanlan.zhihu.com/p/88648401
[2e50800f103d4e31b2d5823a26919984.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/795366b10b7d4218b84ff55dba8f104c.png