SPA首屏加载慢怎么办？

面试官：SPA首屏加载速度慢的怎么解决？

一、什么是首屏加载

首屏时间（First Contentful Paint），指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前视窗需要的内容

首屏加载可以说是用户体验中最重要的环节

Vue3——reactive

上次我们说到了ref的用法， 今天来聊聊reactive， 其实它和ref的区别不大

1. 传值

reactive只能传引用类型的值， 比如Array， Object， Map，Set。 那么如果你用到了原始值的话：就会出现以下的报错：

vue3_ref的用法解析

ref是干什么的？

我们知道， vue2是这样配置响应式的：

而在vue3中， 我们可以使用ref来配置响应式：

vue3环境搭建

首先是需要安装node.js的， 没有安装的同学可以去官网下载： Node.js (nodejs.org)

v-if和v-show不能一起使用

面试官：v-if和v-for的优先级是什么？

一、作用

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染

v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组或者对象，而 item 则是被迭代的数组元素的别名

在 v-for 的时候，建议设置key值，并且保证每个key值是独一无二的，这便于diff算法进行优化

两者在用法上：

vue面试题

面试官：请描述下你对vue生命周期的理解？在created和mounted这两个生命周期中请求数据有什么区别呢？

一、生命周期是什么

生命周期（Life Cycle）的概念应用很广泛，特别是在政治、经济、环境、技术、社会等诸多领域经常出现，其基本涵义可以通俗地理解为“从摇篮到坟墓”（Cradle-to-Grave）的整个过程在Vue中实例从创建到销毁的过程就是生命周期，即指从创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程我们可以把组件比喻成工厂里面的一条流水线，每个工人（生命周期）站在各自的岗位，当任务流转到工人身边的时候，工人就开始工作PS：在Vue生命周期钩子会自动绑定 this 上下文到实例中，因此你可以访问数据，对 property 和方法进行运算这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())

vue实例挂载的过程中发生了什么？

面试官：Vue实例挂载的过程

一、思考

我们都听过知其然知其所以然这句话

那么不知道大家是否思考过new Vue()这个过程中究竟做了些什么？

过程中是如何完成数据的绑定，又是如何将数据渲染到视图的等等

世界上最贵的bug

一个价值8.7亿美元的bug

一位资深程序员曾经说过:

没有经历过 P0级错误的职业生涯

面试官：v-show和v-if有什么区别？使用场景分别是什么？

一、v-show与v-if的共同点

我们都知道在 vue 中 v-show 与 v-if 的作用效果是相同的(不含v-else)，都能控制元素在页面是否显示

在用法上也是相同的

声明式框架和命令式框架

最近读了霍春阳大佬的《vue.js设计与实现》， 里面提到了有关声明式框架和命令式框架的一些概念， 根据它的介绍， 加上我网上找的资料， 在我自己理解的基础上， 写下了这篇文章

声明式框架

早年间流行的 jQuery 就是典型的命令式框架。命令式框架的一大特点就是关注过程。例如，我们把下面这段话翻译成对应的代码：