首页  思维导图  详情

4. Vue 原理

2020-04-16 11:13:56   8  举报





AI智能生成

为你推荐

查看更多



vue

vue原理 diff 双向数据绑定模板编译

diff

面试

作者其他创作

大纲/内容

前端框架及项目面试聚焦Vue/React/Webpack — 课程笔记

第4章 Vue 原理

4-1 vue原理-大厂必考

为什么考察原理？

1.知其然知其所以然2.了解原理，才能应用的更好（竞争激烈，择优录取）3.大厂造轮子（有钱有资源，业务定制，技术KPI）

如何考察vue原理？

1.考察重点，而不是考察细节。掌握好2/原则。2.考察和日常使用相关联的原理，例如vdom、模板渲染3.整体流程是否全面？热门技术是否有深度？

Vue原理包括：

组件化响应式vdom和diff模板编译渲染过程前端路由

4-2 如何理解MVVM

组件化基础

'很久以前'的组件化：1.asp jsp php已经有组件化了2.nodejs中也有类似的组件化

数据驱动视图：1.传统组件，只是静态渲染，更新还要依赖于操作DOM；2.数据驱动视图-Vue MVVM；3.数据驱动视图-React setState（暂时按不下看）

组件化是之前就有的，Vue和React搬过来，做了一个创新：数据驱动视图。

Vue MVVM

M:ModelV:ViewVM:ViewModel

View是视图，就是DOM；Model是模型，就是vue组件里的data，或者说是vuex里的数据；这两者通过ViewModel这一层来做关联，像监听事件，监听指令；通过这一层，在Model修改的时候，就能立即执行到View的渲染，View这层有什么点击事件，各种DOM事件监听的时候，都可以修改Model的数据。

4-3 监听data变化的核心API是什么

Vue响应式

组件data的数据一旦变化，立刻触发视图的更新实现数据驱动视图的第一步考察Vue原理的第一题

核心API-Object.defineProperty如何实现响应式，如何监听对象（深度监听），监听数组，代码演示Object.defineProperty的一些缺点（Vue3.0启用Proxy）

Proxy有兼容性问题

Proxy兼容性不好，且无法polyfillVue2.x还会存在一段时间，所以都得学

Object.defineProperty

基本用法

实现响应式

1.监听对象，监听数组2.复杂对象，深度监听3.几个缺点

4-4 如何深度监听data变化

课程视频

代码演示

git代码

observe.js

function defineReactive

function observer

Object.defineProperty缺点

1.深度监听，需要递归到底，一次性计算量大2.无法监听新增属性/删除属性（可以用Vue.set Vue.delete解决）3.无法原生监听数组，需要特殊处理

4-5 vue如何监听数组变化

扩展4.4中的observe.js

重新定义数组原型

Object.create（）创建新对象，原型指向 oldArrayProperty ，再扩展新的方法不会影响原型

4-6 虚拟DOM-面试里的网红

虚拟DOM(Virtual DOM)和diff

1.vdom是实现vue和react的重要基石2.diff算法是vdom中最核心、最关键的部分3.vdom是一个热门话题，也是面试中的热门问题

解决方案—vdom

1.有了一定的复杂度，想减少计算次数比较难2.能不能减少计算，更多的转移为JS计算？因为JS执行速度很快3.vdom -用JS模拟DOM结构，计算出最小的变更，操作DOM

用JS模拟DOM结构

JS模拟DOM结构

1. tag ，标签2. props，属性(包括 id 、className 、style、事件等)3. childrens，子元素，数组或者字符串

通过snabbdom学习vdom

1.简洁强大的vdom库，易学易用2.Vue参考它实现的vdom和diff3. https://github.com/snabbdom/snabbdom

1.Vue3.0重写了vdom的代码。优化了性能2.但vdom的基本理念不变，面试考点也不变3.React vdom具体实现和Vue也不同，但不妨碍统一学习

4-7 用过虚拟DOM吗

snabbdom

snabbdom中代码的解析：

snabbdom重点总结：

h函数vnode数据结构patch函数

vdom总结：

用JS模拟DOM结构（vnode）新旧vnode对比，得出最小的更新范围，最后更新DOM数据驱动视图的模式下，有效控制DOM操作

4-8 虚拟DOM-diff算法概述

diff算法：

diff算法是vdom中最核心、最关键的部分diff算法能在日常使用vue React中体现出来（如key）diff算法是前端热门话题，面试“宠儿”

diff算法概述

diff即对比，是一个广泛的概念，如linux diff命令、git diff等两个js对象也可以做diff，如https://github.com/cujojs/jiff两棵树做diff，如这里的vdom diff

树diff的时间复杂度O(n^3)

第一，遍历tree1；第二，遍历tree2第三，排序1000个节点，要计算1亿次，算法不可用

优化时间复杂度到O(n)

只比较同一层级，不跨级比较tag不相同，则直接删掉重建，不再深度比较tag和key，两者都相同，则认为是相同节点，不再深度比较

图示

同层比较

tag不同，则直接删掉重建，不再深度比较

4-9 深入diff算法源码-生成vnode

看源码的时候，找到核心函数，h() patch()等看它的参数、返回值和主要逻辑不要过于抠细枝末节

4-10 深入diff算法源码-patch函数

4-11 深入diff算法源码-patchVnode函数

4-12 深入diff算法源码-updateChildren函数

4-13 虚拟DOM-考点总结和复习

diff算法总结

1.patchVnode2.addVnodes removeVnodes3.updateChildren(key的重要性)

vdom和diff 总结

1.细节不重要，updateChildren的过程也不重要，不要深究2.vdom核心概念很重要：h、vnode、patch、diff、key等3.vdom存在的价值更加重要：数据驱动视图，控制DOM操作

4-14 模板编译前置知识点-with语法

模板编译

1.模板是vue开发中最常用的部分，即与使用相关联的原理2.它不是html，有指令、插值、JS表达式，到底是什么？3.面试不会直接问，但会通过“组件渲染和更新过程”考察

1.前置知识：JS的with语法2.vue template compiler将木模板编译为render函数3.执行render函数生成vnode

with语法

改变{}内自由变量的查找规则，当做obj属性来查找如果找不到匹配的obj属性，就会报错with要慎用，它打破了作用域规则，易读性变差

4-15 vue模板被编译成什么

理解vue模板并不是html，而是要转换成可执行的js代码，也就是render函数。编译过程中生成的函数都是render函数（with这些），返回值是vnode，然后渲染。

模板编译为render函数，执行render函数返回vnode；基于vnode再执行patch和diff；使用webpack vue-loader，会在开发环境下编译模板（重要）

使用vue-cli是集成webpack环境的，编译模板的工作都是在打包的时候做的，也就是产出的代码就没有模板了，全是render函数的形式了。这也算是vue性能优化的一点，这也是一种共识。但是如果只是自己创建的简单的vue项目（html+js），没有集成webpack环境，它是在浏览器运行时才编译的。

4-16 vue组件可用render代替template

vue组件中使用render代替template

在有些复杂情况中，不能用template，可以考虑用renderReact一直都用render（没有模板），和这里一样

总结：

with语法模板到render函数，再到vnode，再到渲染和更新vue组件可以用render代替template

4-17 回顾和复习已学的知识点

响应式、模板编译、vdom是vue原理的三个核心知识点

组件渲染/更新过程

初次渲染过程更新过程异步渲染

4-18 vue组件是如何渲染和更新的

初次渲染过程：

执行render函数会触发getter注意：如果模板中没有用到的data数据就不会触发getter，因为和视图没关系

更新过程：

流程图

4-19 vue组件是异步渲染的

异步渲染

回顾$nextTick汇总data的修改，一次性更新视图减少DOM操作次数，提高性能

4-20 如何用JS实现hash路由

前端路由原理：

稍微复杂一点的SPA（single page app 单页面应用），都需要路由vue-router也是vue全家桶的标配之一属于\"和日常使用相关联的原理\"，面试常考

vue-router的路由模式：

hashH5 history

url

hash

hash特点

hash变化会触发网页跳转，即浏览器的前进、后退hash变化不会刷新页面，SPA必需的特点hash永远不会提交到server端（前端自生自灭）

通过hash的变化来触发路由的变化，hash的跳转触发路由的跳转，hash的后退触发路由的后退。这就是通过hash的方式来触发路由，来触发视图的渲染。

hash变化

1. JS修改url // location.href = \"#/user\"2. 手动修改url的hash //在浏览器地址栏手动修改hash，但是注意如果修改了url的其它部分可能会触发页面刷新，而且会触发前进后退3. 浏览器前进、后退 //在浏览器操作前进后退，会导致hash变化

4-21 如何用JS实现H5 history路由

H5 history：

用url规范的路由，但跳转时不刷新页面history.pushStatewindow.onpopstate

H5 history的模式需要后端的配合，参考vue官方文档

无论你访问什么样的路由，最终返回的都是index.html这个路由如果没有做后端配置的兼容性，当访问到page1这个路由，点击刷新，就会报错page1页面找不到；所以后端做兼容性处理，无论访问哪个路由，都是index.html页面，然后再由前端通过history.pushState()的方式除触发路由的切换；也就是所有路由的切换都由前端来做，后端只需要返回index.html的主文件。

1.hash-window.onhashchange2.H5 history-history.pushState和window.onpopstate3.H5 history需要后端支持

两者选择

4-22 vue原理-考点总结和复习

Vue 原理-总结

1.组件化2.响应式3.vdom和diff4.模板编译5.渲染过程6.前端路由

组件化

1.组件化的历史2.数据驱动视图3.MVVM

响应式

1. Object.defineProperty2.监听对象（深度），监听数组3.Object.defineProperty的缺点（Vue3用Proxy，后面讲）

vdom和diff

1.应用背景(重要)2.vnode结构（重要）3.snabbdom

1.with语法2.模板编译成render函数3.执行render函数生成vnode