Vue 相关
1.Vue 的核心是什么
Vue 是一套构建用户界面的渐进式自底向上增量开发的 MVVM 框架，
vue 的核心只关注视图层，核心思想：
数据驱动（视图的内容随着数据的改变而改变）
组件化（可以增加代码的复用性，可维护性，可测试性，提高开发效率， 方便重复使用，体现了高内聚低耦合）
2.请简述你对 vue 的理解
Vue 是一套构建用户界面的渐进式的自底向上增量开发的MVVM 框架， 核心是关注视图层，vue 的核心是为了解决数据的绑定问题，为了开发大型单页面应用和组件化，所以 vue 的核心思想是数据驱动和组件化，这里也说一下MVVM 思想，MVVM 思想是 模型 视图 vm 是v 和m 连接的桥梁，当模型层数据修改时，VM 层会检测到，并通知视图层进行相应修改
3.请简述 vue 的单向数据流
4.Vue 常用的修饰符有哪些
修饰符：
.lazy 改变后触发，光标离开input 输入框的时候值才会改变
.number 将输出字符串转为number 类型
.trim 自动过滤用户输入的首尾空格
事件修饰符：
.stop 阻止点击事件冒泡，相当于原生 js 中的event.stopPropagation()
.prevent 防 止 执 行 预 设 的 行 为 ， 相 当 于 原 生 js 中event.preventDefault()
.capture 添加事件侦听器时使用事件捕获模式，就是谁有该事件修饰符， 就先触发谁
.self 只会触发自己范围内的事件，不包括子元素
.once 只执行一次
键盘修饰符：
.enter 回 车键 .tab 制 表键 .esc 返回键 .space 空 格键
.up 向上键 .down 向 下键 .left 向左建 .right 向右键
系统修饰符：.ctrl .alt .shift .meta
5.v-text 与{{}}与 v-html 区别
{{}} 将数据解析为纯文本，不能显示输出html v-html 可以渲染输出html
v-text 将数据解析为纯文本，不能输出真正的 html，与花括号的区别是在页面加载时不显示双花括号
v-text 指令：
作用：操作网页元素中的纯文本内容。{{}}是他的另外一种写法v-text 与{{}}区别：
v-text 与{{}}等价，{{}}叫模板插值，v-text 叫指令。
有一点区别就是，在渲染的数据比较多的时候，可能会把大括号显示出来，俗称屏幕闪动：
6.v-on 可以绑定多个方法吗
1.v-on绑定多个方法
<p v-on="{click:dbClick,mousemove:MouseClick}"></p>
2.一个事件绑定多个方法
<p @click="click1(),click2()">点击</p>
7.Vue 循环的 key 作用
Key 值的存在保证了唯一性，Vue 在执行时，会对节点进行检查，如果没有 key 值，那么 vue 检查到这里有 dom 节点，就会对内容清空并赋新值，如果有 key 值存在，那么会对新老节点进行对比，比较两者 key是否相同，进行调换位置或删除操作
8.什么是计算属性
计算属性是用来声明式的描述一个值依赖了其他的值，当它依赖的这个值发生改变时，就更新DOM
当在模板中把数据绑定到一个计算属性上时，vue 会在它依赖的任何值导致该计算属性改变时更新DOM
每个计算属性都包括一个getter 和setter，读取时触发getter，修改时触发setter
9.Vue 单页面的优缺点
单页面spa
优点：前后端分离 用户体验好 一个字 快 内容改变不需要重新加载整个页面
缺点：不利于 seo， 初次加载时耗长（浏览器一开始就要加载 html css js ，所有的页面内容都包含在主页面中） ，页面复杂度提高了，导航不
可用
10.Vuex 是什么？怎么使用？在那种场景下使用
Vuex 是一个专为vue.js 应用程序开发的状态管理模式，通过创建一个集中的数据存储，方便程序中的所有组件进行访问，简单来说 vuex 就是vue 的状态管理工具
Vuex 有五个属性 state getters mutations actions modules
State 就是数据源存放地，对应一般 vue 对象的data，state 里面存放的数据是响应式的，state 数据发生改变，对应这个数据的组件也会发生改变 用this.$store.state.xxx 调用
Getters 相当于 store 的计算属性，主要是对 state 中数据的过滤，用 this.$store.getters.xxx 调用
Mutations 处理数据逻辑的方法全部放在mutations 中，当触发事件想 改变 state 数据的时候使用 mutations，用 this.$store.commit 调用， 给这个方法添加一个参数，就是mutation 的载荷（payload）
Actions 异 步 操 作 数 据 ， 但 是 是 通 过 mutation 来 操 作，用 this.$store.dispatch 来触发，actions 也支持载荷
11.Vue 中路由跳转方式（声明式/编程式）
Vue 中路由跳转有两种，分别是声明式和编程式
用js 方式进行跳转的叫编程式导航 this.$router.push（）
用router-link 进行跳转的叫声明式 router-view 路由出口，路由模板显示的位置
路由中name 属性有什么作用？
在router-link 中使用 name 导航到对应路由使用name 导航的同时，给子路由传递参数
12.vue 跨域的解决方式
1. 后台更改header
2. 使用jq 提供jsonp
用http-proxy-middleware（配置代理服务器的中间件）
13.Vue 的生命周期请简述
beforeCreate（创建实例）
created（创建完成）、
beforeMount（开始创建模板）
mounted（创建完成）、beforeUpdate（开始更新）
updated（更新完成）、
beforeDestroy（开始销毁）
destroyed（销毁完成）
14.Vue 生命周期的作用
15.DOM 渲染在那个生命周期阶段内完成
16.Vue 路由的实现
前端路由就是更新视图但不请求页面，利用锚点完成切换，页面不会刷新
官网推荐用vue-router.js 来引入路由模块定义路由组件
定义路由，使用 component 进行路由映射组件，用 name 导航到对应路由
创建router 实例，传入routes 配置创建和挂载根实例
用router-link 设置路由跳转
17.Vue 路由模式 hash 和 history，简单讲一下
18.Vue 路由传参的两种方式，params 和 query 方式与区别
动态路由也可以叫路由传参，就是根据不同的选择在同一个组件渲染不同的内容 用法上：query 用 path 引入，params 用 name 引入，接收参数都是类似的，分别是 this.route.params.name url 展示上:params 类似于 post，query 类似于 get，也就是安全问题， params 传值相对更安全点，query 通过 url 传参，刷新页面还在，params 刷新页面不在了
19.Vue 数据绑定的几种方式
4
20.Vue 注册一个全局组件
21.Vue 的路由钩子函数/路由守卫有哪些
22.Vue 中如何进行动态路由设置？有哪些方式？怎么获取传递过来的数据？
query - vm.route.param
23.Elementui 中的常用组件有哪些？请简述你经常使用的 并且他们的属性有哪些？
24.Vue-cli 中如何自定义指令
25.Vue 中指令有哪些
26.Vue 如何定义一个过滤器
27.对 vue 中 keep-alive 的理解
28.如何让组件中的 css 在当前组件生效
29.Vue 生命周期一共几个阶段
8
30.Mvvm 与 mvc 的区别
双向绑定 与 单向驱动
31.Vue 组件中的 data 为什么是函数
作用域
32.Vue 双向绑定的原理
Vue 双向绑定就是：数据变化更新视图，视图变化更新数据
Vue 数据双向绑定是通过数据劫持和观察者模式来实现的，
数据劫持，object.defineproperty 它的目的是：当给属性赋值的时候，程序可以感知到，就可以控制改变属性值
观察者模式 当属性发生改变的时候，使用该数据的地方也发生改变
data -> view: 属性劫持object.defineProperty
view -> data: 监听 dom事件改数据
eg. v-modal = v-value + on-input/change
33.Vue 中组件怎么传值
5种:
父子
子父
兄弟-事件总线
vuex
插槽
34.Bootstrap 的原理
grid布局
36.如果一个组件在多个项目中使用怎么办
37.槽口请简述
是什么？干什么的？怎么用？
38.Watch 请简述
39.Vant Ui 请简述下
40.计算属性与 watch 区别
41.mvvm 框架是什么？它和其它框架（jquery）的区别是什么？哪些场景适合？
数据驱动 与 dom操作
42.Vue 首屏加载慢的原因，怎么解决的，白屏时间怎么检测，怎么解决白屏问题
43.Vue 双数据绑定过程中，这边儿数据改变了怎么通知另一边改变
44.Vuex 流程
// 创建一个新的 store 实例
const store = createStore({
state () {
return {
count: 0
}
},
mutations: {
increment (state,val) {
state.count += val
}
},
actions: {
getData(context,param) {
// Action 函数接收一个与 store 实例具有相同方法和属性的 context (上下文) 对象，可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 获取 state 和 getters
// 调接口请求数据，走异步，返回res
context.commit('increment',res)
}
}
})
const app = createApp({ /* 根组件 */ })
// 将 store 实例作为插件安装
app.use(store)
store.commit('increment',1)
store.dispatch('increment',param)
在 vue 组件里面，通过 dispatch 来触发 actions 提交修改数据的操作，
然后通过 actions 的 commit 触发 mutations 来修改数据，mutations
接收到 commit 的请求，就会自动通过 mutate 来修改 state，最后由
store 触发每一个调用它的组件的更新
45.Vuex 怎么请求异步数据
46.Vuex 中 action 如何提交给 mutation 的
47.Route 与 router 区别
-
router 是 VueRouter 的一个对象，通过 Vue.use(VueRouter)和VueRouter 构造函数得到一个 router 的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。
-
route 是一个跳转的路由对象，每一个路由都会有一个 route 对象，是一个局部的对象，可以获取对应的 name,path,params,query 等
49.vuex 的 State 特性是？
50.vuex 的 Getter 特性是？
51.vuex 的 Mutation 特性是？
52.vuex 的 actions 特性是？
54.vuex 的优势
55.Vue 路由懒加载（按需加载路由）
56.v-for 与 v-if 优先级
首先不要把 v-if 与 v-for 用在同一个元素上，原因：v-for 比 v-if 优先，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候。
v-for 比 v-if 具有更高的优先级
57.请写出饿了么 5 个组件
58.vue 在 created 和 mounted 这两个生命周期中请求数据有什么区别呢？
没什么区别，如果不对dom进行操作的话。
59.说说你对 proxy 的理解
vue 的数据劫持有两个缺点:
1、无法监听通过索引修改数组的值的变化
2、无法监听 object 也就是对象的值的变化，所以 vue2.x 中才会有 $set 属性的存在
proxy 是 es6 中推出的新 api，可以弥补以上两个缺点，所以 vue3.x
版本用 proxy 替换 object.defineproperty。
Vue3.0 是如何变得更快的？（底层，源码）
Vue2.x 中的虚拟 dom 是进行全量的对比。
在与上次虚拟结点进行对比的时候，值对比带有 patch flag 的节点，并且可以通过 flag 的信息得知当前节点要对比的具体内容化。hoistStatic 静态提升
Vue2.x : 无论元素是否参与更新，每次都会重新创建。
Vue3.0 : 对不参与更新的元素，只会被创建一次，之后会在每次渲染时候被不停的复用。
默认情况下 onClick 会被视为动态绑定，所以每次都会去追踪它的变化但是因为是同一个函数，所以没有追踪变化，直接缓存起来复用即可。
