目录:
1,Vue中双向数据绑定是如何实现的
2,详述虚拟DOM中的diff算法
3,vue提供了几种脚手架模板
4.常见的几种MVVM的实现方式
一:Vue中的双向数据绑定是如何实现的
**Vue的双向数据绑定是通过数据劫持结合发布者订阅者模式来实现的
条件:
1、实现一个数据监听器Observer,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者
2、实现一个指令解析器Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数
3、实现一个Watcher,作为连接Observer和Compile的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图
4、MVVM入口函数,整合以上三者
个人理解:在new Vue的时候,在Observer中通过Object.defineProperty()达到数据劫持,代理所有数据的getter和setter属性,在每次触发setter的时候,都会通过Dep来通知Watcher,Watcher作为Observer数据监听器与Compile模板解析器之间的桥梁,当Observer监听到数据发生改变的时候,通过Updater来通知Compile更新视图
而Compile通过Watcher订阅对应数据,绑定更新函数,通过Dep来添加订阅者,达到双向绑定
二:详述虚拟DOM中的diff算法
1,首先要先讲一下虚拟DOM是如何实现的
虚拟DOM是通过js语法来在内存中维护一个通过数据解构描述出来的一个模拟DOM树,当数据发生改变的时候,会先对虚拟DOM进行模拟修改,然后在通过新的虚拟DOM树与旧的虚拟DOM树来对比,而这个对比就是通过diff算法来进行的虚拟DOM最大的意义不在于性能的提升(JavaScript对象比DOM对象性能高),而在于抽象了DOM的具体实现(对DOM进行了一层抽象)
so:步骤一:用JS对象模拟DOM树
步骤二:比较两棵虚拟DOM树的差异
步骤三:把差异应用到真正的DOM树上
同时维护新旧两棵虚拟DOM树,当数据发生改变的时候,开始执行对比
首先对根元素进行对比,如果根元素发生改变就直接对根元素替换
三:Vue提供了几种脚手架模板
webpack- 一个全面的webpack+vue-loader的模板,功能包括热加载,linting,检测和CSS扩展。
webpack-simple- 一个简单webpack+vue-loader的模板,不包含其他功能,让你快速的搭建vue的开发环境。
browserify- 一个全面的Browserify+vueify 的模板,功能包括热加载,linting,单元检测。
browserify-simple- 一个简单Browserify+vueify的模板,不包含其他功能,让你快速的搭建vue的开发环境。
simple- 一个最简单的单页应用模板。
pwa- 一个集成pwa环境的webapp的模板
四:常见的几种MVVM的实现方式
发布者-订阅者模式(backbone.js)
脏值检查(angular.js)
数据劫持(vue.js)