web 前端 vue 面试题（五）

1. 什么是路由懒加载(当打开一个单页面应用的时候，会出现白屏，加载时间过长如何解决)?

• 当一个vue项目很大的时候，对于一些“暂时”用不到的组件，我们可以不进行加载，等到用到次组件时再加载。这样可以优化spa应用首次加载白屏情况，也给用户更好的体验。这样就是vue路由懒加载

1、使用ES中的import进行懒加载

component: () => import("@/components/HelloWorld")

2、使用VUE中的异步组件进行懒加载

component: resolve => { require(['@/components/HelloWorld'],resovle); }

2. 请说下 vue-loader 的理解

解析和转换.vue 文件，提取出其中的逻辑代码 script、样式代码 style、以及 HTML模版 template，再分别把它们交给对应的 Loader 去处理

3. 父组件如何访问子组件内部的方法

通过 this.$refs.属性.方法

4. 请说一下 vue.extend 的理解

使用 Vue 构造器，创建一个子类，参数是一个组件对象,注意 data 必须是一个函数

Vue.extend()返回的是一个扩展实例构造器，简单的来说就是一个预设了部分选项的Vue 的实例。主要用来服务 Vue.component,用来生成组件

5. 请说下你对 Vue.use 的理解

安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。

该方法需要在调用 newVue()之前被调用。

6. 如何解决路由与跨域之间的冲突

统一规范为一个入口，在一定程度上会解决冲突 或者 在 axios 中配置 baseUrl

示例：（详细介绍地址）

    proxyTable: {
            '/api/**': {
                target: 'http://localhost:3000',
                pathRewrite:{
                    '^/api':'/'
                }
            },
        },

---

import Axios from 'axios'
import VueAxios from 'vue-axios'
 
Vue.use(VueAxios, Axios)
Axios.defaults.baseURL = 'api'
 
//如果这配置 'api/' 会默认读取本地的域

7. 如何给一个响应式对象中添加一个属性？如何删除响应式对象中的属性?

importVuefrom“vue”;

newVue({
	data:{
		obj:{}
		}
	})

Vue.set(obj.name,"zhangsan")   //添加

Vue.delete(obj,"name")         //删除

8. vue 响应式原理

工作原理是当我们把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项的时候，Vue会遍历此对象的所有属性，并使用 Object.definePropert 把这些属性全部转化为getter/setter。(Object.definePropert 是仅 ES5 支持，且没有垫片脚本的特性，因此 Vue 不支持 IE8 及更低版本浏览器。）用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而使它关联的组件得以更新。

9. vue-router 实现的原理

单页面应用(SPA)的核心之一 ：更新视图而不重新请求页面,实现这一点主要是两种方式:

1. Hash:通过改变 hash 值

2. History:利用 history 对象新特性

10. 简单描述每个周期具体适合哪些场景

• beforecreate：可以在这加个 loading 事件，在加载实例时触发

• created：初始化完成时的事件写在这里，如在这结束 loading 事件，异步请求也适宜在这里调用

• mounted：挂载元素，获取到 DOM 节点

• updated：如果对数据统一处理，在这里写上相应函数

• beforeDestroy：可以做一个确认停止事件的确认框

• nextTick：更新数据后立即操作 dom

11. 你对 Vue.js 的 template 编译的理解 -------- 详细介绍地址

先转化成 AST 树，再得到的 render 函数返回 VNode

首先，通过 compile 编译器把 template 编译成 AST 语法树（abstractsyntaxtree 即源代码的抽象语法结构的树状表现形式），compile 是 createCompiler 的返回值，createCompiler 是用以创建编译器的。另外 compile 还负责合并 option。

然后，AST 会经过 generate（将 AST 语法树转化成 renderfuntion 字符串的过程）得到render 函数，render 的返回值是 VNode，VNode 是 Vue 的虚拟 DOM 节点，里面有（标签名、子节点、文本等等）

12. 前端路由和后端路由的区别

路由:

• 路由是根据不同的 url 地址展示不同的内容或页面

前端路由：

前端路由很重要的一点是页面不刷新，前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做 ，每跳转到不同的 URL 都是使用前端的锚点路由.随着（SPA）单页应用的不断普及，前后端开发分离，目前项目基本都使用前端路由，在项目 使用期 间页面 不会重 新加载 。hash 有一 个特点 ：http 请求 中不会 包含 hash 相关的内容；所以，单页面程序中的页面跳转主要用 hash 实现；

后端路由：

通过用户请求的 url 导航到具体的 html 页面；每跳转到不同的 URL，都是重新访问服务端，然后服务端返回页面，页面也可以是服务端获取数据，然后和模板组合，返 回 HTML， 也可 以 是直 接 返回 模 板 HTML， 然后 由 前端 js 再 去请 求 数据 ， 使用 前端模板和数据进行组合，生成想要的 HTML

对比：

1. 从性能和用户体验的层面来比较的话，后端路由每次访问一个新页面的时候都要向服务器发送请求，然后服务器再响应请求，这个过程肯定会有延迟。而前端路由在访问一个新页面的时候仅仅是变换了一下路径而已，没有了网络延迟，对于用户体验来说会有相当大的提升。

2. 在某些场合中，用 ajax 请求，可以让页面无刷新，页面变了但 Url 没有变化，用户就不能复制到想要的地址，用前端路由做单页面网页就很好的解决了这个问题。但是前端路由使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存。

13. 前端渲染和后端渲染的优缺点

前端渲染：

定义：

• 指的是后端返回 JSON 数据，前端利用预先写的 html 模板，循环读取 JSON 数据，拼接字符串，并插入页面。

好处:

1. 前后端分离。前端专注于前端 UI，后端专注于 api 开发，且前端有更多的选择性，而不需要遵循后端特定的模板。

2. 体验更好。比如，我们将网站做成 SPA 或者部分内容做成 SPA，这样，尤其是移动端，可以使体验更接近于原生 app。

坏处：

1. 前端响应较慢。如果是客户端渲染，前端还要进行拼接字符串的过程，需要耗费额外的时间，不如服务器端渲染速度快。

2. 不利于 SEO。目前比如百度、谷歌的爬虫对于 SPA 都是不认的，只是记录了一个页面，所以 SEO 很差。因为服务器端可能没有保存完整的 html，而是前端通过 js 进行 dom 的拼接，那么爬虫无法爬取信息。 除非搜索引擎的 seo 可以增加对于 JavaScript 的爬取能力，这才能保证 seo。

---

服务端渲染:

定义：

• 前端请求，后端用后台模板引擎直接生成 html，前端接受到数据之后，直接插入页面。

好处：

1. 前端耗时少，即减少了首屏时间

2. 有利于 SEO。因为在后端有完整的 html 页面，所以爬虫更容易爬取获得信息，更有利于 seo。

3. 无需占用客户端资源。即解析模板的工作完全交由后端来做，客户端只要解析标准的 html 页面即可，这样对于客户端的资源占用更少，尤其是移动端，也可以更省电。

4. 后端生成静态化文件。即生成缓存片段，这样就可以减少数据库查询浪费的时间了，且对于数据变化不大的页面非常高效

坏处：

1. 不利于前后端分离，开发效率低

2. 占用服务器端资源

---

---

• web 前端 vue 面试题（一）
• web 前端 vue 面试题（二）
• web 前端 vue 面试题（三）
• web 前端 vue 面试题（四）
• web 前端 vue 面试题（五）