Vue面试题

1、Vue的优点

轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十 kb ；
简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；
双向数据绑定：保留了 angular 的特点，在数据操作方面更为简单；
组件化：保留了 react 的优点，实现了 html 的封装和重用，在构建单页面应用方面有着独特的优势；
视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；
虚拟DOM（了解）：dom 操作是非常耗费性能的， 不再使用原生的 dom 操作节点，极大解放 dom 操作，但具体操作的还是 dom 不过是换了另一种方式；
运行速度更快：相比较于 react 而言，同样是操作虚拟 dom ，就性能而言， vue 存在很大的优势。

2、Vue3.x响应式数据原理

Vue3.x改用Proxy替代Object.defineProperty。
因为Proxy可以直接监听对象和数组的变化。
Proxy只会代理对象的第一层，Vue3是怎样处理这个问题的呢？
判断当前Reflect.get的返回值是否为Object，如果是则再通过reactive方法做代理， 这样就实现了深度观测。
监测数组的时候可能触发多次get/set，那么如何防止触发多次呢？我们可以判断key是否为当前被代理对象target自身属性，
也可以判断旧值与新值是否相等，只有满足以上两个条件之一时，才有可能执行trigger。

3、Vue3.0 里为什么要用 Proxy API替代 defineProperty API？

1）defineProperty API 的局限性最大原因是它只能针对单例属性做监听。
Vue2.x中的响应式实现正是基于defineProperty中的descriptor，对 data 中的属性做了遍历 + 递归，为每个属性设置了 getter、setter。
这也就是为什么 Vue 只能对 data 中预定义过的属性做出响应的原因。
2）Proxy API的监听是针对一个对象的，那么对这个对象的所有操作会进入监听操作， 这就完全可以代理所有属性，将会带来很大的性能提升和更优的代码。
3）响应式是惰性的。
在 Vue.js 2.x 中，对于一个深层属性嵌套的对象，要劫持它内部深层次的变化，就需要递归遍历这个对象，执行 Object.defineProperty
把每一层对象数据都变成响应式的，会降低性能
在 Vue.js 3.0 中，使用 Proxy API 并不能监听到对象内部深层次的属性变化，因此它的处理方式是在 getter 中去递归响应式，
这样的好处是真正访问到的内部属性才会变成响应式，简单的可以说是按需实现响应式，减少性能消耗。

4、vue中组件的data为什么是一个函数？而new Vue 实例里，data 可以直接是一个对象

Vue组件其实就是一个Vue实例。
JS中的实例是通过构造函数来创建的，每个构造函数可以new出很多个实例，那么每个实例都会继承原型上的方法或属性。
Vue的data数据其实是Vue原型上的属性，数据存在于内存当中。Vue为了保证每个实例上的data数据的独立性，规定了必须使用函数，而不是对象。
因为使用对象的话，每个实例（组件）上使用的data数据是相互影响的。对象是对于内存地址的引用，直接定义个对象的话组件之间都会使用这个对象，
这样会造成组件之间数据相互影响。
使用函数后，使用的是data()函数，data()函数中的this指向的是当前实例本身，就不会相互影响了。
而 new Vue 的实例，是不会被复用的，因此不存在引用对象的问题。

5、Vue中常用的一些指令

1）v-model指令：用于表单输入，实现表单控件和数据的双向绑定。
2）v-on：简写为@，基础事件绑定
3）v-bind：简写为：，动态绑定一些元素的属性，类型可以是：字符串、对象或数组。
4）v-if指令：取值为true/false，控制元素是否需要被渲染
5）v-else指令：和v-if指令搭配使用，没有对应的值。当v-if的值false，v-else才会被渲染出来。
6）v-show指令：指令的取值为true/false，分别对应着显示/隐藏。
7）v-for指令：遍历data中存放的数组数据，实现列表的渲染。
8）v-once： 通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新

6、v-show和v-if指令的共同点和不同点

相同点：
v-show和v-if都能控制元素的显示和隐藏。
不同点：
1）实现本质方法不同:v-show本质就是通过设置css中的display设置为none;控制隐藏v-if是动态的向DOM树内添加或者删除DOM元素;
2）show都会编译，初始值为false，只是将display设为none，但它也编译了;v-if初始值为false，就不会编译了
总结：v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，如果要频繁切换某节点时，故v-show性能更好一点。

7、为什么避免v-if和v-for一起使用

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级；
可以先对数据在计算数据中进行过滤，然后再进行遍历渲染；
操作和实现起来都没有什么问题，页面也会正常展示。但是会带来不必要的性能消耗；

8、Vue.set 改变数组和对象中的属性（了解）

在一个组件实例中，只有在data里初始化的数据才是响应的，Vue不能检测到对象属性的添加或删除，
没有在data里声明的属性不是响应的,所以数据改变了但是不会在页面渲染；
解决办法：使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上

9、说说vue的生命周期的理解（重点）

生命周期通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
new Vue()；表示开始创建一个Vue的实例对象
beforecreate （初始化界面前）刚初始化了一个Vue空的实例对象，这个时候，这个对象只有默认的一些声命周期函数和默认事件
其他的都未创建，在次函数声命周期函数执行的时候，data和methods中的数据都还没有初始化
created （初始化界面后）在created中，data和methods都已经初始化好了，
beforemount （渲染界面前）执行此函数的时候，模板已经在内存中编译好了，但是尚未挂载到页面中去，此时页面还是旧的
mounted （渲染界面后）只要执行完次函数，就表示整个Vue实例已经初始化完毕了，此时组件已经脱离了创建阶段，到了运行阶段
beforeUpdate （更新数据前）执行此函数的时候，页面中显示的数据，还是旧的但此时data的数据是最新的，页面未和最新的数据保持同步
updated （更新数据后）updated事件执行的时候，页面和data数据已经保持同步了，都是最新的
beforedestory （卸载组件前）执行次函数的时候，Vue实例就已经从运行阶段进入到了销毁阶段了，但是实例上所有的data
和所有的methods以及过滤器、指令等都处于可用状态，因为没有真正执行销毁的过程
destroyed （卸载组件后）当执行到次函数时，组件已经被完全销毁了，此时组件中所有的数据、指令、过滤器等都已经不可使用了

10、第一次页面加载会触发哪几个钩子（函数）？

第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

11、axios 是什么，其特点和常用语法

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。前端最流行的 ajax 请求库，
react/vue 官方都推荐使用 axios 发 ajax 请求

特点:
1）基于 promise 的异步 ajax 请求库，支持promise所有的API
2）浏览器端/node 端都可以使用，浏览器中创建XMLHttpRequests
3）支持请求／响应拦截器
4）支持请求取消
5） 可以转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON类型的数据
6）批量发送多个请求
7） 安全性更高，客户端支持防御 XSRF，就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，
这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。

常用语法：（记几个就可以）
axios(config): 通用/最本质的发任意类型请求的方式
axios(url[, config]): 可以只指定 url 发 get 请求
axios.request(config): 等同于 axios(config)
axios.get(url[, config]): 发 get 请求
axios.delete(url[, config]): 发 delete 请求
axios.post(url[, data, config]): 发 post 请求
axios.put(url[, data, config]): 发 put 请求
axios.defaults.xxx: 请求的默认全局配置
axios.interceptors.request.use(): 添加请求拦截器
axios.interceptors.response.use(): 添加响应拦截器
axios.create([config]): 创建一个新的 axios(它没有下面的功能)
axios.Cancel(): 用于创建取消请求的错误对象
axios.CancelToken(): 用于创建取消请求的 token 对象
axios.isCancel(): 是否是一个取消请求的错误
axios.all(promises): 用于批量执行多个异步请求
axios.spread(): 用来指定接收所有成功数据的回调函数的方法

12、做过哪些Vue的性能优化？

1）编码阶段
尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应的watcher
v-if和v-for不能连用
如果需要使用v-for给每项元素绑定事件时使用事件代理
SPA 页面采用keep-alive缓存组件
在更多的情况下，使用v-if替代v-show
key保证唯一
使用路由懒加载、异步组件
防抖、节流
第三方模块按需导入
长列表滚动到可视区域动态加载
图片懒加载

2）SEO优化（了解）
服务端渲染SSR
预渲染
3）打包优化（了解）
压缩代码
Tree Shaking/Scope Hoisting
使用cdn加载第三方模块
多线程打包happypack
splitChunks抽离公共文件
sourceMap优化

13、Vue.js 双向绑定的原理

Vue.js 2.0 采用数据劫持（Proxy 模式）结合发布者-订阅者模式（PubSub 模式）的方式，通过 Object.defineProperty()来劫持各个属性的 setter，getter，
在数据变动时发布消息给订阅者，触发相应的监听回调。每个组件实例都有相应的watcher程序实例，它会在组件渲染的过程中把属性记录为依赖，
之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。

Vue.js 3.0, 放弃了Object.defineProperty ，使用更快的ES6原生 Proxy (访问对象拦截器, 也称代理器)
步骤：
1） 需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化
2）compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，
一旦数据有变动，收到通知，更新视图
3） Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是: ①在自身实例化时往属性订阅器(dep)里面添加自己 ②自身必须有一个update()方法
③待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。
4） MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令
，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

14、什么是跨域？

同源指的是两个 URL 的协议、域名、端口一致，反之，则是跨域

15、出现跨域的根本原因：浏览器的同源策略不允许非同源的 URL 之间进行资源的交互

16、同源策略（英文全称 Same origin policy）是浏览器提供的一个安全功能

MDN（Mozilla Developer Network） 官方给定的概念：同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。
这是一个用于隔离潜在恶意文件的重要安全机制

17、解决跨域的方式：

1）Jsonp
最早的解决方案，利用script标签src属性可以跨域的原理实现。
原理：由于在一个页面内部js如果要访问另一个非同源域的数据是被浏览器限制的，但是浏览器在解析和加载script标签的时候，是允许一个页面加载多个域的js标签
，而js标签其实又是类似一种get请求的方式，只是返回的数据是一个JSON格式的脚本对象。
用法：将get请求封装到script标签中，利用script标签做get请求，最后解析script标签数据
限制：只能发起GET请求
2）nginx反向代理
利用nginx反向代理把跨域为不跨域，支持各种请求方式
缺点：需要在nginx进行额外配置，语义不清晰
3）CORS
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。
它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。
前端设置，vue 设置 axios 允许跨域携带 cookie（默认是不带 cookie） axios.defaults.withCredentials = true; 3,2）后端设置： 3.2.1）跨域请求后的响应头中需要设置 3.2.2）
Access-Control-Allow-Origin 为发起请求的主机地址 3.2.3）Access-Control-Allow-Credentials，当它被设置为 true 时，允许跨域 带 cookie，
但此时 Access-Control- Allow-Origin 不能为通配符* 3.2.4）Access-Control-Allow-Headers，设置跨域请求允许的请求头 3.2.5）Access-Control-Allow-Methods，
设置跨域请求允许的请求方式
4） vue脚手架

     浏览器》》》》》》》》》》代理 服务器》》》》》》》》》》》后端服务器（目标服务器）

   1）在前端服务和后端接口服务之间 架设一个中间代理服务，它的地址保持和前端服务一致，那么：
     中间服务和前端服务之间由于协议域名端口三者统一不存在跨域问题，可以直接发送请求
     中间服务和后端服务之间由于并不经过浏览器没有同源策略的限制，可以直接发送请求
 我们可以通过中间这台服务器做接口转发，在开发环境下解决跨域问题，看起来好像挺复杂，其实vue-cli已经为我们内置了该技术，我们只需要按照要求配置一下即可。

2）vue-cli解决跨域配置说明
在vue.config.js配置文件中，有一项是devServer，它就是我们下边要操作的主角。
module.exports = {
devServer: {
// … 省略
// 代理配置
proxy: {
// 如果请求地址以/api打头,就出触发代理机制
// http://localhost:9588/api/login -> http://localhost:3000/api/login
‘/api’: {
target: ‘http://localhost:3000’ // 我们要代理的真实接口地址
}
}
}
}
}

3）基地址

.env.development

VUE_APP_BASE_API = ‘/api’
api/user.js
export function login(formData) {
return request({
/ url: ‘api/sys/login’,
+ url: ‘/sys/login’, // 前面的api就省略了
method: ‘POST’,
data: formData
})
}

4）重启项目
修改了配置文件，一定要重启前端项目
再次测试登陆接口，我们发现：跨域问题已经解决了

5） 总结
vue-cli集成了跨域代理功能-- 只能用在开发阶段。
vue.config.js文件中，在devServe下按指定格式配置了proxy，再重启项目即可。
注意： ajax的基地址baseUrl必须是相对地址，而不能是绝对地址