022.整理几个面试题——关于Vue原理（简）

Posted Ruovan

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了022.整理几个面试题——关于Vue原理（简）相关的知识，希望对你有一定的参考价值。

关于原理

网上收集整理

01. MVVM框架是什么？

  • 概念：MVVM框架，即Model-View-ViewModel

    • Model 层：
      • 即数据模型层，泛指后端进行的各种业务逻辑处理和数据操控
      • 对于前端来说就是后端提供的 api 接口
    • View 层：
      • 即视图层，也就是用户界面
      • 前端主要由 html 和 CSS 来构建
    • ViewModel层：
      • ViewModel 是由前端开发人员组织生成和维护的视图数据层

  • 作用：主要用于实现双向数据绑定

    • 当数据一旦改变，就会相应的刷新对应的视图层UI
    • 当视图层发生变化，也会改变对应的数据
    • 这样，在业务处理中就可以只关心数据，不需要关心View如何处理数据

02. Vue双向数据绑定？

  • Vue的双向数据绑定主要是指：数据变化更新视图，视图变化更新数据

其中，View 变化更新 Data ，可以通过事件监听的方式来实现

所以 Vue 的数据双向绑定的工作主要是：如何根据 Data 变化更新 View

  • vue的双向数据绑定是通过数据劫持结合 发布订阅模式的方式来实现的

    • 其核心是：通过Object.defineProperty()，劫持各个属性的set和get事件

  • Vue 主要通过以下 4 个步骤来实现数据双向绑定的：

    • （1）实现一个监听器 Observer
      • 对数据对象进行遍历，包括子属性对象的属性，利用 Object.defineProperty() 给属性都加上setter()和 getter()
      • 这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到数据变化
    • （2）实现一个解析器 Compile
      • 解析 Vue 模板指令，将模板中的变量都替换成数据
      • 然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数
      • 添加监听数据的订阅者，一旦数据有变动，收到通知，调用更新函数进行数据更新
    • （3）实现一个订阅者 Watcher
      • Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁
      • 主要任务是：订阅 Observer 中的属性值变化的消息
      • 当收到属性值变化的消息时，会触发解析器 Compile 中对应的更新函数
    • （4）实现一个订阅器 Dep
      • 订阅器采用 发布-订阅 设计模式
      • 用来收集订阅者 Watcher，对监听器 Observer 和 订阅者 Watcher 进行统一管理

    双向绑定

  • 这里有一个简单的双向绑定代码，供大家参考

    <body>
    <div id="app">
        <input type="text" id="txt">
        <p id="show"></p>
    </div>
</body>
<script type="text/javascript">
    var obj = {}
    Object.defineProperty(obj, 'txt', {
        get: function () {
            return obj
        },
        set: function (newValue) {
            document.getElementById('txt').value = newValue
            document.getElementById('show').innerHTML = newValue
        }
    })
    document.addEventListener('keyup', function (e) {
        obj.txt = e.target.value
    })
</script>

03. 单向数据流怎么理解？

  • 父级 prop 的更新会向下流动到子组件中，但是反过来则不行
    • 这样可以防止子组件意外改变父组件的状态，从而导致应用的数据流向难以理解

04. Vue3的Proxy？

  • Proxy的优势如下:

    • Proxy 可以直接监听对象和数组的变化
    • Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的
    • Proxy 返回的是一个新对象，我们可以只操作新的对象达到目的，而 Object.defineProperty 只能遍历对象属性直接修改
    • Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利；

  • Object.defineProperty的优势如下:

    • 兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平，因此 Vue 的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重写。

05. 虚拟DOM的优缺点？

  • 虚拟DOM：virtual-dom
    • 是一个普通的JavaScript对象，用来描述真实的DOM，是对真实DOM的抽象
  • 优点：
    • 可以提升性能
    • 不需要手动操作DOM
    • 可以维护视图和状态的关系
    • 可以跨平台开发
  • 缺点：
    • 虽然虚拟 DOM + 合理的优化，足以应对绝大部分应用的性能需求，但在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化

06. 虚拟DOM实现原理

  • 虚拟 DOM 的实现原理主要包括以下 3 部分：

    • 用 JavaScript 对象模拟真实 DOM 树，对真实 DOM 进行抽象
    • diff 算法 — 比较两棵虚拟 DOM 树的差异
      • 只比较同一层级，不跨级比较
      • tag不相同，则直接删除重建，不再深度比较
      • tag和key，两者都相同，则认为是相同节点
        • 然后比较属性，以及子节点
    • pach 算法 — 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树

以上是关于022.整理几个面试题——关于Vue原理（简）的主要内容，如果未能解决你的问题，请参考以下文章

022.整理几个面试题——关于Vue原理（简）

023.整理几个面试题——关于Vue？

023.整理几个面试题——关于Vue？

023.整理几个面试题——关于Vue？

021.整理几个面试题——关于Vue框架

021.整理几个面试题——关于Vue框架