51 Vue事件绑定原理说一下
原生事件绑定是通过
addEventListener
绑定给真实元素的,组件事件绑定是通过Vue
自定义的$on
实现的
52 Vue模版编译原理知道吗,能简单说一下吗?
简单说,
Vue
的编译过程就是将template
转化为render
函数的过程。会经历以下阶段:
-
生成 AST
树 -
优化 -
codegen
-
首先解析模版,生成 AST
语法树(一种用JavaScript
对象的形式来描述整个模板)。 使用大量的正则表达式对模板进行解析,遇到标签、文本的时候都会执行对应的钩子进行相关处理。 -
Vue
的数据是响应式的,但其实模板中并不是所有的数据都是响应式的。有一些数据首次渲染后就不会再变化,对应的DOM也不会变化。那么优化过程就是深度遍历AST树,按照相关条件对树节点进行标记。这些被标记的节点(静态节点)我们就可以跳过对它们的比对,对运行时的模板起到很大的优化作用。 -
编译的最后一步是将优化后的 AST
树转换为可执行的代码
53 Vue2.x和Vue3.x渲染器的diff算法分别说一下
简单来说,
diff
算法有以下过程
-
同级比较,再比较子节点 -
先判断一方有子节点一方没有子节点的情况(如果新的 children
没有子节点,将旧的子节点移除) -
比较都有子节点的情况(核心 diff
) -
递归比较子节点 -
正常 Diff
两个树的时间复杂度是O(n^3)
,但实际情况下我们很少会进行跨层级的移动DOM
,所以Vue
将Diff
进行了优化,从O(n^3) -> O(n)
,只有当新旧children
都为多个子节点时才需要用核心的Diff
算法进行同层级比较。 -
Vue2
的核心Diff
算法采用了双端比较的算法,同时从新旧children
的两端开始进行比较,借助key
值找到可复用的节点,再进行相关操作。相比React
的Diff
算法,同样情况下可以减少移动节点次数,减少不必要的性能损耗,更加的优雅 -
在创建 VNode
时就确定其类型,以及在mount/patch
的过程中采用位运算来判断一个VNode
的类型,在这个基础之上再配合核心的Diff
算法,使得性能上较Vue2.x
有了提升
54 再说一下虚拟Dom以及key属性的作用
-
由于在浏览器中操作 DOM
是很昂贵的。频繁的操作DOM
,会产生一定的性能问题。这就是虚拟Dom的产生原因 -
Virtual DOM
本质就是用一个原生的JS对象去描述一个DOM
节点。是对真实DOM的一层抽象 -
VirtualDOM
映射到真实DOM要经历VNode
的create
、diff
、patch
等阶段
key的作用是尽可能的复用 DOM 元素
-
新旧 children
中的节点只有顺序是不同的时候,最佳的操作应该是通过移动元素的位置来达到更新的目的 -
需要在新旧 children
的节点中保存映射关系,以便能够在旧children
的节点中找到可复用的节点。key
也就是children
中节点的唯一标识
55 Vue中组件生命周期调用顺序说一下
-
渲染顺序:先父后子,完成顺序:先子后父 -
更新顺序:父更新导致子更新,子更新完成后父 -
销毁顺序:先父后子,完成顺序:先子后父
加载渲染过程
父beforeCreate`->`父created`->`父beforeMount`->`子beforeCreate`->`子created`->`子beforeMount`- >`子mounted`->`父mounted
子组件更新过程
父beforeUpdate`->`子beforeUpdate`->`子updated`->`父updated
父组件更新过程
父 beforeUpdate` -> `父 updated
销毁过程
父beforeDestroy`->`子beforeDestroy`->`子destroyed`->`父destroyed
56 SSR了解吗
SSR
也就是服务端渲染,也就是将Vue
在客户端把标签渲染成HTML的工作放在服务端完成,然后再把html直接返回给客户端
SSR
有着更好的SEO
、并且首屏加载速度更快等优点。不过它也有一些缺点,比如我们的开发条件会受到限制,服务器端渲染只支持beforeCreate
和created
两个钩子,当我们需要一些外部扩展库时需要特殊处理,服务端渲染应用程序也需要处于Node.js
的运行环境。还有就是服务器会有更大的负载需求
57 你都做过哪些Vue的性能优化
编码阶段
-
尽量减少 data
中的数据,data
中的数据都会增加getter
和setter
,会收集对应的watcher
-
v-if
和v-for
不能连用 -
如果需要使用 v-for
给每项元素绑定事件时使用事件代理 -
SPA
页面采用keep-alive
缓存组件 -
在更多的情况下,使用 v-if
替代v-show
-
key
保证唯一 -
使用路由懒加载、异步组件 -
防抖、节流 -
第三方模块按需导入 -
长列表滚动到可视区域动态加载 -
图片懒加载
SEO优化
-
预渲染 -
服务端渲染 SSR
打包优化
-
压缩代码 -
Tree Shaking/Scope Hoisting
-
使用 cdn
加载第三方模块 -
多线程打包 happypack
-
splitChunks
抽离公共文件 -
sourceMap
优化
用户体验
-
骨架屏 -
PWA
还可以使用缓存(客户端缓存、服务端缓存)优化、服务端开启
gzip
压缩等。
58 Vue.js特点
-
简洁:页面由 HTML
模板+Json数据+Vue
实例组成 -
数据驱动:自动计算属性和追踪依赖的模板表达式 -
组件化:用可复用、解耦的组件来构造页面 -
轻量:代码量小,不依赖其他库 -
快速:精确有效批量DOM更新 -
模板友好:可通过npm,bower等多种方式安装,很容易融入
59 请说出vue.cli项目中src目录每个文件夹和文件的用法
-
assets
文件夹是放静态资源; -
components
是放组件; -
router
是定义路由相关的配置; -
view
视图; -
app.vue
是一个应用主组件; -
main.js
是入口文件
60 vue路由传参数
-
使用 query
方法传入的参数使用this.$route.query
接受 -
使用 params
方式传入的参数使用this.$route.params
接受
原文始发于微信公众号(消失的程序员):Vue.js面试题精选—6
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/250902.html