Vue
Spa—单页应用。
仅在该 Web 页面初始化时加载相应的 HTML 、 JavaScript 、 CSS ，不会因为用户的操作而重新加载，而是利用 路由的机制实现 HTML的变换，避免页面重新加载。可以减轻服务端的压力。缺点：首屏加载过慢。
优点： 用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染； 有利于前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；
Vue的SSR是什么？有什么好处？
SSR就是服务端渲染- 基于
nodejs serve服务环境开发，所有html代码在服务端渲染 - 数据返回给前端，然后前端进行“激活”，即可成为浏览器识别的html代码
SSR首次加载更快，有更好的用户体验，有更好的seo优化，因为爬虫能看到整个页面的内容，如果是vue项目，由于数据还要经过解析，这就造成爬虫并不会等待你的数据加载完成，所以其实Vue项目的seo体验并不是很好
keep-alive的作用
kepp-alive包裹的组件会被保留状态，避免重新渲染，有include（包括）和exclude属性。
activated（），deactivated（)只有该组件保持了状态使用keep-alive才是有效的。 第一次activated触发经过created=》mounted=》activated，退出触发deactivated，再进入只触发activated。
router-link 跟router-view
<router-link to="/home">最终渲染成a便签，有to属性。<router-view>占位符，相当于要显示在哪个位置。
动态路由：<router-link :to="'/user/'+userid"> 或者this.$router.push('/user/'+this.userid)
path:“/user/:abc”,通过$route.params.abc获取id。
vue父子组件生命周期顺序
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted 一定得等子组件挂载完毕后，父组件才能挂在完毕，所以父组件的 mounted 在最后。
父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated
父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed
在哪个生命周期中发起数据请求****
可以在钩子函数 created、beforeMount、mounted 中进行调用，因为在这三个钩子函数中，data 已经创建。如果你要操作DOM，那肯定要mounted才能操作。
推荐在 created 钩子函数中调用异步请求，有以下优点：
· 能更快获取到服务端数据，减少页面 loading 时间；
· ssr （服务端渲染）不支持 beforeMount 、mounted 钩子函数，所以放在 created 中有助于一致性；
双向绑定的原理：
数据劫持结合发布订阅者模式，核心是Object.defineProperty()方法 mvvm，m为模型层，v为视图层，view，业务逻辑层viewmodel， 通过objectdefineProperty（）进行数据劫持，调用set方法检测数据的变化，当数据变化就会触发这个函数。然后一个订阅者，当收到数据变化，就会更新视图。
1. 实现一个监听器Observer，用来劫持监听所有属性，如果发生变化通知订阅者
2. 实现一个订阅者watcher，当接到变化的通知，执行对应的函数然后更新视图
3. 实现compile解析器，解析模板指令，初始化视图。
生命周期函数有哪些？作用是什么？
Beforecreate-开始创建，created初始化数据，beforemount编译模板，mounted挂载dom，beforeupdate数据更新，但视图还没，updated页面和数据同步，beforedestroy-销毁阶段，数据和方法可用—destoryed-卸载阶段，都不可用。 作用：有多个事件钩子，让我们控制整个vue实例的过程更易形成号的逻辑。
destoryed：比如有定时器销毁完就调用这个钩子。
Created和mounted区别
-前者组件实例创建完成立即调用，但dom节点还没更新。Mounted是在页面dom节点渲染完后调用。
组件通信：
通过props，$emit触发自定义事件，ref，vuex
V-show和v-if都是控制元素的显示和隐藏
v-show是通过控制css使display：none，dom元素还在。V-if是通过直接删除dom元素。频繁的用v-show就好，不频繁用v-if就好
V-if和v-for？
v-for优先级是高于v-if的。不要把v-if和v-for用在同个元素上，性能浪费（每次循环后又判断），所以在template进行v-if判断，然后在内部进行v-for。
vue中如何给对象添加一个属性
Vue.set()，会触发视图更新。
Object.assign()。直接使用Object.assign()添加到对象的新属性不会触发更新
Vue.delete是直接删除数组
怎么配置别名，在引用路径加个~
在vue.config.js配置别名
vue更新数组触发视图更新的方法
push（），pop（），unift（），shift（），sort（），reverse（）
computed和watch使用场景。
computed：不支持异步。当一个属性受多个属性影响的时候要用到computed，是依赖缓存的，只有当缓存发生变化就会重新赋值。例：购物车商品结算的时候。
watch：支持异步。当一条数据影响多条数据就用watch。例：搜索数据。
组件是什么？
组件化开发可以降低整个系统的耦合度、调试方便、提高可维护性。
插件注册Vue.use(插件名)；
为什么data属性是一个函数而不是一个对象？
产生这样的原因这是两者共用了同一个内存地址，componentA修改的内容，同样对componentB产生了影响。如果我们采用函数的形式，则不会出现这种情况（函数返回的对象内存地址并不相同）。vue组件可能会有多个实例，采用函数返回一个全新的data，如果是对象那可能受到其他实例对象数据的污染。
- 根实例对象
data可以是对象也可以是函数（根实例是单例），不会产生数据污染情况 - 组件实例对象
data必须为函数，目的是为了防止多个组件实例对象之间共用一个data，产生数据污染。
Provide和inject（vue3）
在祖先组件定义provide属性，返回传递的值 在后代组件通过inject接收
为对象添加属性？
通过vue.$set给data对象新增属性，并可以触发视图更新。如果只给对象直接赋值的话，可以新增属性，但不会触发视图更新，因为vue初始化实例的将属性转为setter。
Object.assign()添加到对象的新属性不会触发视图更新。
$nextTick?
vue在更新dom是异步操作的，当数据发生变化了，不会马上更新dom，如果放在$nexttick后面执行，当数据变化，立即执行后面的函数，立即获得更新后的dom。 使用场景：如果在修改数据后立即得到更新后的dom，用vue.nexttick() Vue生命周期前3个钩子函数（beforeCreate、created、beforeCreate）如果要操作 DOM，一定要放在 nextTick 中，否则直接报错，因为此时 DOM 还没进行渲染
Mixin是什么？
当两个组件有共同代码需要抽取，可以编写一个mixin对象，定义一个myMixin对象，里面有methods，data。然后通过mixins：[myMixin]调用。也可以单独建一个js文件，导出，通过然后在组件里导入后mixins：[myMixin]。缺点是不能传递参数。
插槽：
子组件通过<slot name=”head”></slot>定义，父组件通过<div slot=”head”></div>调用，
作用域插槽，可以获得插槽作用域的值
如何获取dom？
通过ref=“domName” ； 然后this.$refs.domName
Key：
可以更高效的更新虚拟dom，因为他会给每个节点做标识，可以更好的匹配，涉及到那个diff算法，不用key做标识的是索引。
说一下 vue 有哪些优点和特点*
渐进式框架：可以在任何项目中轻易的引入，便于第三方库和既有项目整合
轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十 kb ；
简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；
双向数据绑定：在数据操作方面更为简单；
组件化开发：很大程度上实现了逻辑的封装和复用，在构建单页面应用方面有着独特的优势；
什么是虚拟 dom
Virtual DOM 是 DOM 节点在 JavaScript 中的一种抽象数据结构，之所以需要虚拟 DOM，是因为浏览器中操作 DOM 的代价比较昂贵，频繁操作 DOM 会产生性能问题。
Actived（）缓存的组件激活后，都会调用。用来获取缓存后的数据
vue常用的修饰符
.native 给组件绑定事件。
为什么需要虚拟DOM
DOM是很慢的，其元素非常庞大，页面的性能问题，大部分都是由DOM操作引起的
、
vue2 和vue3 什么区别
1 响应式原理,vue2用defineProperty，vue3双向数据绑定—proxy（因为definePropertyAPI）只能针对单例属性做监听，proxy监听是一个对象或者数组，对象里的所有操作都能监听。
2 生命周期钩子名称
3 自定义指令钩子名称
4 新的内置组件
5 diff 算法
6 Composition API，生命周期，方法，都在setup里。
7基于typescript编写的
主流的前端框架的优缺点是什么****
只用过 vue ，优点上面讲过了，缺点嘛，可能就是不支持 IE8
vue 组件间传值的 n 种方式*
（1） props / $emit 适用 父子组件通信
（2） ref 适用 父子组件通信
· ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例，父元素通过this.$refs.名调用
（3） children / $root ：访问父 / 子实例 / 根实例
（4） EventBus 事件总线（on） 适用于 父子、隔代、兄弟组件通信****
先在入口初始化，Vue.prototype.$bus = new Vue()
通过this.bus.on()接收
这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件。
（5） 适用于 隔代组件通信
（6） provide / inject 适用于 隔代组件通信
父组件中通过 provide 来提供变量，然后在子孙组件中通过 inject 来注入变量。provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。
（7） Vuex 适用于 父子、隔代、兄弟组件通信
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。store 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。
· Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
· 改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。
vue 首屏渲染优化有哪些
· 图片压缩/懒加载
· 禁止生成 .map 文件
· 路由懒加载
· cdn 引入公共库
· 开启 GZIP 压缩
assets和static区别
都是放静态资源，打包后会放置在static文件中。static防止的不用打包压缩化。
vue-router 有 2 种路由模式
hash、history、
· hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器；通过改url，location.hash因为hash发生变化的url都会被浏览器记录下来，从而你会发现浏览器的前进后退都可以用了
· history : 依赖 HTML5 History API 和服务器配置。最主要的 API 有以下两个：history.pushState() 和 history.repalceState()。后者不能返回
history和hash的区别？
hash值变化不会导致浏览器向服务器发出请求，hash的变化都会被浏览器记录，不会向后端发出请求。hash带有#号。history没有，而且history刷新会对后端发出请求。
vue-router参数传递的方式
params和query。params在浏览器不显示参数，query在浏览器显示参数。query刷新不会丢失里面数据，params会。 都是通过this.$route.params.id
$nextTick的使用
vue更新dom是异步的。当数据变化时，立即获得更新后的dom。Vue生命周期前3个钩子函数（beforeCreate、created、beforeCreate）如果要操作 DOM，一定要放在 nextTick 中，否则直接报错，因为此时 DOM 还没进行渲染
怎么实现MVVM双向绑定
是个语法糖 <input type='text' ：value='message' @input=‘i’>
Data：{message：‘双向’}method：{i（event）{
this.Message=event.target.value
}}
onload和onshow?
- onshow在每次打开页面都会加载，可以用于数据在需要刷新的环境下
- onload只是在第一次进入页面会刷新数据，从二级页面回来不会重新加载数据
vuex：state和mutation是必须的
1.state：负责状态管理，类似于vue中的data，初始化数据。
2.mutation：专用于修改state的方法，通过commit触发。
3.action：可以用来处理异步方法，通过dispatch,通过this.$store.dispatch()
4.getters：vuex中的计算属性，依赖与state状态值，一旦改变，getters会重新计算，需要return
5.modules：模块化管理。
Promise
Promise的初始状态是pending
· 1、执行了resolve，Promise状态会变成fulfilled
· 2、执行了reject，Promise状态会变成rejected
· 3、Promise只以第一次为准，第一次成功就永久为fulfilled，第一次失败就永远状态为rejected
· 4、Promise中有throw的话，就相当于执行了reject
Promise中有throw的话，就相当于执行了reject。这就要使用try catch了
then支持链式调用，下一次then执行受上一次then返回值的影响,then总是返回一个新的promise
咱们知道then是Promise上的方法，那如何实现then完还能再then呢？很简单，then执行后返回一个Promise对象就行了，就能保证then完还能继续执行then
Promise 如何一次进行多个异步请求
答：利用 Promise.all 。
事件循环
同步代码=》所有微任务=》渲染页面=》第一个宏任务=》所有微任务=》渲染页面=》第二个宏任务
先执行同步代码，遇见定时器会交给对应的管理模块，1秒后放进宏队列，继续执行代码后，第一个宏任务，然后检查有没有新的微任务，没有就执行第二个宏任务。
async，await
简化异步的操作，await后面的代码是微任务。
all****
· 接收一个Promise数组，数组中如有非Promise项，则此项当做成功
· 如果所有Promise都成功，则返回成功结果数组
· 如果有一个Promise失败，则返回这个失败结果
any****
any与all相反
· 接收一个Promise数组，数组中如有非Promise项，则此项当做成功
· 如果有一个Promise成功，则返回这个成功结果
· 如果所有Promise都失败，则报错
axios
get post的区别（至少五条）
1.get对长度有限制，post 无。 2. get数据会显示在url（不安全），post放在请求体中 。3.Get只能url编码，4.get只能ascii字符。5.Get从服务器获取数据，post从服务器接收数据。 6.get刷新无影响、post会重新请求。
Axios是什么？
· 从浏览器中创建 XMLHttpRequests
· 从 node.js 创建 http请求
· 支持 Promise API
· 拦截请求和响应
· 转换请求数据和响应数据
· 取消请求
· 自动转换JSON 数据
· 客户端支持防御XSRF
前端如何处理这些状态码****
答：在 axios 的请求拦截当中根据不同的状态码进行不同的操作。
如何做权限认证****
答：在路由守卫中根据 url 地址结合 token 做权限认证。
同步和异步的区别****
同步： 同步的思想是：所有的操作都做完，才返回给用户。这样用户在线等待的时间太长，给用户一种卡死了的感觉（就是系统迁移中，点击了迁移，界面就不动了，但是程序还在执行，卡死了的感觉）。这种情况下，用户不能关闭界面，如果关闭了，即迁移程序就中断了。
异步： 将用户请求放入消息队列，并反馈给用户，系统迁移程序已经启动，你可以关闭浏览器了。然后程序再慢慢地去写入数据库去。这就是异步。但是用户没有卡死的感觉，会告诉你，你的请求系统已经响应了。你可以关闭界面了。
AJAX过程说下
1创建ajax对象（xmlhttprequest对象）。 2链接到服务器（ajax.open(get,)） 3发送请求ajax.send(). 4接收请求
AJAX状态码
1xx服务器接到请求、 2xx表示请求成功 3xx需重定向 4xx客户端ing求错误 5xx服务端错误
XML和JSON的区别。
xml的数据体积较大。json占用带宽小。xml是标记语言，类似于html。服务器端要解析xml才能使用，json可以直接给服务端使用，节省了时间和资源。
axios参数的传递方式
data和params。data一般用post、put。params一般用get，get一般是把参数附在url后面，post是在请求体里的
