1、数据驱动
只要改变数据,Vuejs会通过Directives指令对DOM进行封装,当数据发生变化,会通知相应的DOM进行变化
Vuejs会对DOM进行监听,通过DOMListeners监听视图的变化,通知数据进行改变,这样就实现了数据的双向绑定
数据相应原理
现在有一份a.b的数据,当vue对象实例化的时候,会通过es5的Object.defineproperty创建setter和getter方法,vuejs编译模板生成指令对象(黄色部分),每个指令对象都会关联一个watcher。当我们对指令的a.b做求值时,会触发getter方法;(绿色部分)把依赖设置到了Watcher,当a.b数据发生改变时,会触发setter,通知到对应关联的watcher,watcher会对a.b进行求值,计算对比新旧值,发现值改变了,watcher会通知到指令,调用指令的update方法,由于指令是对DOM的封装,所以指令会通过原生DOM的方法,更新视图
2.组件化
组件设置原则
页面上每个独立的可视/可交互区域视为一个组件
每个组件对应一个工程目录,组件所需要的各种资源在这个目录就近维护(包括JS ,CSS等)
页面不过是组件的容器,组件可以嵌套自由组合形成完整的页面