vue框架的设计思想--渐进、轻量、数据驱动、组件化、自底向上

时间:2024-03-14 19:55:34

vue是一套用于构建用户界面的渐进式框架

参考:https://blog.csdn.net/tangxiujiang/article/details/79594860

https://blog.csdn.net/weixin_41049850/article/details/79431682

以下是看过很多渐进式框架的概念,把几个相对全面的进行了总结:

渐进式框架:只做自己该做的事情,不去做很多职责之外的事情,提供很多的操作,但是主张很少的引入。

用户可以根据自己的实际需求引入框架,在框架之外可以很自主的去做要做的事情,而框架不会强制去要求用户什么,渐进式框架也可以很好的去融合到原有系统中,渐进式框架具有低主张,功能集中,易融合等特点

————————————————————————————————————————————

vue的核心思想是数据驱动,组件化

参考:https://blog.csdn.net/tangxiujiang/article/details/79800186

https://blog.csdn.net/tangxiujiang/article/details/79594860

vue是mvvm框架,m是model,含义是一种javaScript对象,数据访问层

v是view,视图层,即ui

vm一起代表ViewModel,是vue的一个实例对象,可以理解为是一个操作间,链接视图和model的操作间,在这个操作间里,把数据自动转化为视图,视图上用户的操作自动更新相关的数据。


操作间里有Observer、Compile、Watcher,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化 (ViewModel)-》视图更新(view)

注:vue的核心功能就是实现这个操作间的指令封装,而配套的视图则使用的是操作间规定的模板写法,每个模板可以看做是vue的组件,这也是vue设计的核心思想。

vue框架的设计思想--渐进、轻量、数据驱动、组件化、自底向上

vue的双向数据绑定原理:

vue框架的设计思想--渐进、轻量、数据驱动、组件化、自底向上

注:双向绑定建立流程:

new Vue的一个实例对象的a,其中一个属性a.b,在实例化的过程中,通过Object.definePrototype()方法,会对a.b添加getter,setter,同时vue.js会对模板做编译,生成一个指令对象(根据模板生成对应的对象,这里是v-text),每个指令对象关联一个Watcher,这时会去取a.b的值,进而触发getter,当去修改a.b的值时,会触发setter,同时通知watcher,watcher再次去取a.b的值,并和a.b旧值比较,如果更改了,Watcher通知指令去调用update()方法,而指令是对dom的封装,所以就会调用DOM的原生方法更视图。

同时vue还会监听DOM事件,当执行事件时更新数据。

总结:vue专注于视图层面,便于与第三方库或既有项目整合,当与现代化的工具链以及各种支持类库结合使用时,vue也完全能够为复杂的单页应用提供驱动