vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的api；Vue.js是一个构建数据驱动的web界面的库；vue.js是一个构建用户界面的渐进式框架，与其他重量级框架不同的是Vue采用自底向上增量开发的设计，vue的核心库只关注视图层，并且非容易学习，非常容易与其他库或者已有项目整合，另一方面我们完全有能力驱动采用单文件组件和vue生态系统支持的库开发复杂的单页面应用。vue.js的目标是通过尽可能简单的api实现响应的数据绑定和组合的视图组件。核心是一个响应的数据绑定系统。
1. 什么是MVVM?
MVVM是model-view-viewmodel的缩写，mvvm是一种设计思想，model层代表数据模型，也可以在model中定义数据修改和操作的业务逻辑；view代表UI组件，它负责将数据模型转化成UI展现出来，viewModel是一个同步view和model的对象。
2. VUE的响应式数据原理
当一个vue实例创建时，vue会便利data选项的属性，用object.defineProperty将他们转为getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化，每隔组件实例都有相应的watcher程序实例，他会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而让它相关联的组件视图得到更新。
3. vue的特点
简洁、数据驱动、组件化、轻量级、快速构建 页面由html模板+json数据+vue实例组成，简单易上手，采用mvvm自动计算属性和追踪依赖的数据驱动模式，用可复用、解耦的组件来构造页面。
4. vue的data为什么必须是一个函数
对象为引用类型，当重用组件时，由于数据对象都指向同一个data对象，当在一个组件中修改data时，其他组件的data也会同时被修改，而使用返回对象的函数，由于每次返回的都是一个新对象，引用地址不同，也就解决了这个问题。
5. vue-router有哪几种导航钩子
1、全局导航钩子 router.beforeEach(to,from,next) 2、组件内部钩子 3、单独路由独享组件
6. 对vue生命周期的理解
总共分为8个阶段。创建前/后，载入前/后，更新前/后，销毁前/后。 a、 在beforeCreated阶段，vue实例的挂载元素el还没有 c、在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换 d、在mounted阶段，vue实例挂载完成，data.message成功渲染 e、当data变化时，会触发beforeUpdate和updated方法 f、在destroy阶段，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。destroyed阶段，组件销毁
7. vue的常用指令和它的用法
v-model v-on v-bind v-if v-show v-for
8. 计算属性和watch的区别
computed 计算属性：依赖其它属性值，并且computed的值有缓存，只有它依赖的属性值发生改变，下一次获取computed的值时才会重新计算computed的值。 watch 侦听器：更多的是观察的作用,无缓存性,类似与某些数据的监听回调,每当监听的数据变化时都会执行回调进行后续操作 计算属性默认深度依赖，watch默认浅度观测，计算属性适合做筛选，不可异步；watch适合做执行异步或开销较大的操作。
9. vue组件通信
父向子传递数据是通过 props，子向父是通过 events（$emit）；通过父链 / 子链也可以通信（$parent / $children），在组件内部可以直接通过子组件$parent对父组件进行操作，父组件通过$children对子组件进行操作；ref 也可以访问组件实例
10. vue路由传参
query传参和params传参，query传参用this.$route.query来接收参数，params传参用this.$route.params来接收参数；params传参刷新页面的时候会丢失数据，解决方法是在路由的配置文件里给该路由后面拼接需要的参数，
eg：
{ path: "/Publish/:roleName/:id", name: "publish", component:import("../components/PublishApp"), }
11. vuex是什么，有哪几种属性
vuex是一个专门为vue.js打造的一个状态管理模式.有5种属性，分别是state、getter、mutation、action、module state是一个数据源存放地，对应于一般vue对象里面的data数据，是响应式的，vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新，它通过mapState把全局的state和getter映射到当前组件的computed计算属性 getter是从基本数据派生的数据，可以对state属性进项操作。相当于是store的计算属性 mutation，更改vue的store中的状态唯一方法是提交mutation。必须是同步的，异步的需要提交action action类似于mutation，不同之处是action提交的是mutation，而不是直接变更状态。action可以包含任何异步操作。 moudles模块化vuex，可以让每个组件拥有自己的state，getter，mutation，action
12. v-show和v-if指令的不同点和共同点
v-show指令是用过修改元素的显示和隐藏 v-if指令是直接销毁和重建dom
13. vue的路由模式
hash模式和history模式。默认模式是hash模式，url中带#，#后面的值不会包含在http请求中，改变hash的值页面不会重新加载；history模式更利于SEO爬取
14. router的区别
router是“路由实例对象”，包括了路由的跳转方法、钩子函数等。
15. 如何优化spa应用首屏加载过慢的问题
16. 防抖函数和节流函数
防抖函数：触发高频事件时n秒后多次触发只会执行一次，如果n秒内再次触发，将会重新计算 特点：每次触发时都会取消之前的延时调用； 节流函数：每触发一次高频事件时，都会设置一个延迟调用的方法，并且取消之前延时调用的方法 特点：每次触发事件时都会判断是否等待执行中的延时函数； 总结：防抖和节流本质是不一样的，防抖是将多次执行变为最后一次执行，节流是将多次执行变为每隔一段时间执行。防抖一定连续触发的事件只在最后执行一次，而节流在一段时间内只执行一次。
17. hash模式和history模式
18. 什么是深拷贝和浅拷贝？怎么实现
深拷贝：深拷贝会拷贝所以属性，并拷贝属性所指向的动态分配的内存，当对象和它引用的对象一起拷贝是即深拷贝，深拷贝相较于浅拷贝花销较大且速度慢，拷贝前后两个对象互不影响； 浅拷贝：创建一个新的对象，这个对象有着原始对象属性值的一份精确拷贝，如果属性是基本类型，就拷贝基本类型的值，如果属性是引用对象，那拷贝的就是内存地址，如果其中一个改变了，那么另外一个也会收到影响
19. 什么是闭包？闭包的作用是什么（高频）
闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，创建的函数可以访问到当前函数的局部变量。 特点：让那个外部访问函数内部变量成为可能，变量会常驻在内存中，可以避免使用全局变量，防止全局变量污染。 缺点：造成内存泄漏或溢出
20. map和forEach有什么区别
forEach函数会针对每一个元素执行得函数，没有返回值，是否会改变原数组取决于数组元素的类型是基本类型还是引用类型；map方法不会改变原数组的值，返回一个新数组，新数组的中的值为原数组调用函数处理之后的值。
21. vue3.0的理解
a、响应式原理的改变 Vue3.x 使用Proxy取代 Vue2.x 版本的Object.defineProperty b、组件选项声明方式Vue3.x 使用Composition API setup 是Vue3.x新增的一个选项，他是组件内使用Composition API 的入口 c、模板语法变化slot具名插槽语法 自定义指令 v-model 升级
22. 分享实例，如购物车的逻辑、权限的逻辑
23. git的基本操作
git clone git地址 将远程项目down到本地
git add . 提交当前全部修改过的文件
git commit 提交
git pull 更新远程
git push 将本地修改推到远程库
git branch 查看本地所有分支
git status 查看当前状态
git checkout git分支名 切换到某个分支
git branch -a 查看所有的分支
git branch -r 查看远程所有分支
24. 数组去重的方法
重复数组 let arr = [1,1,1,2,3] let newArr = Array.from(new Set(arr)) console.log(newArr)
25. 怎么把类数组转化为数组
Array.from()、循环遍历、Array.prototype.slice.call()
26. 数组的方法 split、slice、splice
split主要用于字符串的分割，可以根据某个字符把字符串拆分成多个数组，arr.split(separator,limit)。 splice可根据坐标位置进行删除数组并返回长度，arr.splice(start,deleteCount,item...)。 slice可以创建一个由当前数组中的一项或多项组成的新数组，原有的数组不变，arr.slice(start,end)。
27. flex常用方法，flex：1是哪几个方法的简写
flex常用方法就略了，给面试官说一下经常用的就好了 flex:1是flex-grow、flex-shrink、flex-basis三个属性的缩写
28. 什么是原型和原型链
29. 箭头函数和普通函数的区别
普通函数可以有匿名函数，也可以有具体名函数，但是箭头函数都是匿名函数。 普通函数可以用于构造函数，以此创建对象实例，箭头函数不能用于构造函数，不能使用new。 普通函数中，this总是指向调用它的对象，如果用作构造函数，this指向创建的对象实例；箭头函数本身没有this，但是它在声明时可以捕获其所在上下文的this供自己使用，this一旦被捕获，就不再发生变化。
30.Math.ceil()和Math.floor()有什么区别？
Math.ceil()是向上取整，函数返回一个大于或等于给定数字的最小整数，Math.floor()是向下取整，函数返回一个小于或等于给定数字的最大整数。
31.浏览器的同源策略是什么？
同源是指：域名、协议、端口三者都相同
32.document.write和innerHtml有什么区别？
document.write是直接写入到页面的内容流，如果没写之前没有调用document.open,那浏览器会自动调用。 innerHtml则是dom页面元素中的一个属性，代表该元素的html内容，你可以精确到某一个具体的元素来进行更改
33.从浏览器地址栏输入 url 到请求返回发生了什么
1、输入url后解析出协议、端口、路径等信息，病构造一个http请求 2、DNS 域名解析 3、tcp连接，3次握手协议（为什么是三次握手协议？因为tcp连接主要特点就是可靠传输，可靠传输的基础就是确保双方的接收功能和发送功能正常，第一次握手确保客户端的发送能力正常，第二次握手确保服务端的接收能力和发送能力正常，第三次握手确保客户端的接收能力正常。不然会有丢包的现象 4、http请求 5、服务器处理请求并返回http报文 6、浏览器渲染页面 7、断开tcp连接
34.script 标签中 defer 和 async 的区别
script会阻塞html的解析 async script 在解析html的同时异步下载脚本，下载完成后立马开始执行，有可能会阻塞html的解析 defer script 完全不会阻塞html的解析，解析完成后再按照顺序执行脚本
35.重排（reflow）和重绘（repaint）
重排：无论通过什么方式造成了元素的几何信息改变，（几何信息是指元素在视口内的位置和大小），浏览器要重新计算元素在视口内的几何属性，这个过程就叫重排 重绘：通过构造渲染树和重排阶段，我们知道了哪些节点是可见的，以及可见节点的具体几何信息，接下来就可以将渲染书的每个节点转化为屏幕上的实际像素，这个阶段叫重绘
重排（回流）一定会触发重绘，蛋重绘不一定会触发重排
