[JavaScript知识库]绝招----Vue原理

造轮子：有钱有资源，业务定制，技术KPI（提升开发业务效率/业务定制).

考察重点，而不是细节。 2/8原则。

和使用相关联的原理，例如vdom/模板渲染（更好工作产出）

热门技术深度？ 整体流程全面（！！！）

一： 组件化

二：响应式

三： vdom diff （热门技术）? ?v-for中为什么要用key？

四：模板编译

五：渲染过程（流程全面度）? 描述组件渲染和更新的过程？? ? ?

六： 前端路由

一：组件化基础（）

传统的组件是静态渲染，更新要依赖操作DOM （jquery）

数据驱动视图（MVVM，setState）【不动dom 只改数据 不要操作dom】

怎么理解MVVM

View（视图）

Vue （vue model层）通过这一层 m的数据变化能够执行到V的渲染? V层的点击阿 等等也能执行到M层 【此层是个连接层】

Model（组件里面data）

二： Vue的响应式

组件中data数据变化 立刻出发视图更新

实现数据驱动视图的第一步

核心API? Object.defineProperty

V3.0用Proxy避免缺点（兼容性问题 无法polyfill 不兼容IE11 浏览器）

缺点：1.深度监听需要递归到底 计算量大

? ? ? ? ? ?2.新增和删除 监听不到（Vue.set Vue.delete? ?2.0中有用）
????????????????3.无法原生监听数组 需要特殊处理（对原型中做修改）

三： vdom diff

vdom是实现vue react 基石

diff算法是vdom中核心

DOM操作耗时耗费性能

vue与react数据驱动视图 如何有效控制DOM操作 ？【框架原因】

vdom原理：把DOM更新计算更多转移到js计算 因为V8速度快

用js模拟dom结构（没有严格的要求），计算最小的变更，操作dom

xml的结构? 用json的结构表示?

怎么用： snabbdom库

3.0 与react 的实现都不同 但是基本理念是一样的。

虚拟dom要素： 1.标签 或者选择器 （tag/ sel)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2.属性 （属性或者样式或者事件）（data props）

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 3.子元素 children

1. h函数如何生成vnode 结构
2.patch的初次渲染以及更新 销毁

3.vDom的数据结构

虚拟vdom使用：用js模拟dom结构
新旧vdom的对比 得出最小更新范围 最后更新dom（控制）

数据驱动视图模式下? 有效控制dom操作? 性能得到保证