vue_interview(4/5/6)
4. 你怎么理解vue中的diffff算法？
源码分析1：必要性，lifecycle.js - mountComponent()
组件中可能存在很多个data中的key使用
源码分析2：执行方式，patch.js - patchVnode()
patchVnode是diffff发生的地方，整体策略：深度优先，同层比较
源码分析3：高效性，patch.js - updateChildren()
测试代码：
Vue源码剖析
虚拟DOM
{{foo}}
总结
1.diffff算法是虚拟DOM技术的必然产物：通过新旧虚拟DOM作对比（即diffff），将变化的地方更新在真实DOM上；另外，也需要diffff高效的执行对比过程，从而降低时间复杂度为O(n)。
2.vue 2.x中为了降低Watcher粒度，每个组件只有一个Watcher与之对应，只有引入diffff才能精确找到发生变化的地方。
3.vue中diffff执行的时刻是组件实例执行其更新函数时，它会比对上一次渲染结果oldVnode和新的渲染结果newVnode，此过程称为patch。
4.diffff过程整体遵循深度优先、同层比较的策略；两个节点之间比较会根据它们是否拥有子节点或者文本节点做不同操作；比较两组子节点是算法的重点，首先假设头尾节点可能相同做4次比对尝试，如果没有找到相同节点才按照通用方式遍历查找，查找结束再按情况处理剩下的节点；借助key通常可以非常精确找到相同节点，因此整个patch过程非常高效。
5. 谈一谈对vue组件化的理解？
回答总体思路：
组件化定义、优点、使用场景和注意事项等方面展开陈述，同时要强调vue中组件化的一些特点。
源码分析1：组件定义
// 组件定义
Vue.component('comp', {
template: 'this is a component'
})
组件定义，src\core\global-api\assets.js
this is a component
vue-loader会编译template为render函数，最终导出的依然是组件配置对象。
源码分析2：组件化优点
lifecycle.js - mountComponent()
组件、Watcher、渲染函数和更新函数之间的关系
源码分析3：组件化实现
构造函数，src\core\global-api\extend.js
实例化及挂载，src\core\vdom\patch.js - createElm()
总结
-
组件是独立和可复用的代码组织单元。组件系统是 Vue 核心特性之一，它使开发者使用小型、独立和通常可复用的组件构建大型应用；
-
组件化开发能大幅提高应用开发效率、测试性、复用性等；
-
组件使用按分类有：页面组件、业务组件、通用组件；
-
vue的组件是基于配置的，我们通常编写的组件是组件配置而非组件，框架后续会生成其构造函数，它们基于VueComponent，扩展于Vue；
-
vue中常见组件化技术有：属性prop，自定义事件，插槽等，它们主要用于组件通信、扩展等；
-
合理的划分组件，有助于提升应用性能；
-
组件应该是高内聚、低耦合的；
-
遵循单向数据流的原则。
6. 谈一谈对vue设计原则的理解？
在vue的官网上写着大大的定义和特点：
渐进式JavaScript框架
易用、灵活和高效
所以阐述此题的整体思路按照这个展开即可。
渐进式 JavaScript框架：
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易
于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使
用时，Vue 也完全能够为复杂的单页应用提供驱动
[https://cn.vuejs.org/v2/guide/single-file-components.html]
[https://github.com/vuejs/awesome-vue#libraries--plugins]
易用性
vue提供数据响应式、声明式模板语法和基于配置的组件系统等核心特性。这些使我们只需要关注应用
的核心业务即可，只要会写js、html和css就能轻松编写vue应用。
灵活性
渐进式框架的最大优点就是灵活性，如果应用足够小，我们可能仅需要vue核心特性即可完成功能；随
着应用规模不断扩大，我们才可能逐渐引入路由、状态管理、vue-cli等库和工具，不管是应用体积还是
学习难度都是一个逐渐增加的平和曲线。
高效性
超快的虚拟 DOM 和 diffff 算法使我们的应用拥有最佳的性能表现。
追求高效的过程还在继续，vue3中引入Proxy对数据响应式改进以及编译器中对于静态内容编译的改进都会让vue更加高效。