第八天vue面试题

作者: 小程要谦虚 | 来源:发表于2019-07-09 09:12 被阅读129次

    来自大神郝晨光

    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,

    在数据变动时发布消息给订阅者,触发相应的监听回调。

    相关文章

      网友评论

        本文标题:第八天vue面试题

        本文链接:https://www.haomeiwen.com/subject/nihwhctx.html