面试重点-vue原理

数据驱动视图

传统组件，只是静态渲染，更新还要依赖于操作DOM

数据驱动视图-Vue MVVM

数据驱动视图－React setState （暂时按下不表）

Vue MVVM(模型视图视图模型)

总结：

组件化
数据驱动视图
MVVM

VUE的响应式

组件data的数据一旦变化，立即触发视图的更新

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

考察Vue原理的第一题

核心API-Object.defineProperty
Object.defineProperty的缺点（vue3.0启用Proxy）

Proxy有兼容性问题

Proxy兼容性不好，且无法polyfill

Object.defineProperty基本使用

监听对象，监听数组

复杂对象，深度监听

几个缺点

Object.defineProperty缺点

深度监听，需要递归到底，一次性计算量大

无法监听新增属性/删除属性（Vue.set Vue.delete）

无法原生监听数组，需要特殊处理

for...in可以循环数组或对象

虚拟DOM（Virtual DOM）和diff

vdom是实现vue和react的重要基石

diff算法是vdom中最核心，最关键的部分

vdom热门话题

DOM操作非常耗费性能

以前用jQuery，可以自行控制DOM操作的时机，手动调整

Vue和React是数据驱动视图，如何有效控制DOM操作

解决方案-vdom

有一定复杂度，减少算计次数较难

能不能把算计，更多的转移为JS计算？因为JS执行速度很快

vdom-用JS模拟DOM结构，计算出最小的变更，操作DOM

用JS模拟DOM结构

通过snabbdom学习vdom

简洁强大的vdom库,易学易用

Vue参考它实现的vdom和diff

https://github.com/snabbdom/snabbdom

snabbdom重点总结

h函数

vnode数据结构

patch函数

vdom总结

用JS模拟DOM结构(vnode)

新旧vnode对比,得出最小的更新范围,最后更新DOM

数据驱动视图的模式下,有效控制DOM操作

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,两者都相同,则认为是相同节点,不在深度比较

snabbdom-源码解读(部分)

不使用key VS使用key

diff算法总结

patchVnode
addVnodes removeVnodes
updateChildren(key的重要性)

vdom和diff0总结

vdom核心概念很重要:h,vnode,patch,diff,key等
vdom存在价值更加重要:数据驱动视图,控制DOM操作

模板编译

模板是vue开发中最常用的部分,基于使用相关联的原理

html是标签语言,只有JS才能实现判断,循环

它不是html,有指令, 插值, js表达式,能实现判断,循环

会问'组件渲染和更新过程'

前置知识:JS的with语法

vue template complier将模板编译为render函数

因此,模板一定是转换为某种JS代码,即编译模板

模板编译为render函数,执行render函数返回vnode

基于vnode在执行patch和diff

使用webpack vue-loader,会在开发环境下编译模板

执行render函数生成vnode

with语法

改变{}内自由变量的查找规则,当做obj属性来查找

如果找不到匹配的obj属性,就报错

with要慎用.他打破了作用域规则,易读性变差

vue组件中使用render代替template

总结:

with语法

模板到render函数,再到vnode,再到渲染和更新

vue组件可以用render代替template

组件渲染和更新过程

初次渲染过程

更新过程

异步渲染

初次渲染过程

解析模板为render函数(或在开发环境已完成,vue-loader)

触发响应式,监听data属性getter setter

执行render函数,生成vnode,patch(elem,vnode)

执行render函数会触发getter

更新过程

修改data,触发setter(此前在getter中已被监听)

重新执行render函数,生成newVnode

patch(vnode,newVnode)

异步渲染

回顾$nextTick

汇总data的修改,一次性更新视图

减少DOM操作次数,提高性能

以往知识回顾

响应式:监听data属性getter setter(包括数组)

模板编译:模板到render函数,再到vnode

vdom:patch(elem,vnode)和patch(vnode,newVnode)

完成流程图

前端路由原理

稍微复杂一点的SPA,都需要路由
vue-router也是vue全家桶的标配之一
属于'和日常使用相关联的原理',面试常考
hash
h5 history
vue-router路由

网页url组成部分

hash的特点

hash变化触发网页跳转.即浏览器的前进,后退

hash变化不会刷新页面,必备的特点

hash永远不会提交到server端

h5 history

用url规范大的路由,但跳转时不刷新页面

history.pushState

window.onpopstate

正常页面浏览

改造成h5 history模式

列子一:

总结

hash - window.onhashchange

H5 history - history.pushState和window.onpopstate

H5 history需后端支持

两者选择

to B的系统推荐用hash,简单易用,对url规范不敏感
to C的系统,可以考虑选择H5 history,但需要服务端支持
能简单就简单,不用复杂

Vue原理 - 总结

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

面试重点-vue原理相关推荐

面试重点——promise原理以及实现
Promise的三种状态 constructor 我们知道Promise有三种状态: pending resolved(fulfilled) rejected 这三种状态唯一,要么是pending ...
2011年9月19日面试重点：asp.net运行原理和生命周期
面试重点:asp.net运行原理和生命周期 1.ispostback回调机制 isPostBack=false !IsPostBack==ture 当前页面是第一次加载 IsPostBack 由于用户 ...
【面试题】面试官:vue的这些原理你了解吗?
前言在之前面试的时候我自己也经常会遇到一些vue原理的问题, 我也总结了下自己的经常的用到的,方便自己学习,今天也给大家分享出来, 欢迎大家一起学习交流, 有更好的方法欢迎评论区指出, 后序我也将持 ...
面试官:vue的这些原理你了解吗?
前言努力! 奋斗! 爱折腾的程序员, 不会没关系, 最重要的是我们一起学习! 在之前面试的时候我自己也经常会遇到一些vue原理的问题, 我也总结了下自己的经常的用到的,方便自己学习,今天也给大家分享 ...
web前端面试高频考点——Vue原理（理解MVVM模型、深度/监听data变化、监听数组变化、深入了解虚拟DOM）
系列文章目录内容参考链接 Vue基本使用 Vue的基本使用(一文掌握Vue最基础的知识点) Vue通信和高级特性 Vue组件间的通信及高级特性(多种组件间的通信.自定义v-model.nextTi ...
（一）导学（前端框架面试-聚焦Vue/React/Webpack）
导学全面高效学习前提前端常见面试流程知识点介绍 Vue框架部分 React框架部分工具部分项目设计讲解方式注意事项全面全面的知识体系大量的面试真题完整的技术面试流程高效直 ...
掌握这些Vue原理，就能月薪30K?
点击上方蓝色字关注我们~ 不会vue的前端工作者不是合格的web工程师!在2019年接近尾声的时候,尤雨溪宣布 Vue 3.0的源码开放了,想要在2020年跳槽的程序员们,现在可以着手准备了.去BAT ...
「mysql优化专题」90%程序员面试都用得上的索引优化手册(5)【面试重点】
本专题讲到索引查询优化,恭喜你,已经达到mysql优化的中级水平.这篇我们要讲的是mysql优化中重点中的重点--索引优化.面试官百分百必问目录多关于索引,分为以下几点来讲解: 一.索引的概述(什 ...
【Vue原理】Diff - 源码版之 Diff 流程
写文章不容易,点个赞呗兄弟专注 Vue 源码分享,文章分为白话版和源码版,白话版助于理解工作原理,源码版助于了解内部详情,让我们一起学习吧研究基于 Vue版本 [2.5.17] 如果你觉得排版难 ...

面试重点-vue原理

面试重点-vue原理相关推荐

最新文章

热门文章