来自大神郝晨光
Vue中双向数据绑定是如何实现的
vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。
详述虚拟DOM中的diff算法
首先要先讲一下虚拟DOM是如何实现的
虚拟DOM是通过js语法来在内存中维护一个通过数据解构描述出来的一个模拟DOM树,当数据发生改变的时候,会先对虚拟DOM进行模拟修改,然后在通过新的虚拟DOM树与旧的虚拟DOM树来对比,而这个对比就是通过diff算法来进行的
虚拟DOM最大的意义不在于性能的提升(JavaScript对象比DOM对象性能高),而在于抽象了DOM的具体实现(对DOM进行了一层抽象)
接着,来看一下diff算法是如何进行比对的
正常的diff算法,是通过层层对比,单单对比来进行的,对于我们的前端性能来说,很明显是不可以这样实现的。
前端的虚拟DOM对比
所以,前端的diff算法是通过以下步骤来实现的
步骤一:用JS对象模拟DOM树
步骤二:比较两棵虚拟DOM树的差异
步骤三:把差异应用到真正的DOM树上
同时维护新旧两棵虚拟DOM树,当数据发生改变的时候,开始执行对比
首先对根元素进行对比,如果根元素发生改变就直接对根元素替换
如果根元素没有发生改变的话,再对下一层元素进行对比,如果对比发现元素发生删除,就执行删除,发现元素被替换就执行替换,发现添加了新的元素就执行添加
对比的同时,会通过key值来判断元素是否发生改变,判断元素是仅仅位置发生改变还是需要整个替换或删除
如果不是元素发生改变的话,再对内容进行对比,如果是内容发生改变的话,就直接修改内容
其实就是进行逐层对比,再通过不同的对比来判断执行不同的操作
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)
发布者-订阅者模式
一般通过sub,pub的方式实现数据和视图的绑定监听,
更新数据方式通常做法是vm.set('property', value)。
这种方式现在毕竟太low了,我们更希望通过vm.property = value这种方式更新数据,同时自动更新视图,于是有了下面两种方式。
脏值检查
angular.js 是通过脏值检测的方式比对数据是否有变更,来决定是否更新视图,
最简单的方式就是通过 setInterval() 定时轮询检测数据变动,
angular只有在指定的事件触发时进入脏值检测,大致如下:
1、DOM事件,譬如用户输入文本,点击按钮等。(ng-click)
2、XHR响应事件 ($http)
3、浏览器Location变更事件 ($location)
4、Timer事件($timeout,$interval)
5、执行$digest()或$apply()
数据劫持
vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,
通过Object.defineProperty()来劫持各个属性的setter,getter,
在数据变动时发布消息给订阅者,触发相应的监听回调。
网友评论