• 前端知识自问自答


    1. 什么是RFCS ?

    RFCS 英文全称 Request For Comments 。所有的互联网标准都是以RFC的形式在互联网上发表的。所有的RFC文档都可以从互联网上免费下载。并非所有的RFC文档都是互联网标准,只有很少的RFC文档最后变成了互联网标准。


    2. vue的双向绑定的原理是什么?

    vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过ES5提供的Object.defineProperty()方法来劫持(监视洛个属性的setter,getter)。在数据变动的时发布消息给订阅者,触发相应的监听回调。由于是在不同的数据上触发同步,可以精确的将变更发送发送给绑定的视图,而不收所有的数据进行一次检测。

    关于 vue2 和 vue3在此问题的区别:

    • vue是基于依赖收集的双向绑定;2.0版本使用Object.definePropetry, 3.0新版使用Proxy 
    • 基于数据劫持/依赖收集的双向绑定的优点 不需要显示的调用,Vue利用数据劫持+发布订阅,可以直接通知变化并且驱动视图。直接得到精确的变化数据,劫持了属性setter,当属性值改变,我们可以精确的获取变化的内容newValue,不需要额外的diff操
    • object.defineProperty的缺缺点:不能监听数组:因为数组没有getter和setter,因为数组长度不确定,如果太长性能负担太大;只能监听属性,而不是整个对象,需要遍历循环属性;只能监听属性变化,不能监听属性的删减
    • proxy的好处:可以监听数组;监听整个对象不是属性;返回新对象而不是直接修改原对象,更符合immutable;
    • proxy的缺点:兼容性不好,而且无法用polfill磨平;

    具体的步骤-执行原理:

    1. 需要observer的数据对象进行递归遍历,包括子属性对象的属性,都加上getter和setter这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化
    2. compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新丽数,添加监听数据的订阅者,一旦数据有变动收到通知,更新视图
    3. Watcher订阅者是Observer和compile之间通信桥梁,主要做的事情是:一在自身实例化时往属性订阅器(dep)里面添加自己,一自身必须有一个update()的方法,待属性变动dep.notice()通知的时候,能调用自身的update()方法,并触发compile中绑定的回调。
    4. MVM作为数据绑定的入口,整合observer、compile和watcher三者,通过observer来监听自己的model数据变化,通过compile来编译模板指令,最终利用watcher搭;起的observer和compile之间的通信桥梁,达到数据变化---试图更新;视图交互变化(input)-->数据model变更的双向绑定效果

     3.vue-router的原理是什么?

    vue-router的原理就是更新视图而不重新请求页面;vue-router可以通过mode参数设置为三种模式:hash模式、history模式、abstract模式。

    1. 默认是hash模式,基于浏览器history api,使用window.addEventListener('hashchange',callback,false)对浏览器地址进行监听。当调用push时,把新路由添加到浏览器访问历史的栈顶。使用replace时,把浏览器访问历史的栈顶路由替换成新路由hash的值等于url中#及其以后的内容。浏览器是根据hash值的变化,将页面加载到相应的DOM位置。锚点变化只是浏览器的行为,每次锚点变化后依然会在浏览器中留下一条历史记录,可以通过浏览器的后退按钮回到上一个位置
    2. history模式,基于浏览器history api,使用window.onpopstate对浏览器地址进行监听。对浏览器history api中的pushState()、replaceState()进行封装,当方法调用,会对浏览器的历史栈进行修改。从而实现URL的跳转而无需加载页面但是他的问题在于当刷新页面的时候会走后端路由,所以需要服务端的辅助来兜底,避免URL无法匹配到资源时能返回页面。
    3. abstract 不涉及和浏览器地址的相关记录。流程跟hash模式一样,通过数组维护模拟浏览器的历史记录栈服务端下使用。使用一个不依赖于浏览器的浏览器历史虚拟管理后台
    4. 总结hash模式和history模式都是通过window.addEvevtListenter()方法监听hashchange和popState进行相应路由的操作。可以通过back、foward、go等方法访问浏览器的历史记录栈,进行各种跳转。而abstract模式是自己维护一个模拟的浏览器历史记录栈的数组

     4.vue中计算属性computed和普通属性method的区别是什么?

    • computed属性是vue计算属性,是数据层到视图层的数据转化映射;计算属性是基于他们的依赖进行缓存的,只有在相关依赖发生改变时,他们才会重新求值,也就是说,只要他的依赖没有发生变化,那么每次访问的时候计算属性都会立即返回之前的计算结果,不再执行函数;
    • computed是响应式的,methods并非响应式
    • 调用方式不一样,computed的定义成员像属性一样访问,methods定义的成员必须以函数形式调用
    • computed是带缓存的,只有依赖数据发生改变,才会重新进行计算,而methods里的函数在每次调用时都要执行。
    • computed中的成员可以只定义一个函数作为只读属性,也可以定义get/set变成可读写属性,这点是methods中的成员做不到的
    • computed不支持异步,当computed内有异步操作时无效,无法监听数据的变化
    • 如果声明的计算属性计算量非常大的时候,而且访问量次数非常多,改变的时机却很小,那就需要用到computed;缓存会让我们减少很多计算量。

  • 相关阅读:
    websocket初体验(能传文字和图片)
    展开折叠效果 height未知 transition无效
    微信小程序自定义键盘
    微信小程序 selectComponent 值为null
    css 斜线 animation
    【转】怎样在ubuntu12.04下创建一个启动器
    以ontouch为例说明android事件发送机制
    谈谈移动应用设计——从一个普通开发者的角度
    Launch error: Failed to connect to remote VM. Connection refused.的解决办法
    Beyond compare代码比较工具。
  • 原文地址:https://www.cnblogs.com/tgzmos/p/14527522.html
Copyright © 2020-2023  润新知