1、说一下 vue 的两个特性
(1)数据驱动视图:
数据的变化会驱动视图自动更新；
好处:程序员只管把数据维护好，那么页面结构会被 vue 自动渲染出来!
(2)双向数据绑定:
在网页中，form 表单负责采集数据，Ajax 负责提交数据
- js 数据的变化，会被自动渲染到页面上；
- 页面上表单采集的数据发生变化的时候，会被 vue 自动获取到，并更新到 js 数据中；
2、谈一谈对 MVVM 的理解？
MVVM 是 Model-View-ViewModel 的缩写。MVVM 是一种设计思想。
（Mode 数据源、View 视图、ViewModel 就是 vue 得实例）
- 数据驱动视图和双向数据绑定的底层原理是 MVVM
- Model 表示当前页面渲染时所依赖的数据源。
- View 表示当前页面所渲染的 DOM 结构。
- ViewModel 表示 vue 的实例，它是 MVVM 的核心,把当前页面的数据源和页面结构连在了一起。
优点:
- 低耦合 :View可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。
- 可重用性 : 可以把一些视图逻辑放在一个ViewModel里面,让很多View重用这段视图逻辑。
- 独立开发 : 开发人员可以专注于业务逻辑和数据的开发,设计人员可以专注于页面的设计。
3、vue 组件生命周期
生命周期总共分为四个阶段：创建（前/后）, 挂载（前/后）,更新（前/后）,销毁（前/后）；
4、vue 框架实现数据双向绑定的原理是什么？
vue2 Object.defineProperty 实现的，为对象定义属性的时候注册 setter 和 getter 方法，在这两个方法上进行监听，对属性的改变或者获取的时候同时进行页面更新。
v-model 用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：
v-bind 绑定一个 value 属性；v-on 指令给当前元素绑定 input 事件。
vue3 中使用的是 proxy 代理；所以 vue 项目不能在 ie8 以下的浏览器使用。因为不支持
5、vue 组件传参
1、父传子使用props属性
子组件在props中创建一个属性，用来接收父组件传过来的值；在父组件中注册子组件；
在子组件标签中添加子组件props中创建的属性；把需要传给子组件的值赋给该属性
2、子传父使用事件派发
子组件中需要以某种方式（如点击事件）的方法来触发一个自定义的事件；将需要传的值作为$emit的第二个参数，该值将作为实参传给响应事件的方法；在父组件中注册子组件并在子组件标签上绑定自定义事件的监听。
3、非相关组件使用事件总线或者vuex
什么是事件总线：我们在vue项目中定义一个空白的vue实例，所有的事件派发和监听都在这个空白的vue实例上进行
$emit事件派发$on事件监听
4、vue3中实现跨组件传参使用provider和inject
6、 组件传参值改变的问题
父子组件之间父子组件之间,当传值为object类型时，传值之后数据源会被改变，最好的解决办法是：传值的时候不要直接传数据源，而且经过使用深拷贝和浅拷贝或者定义新变量等。
data 是一个 function，可以保证每一个组件中的数据是一个唯一的实例。可以保证所有的组件在复用的时候互不影响；
7、vuex 状态管理
是 vue 中的状态管理插件，主要用来做数据共享的；
- - state 存储数据
- - actions 处理异步操作
- - mutations 用来改变数据，所有的数据改变都在这里进行。每一次的数据改变都会被开发者工具记录下来
- - modules 模块化拆分
- - getters 计算属性
8、actions 中也能改变数据，为什么不建议这样做？
9、vue 中如何保证页面切换之后数据还在？
比如列表页跳转详情页之后，返回列表的时候以前加载的数据还在；
keep-alive 可以对组件做缓存；或者使用 vuex 实现数据共享；以上两者实现的都是数据的临时存储，如果页面刷新了，数据还会消失。为了解决刷新之后数据不消失的问题，可以使用 localstorage 本地存储，或者刷新之后重新加载数据的方案实现；
10、Vuex 可以直接修改 state 的值吗？
可以直接修改，但是极其不推荐，state的修改必须在mutation来修改，否则无法被devtool所监测，无法监测数据的来源，无法保存状态快照，也就无法实现时间漫游/回滚之类的操作。
11、vuex 和 redux 有什么区别？
vuex 只能在 vue 中使用；redux 可以在任何一个框架中使用；它们两个都是基于单向数据流的；
12. vuex 是什么？怎么使用它？什么场景下我们会使用到 vuex
13. 说一下 v-for 与 v-show 的区别
14、路由拦截和路由守卫
15、在项目中用户的登陆判断是怎么实现的？
16、项目打包优化
- - 路由懒加载
- - 使用 cdn 的方式引入外部资源，减少打包之后的文件大小，需要修改 vue 项目的配置文件
- - 把自己项目的资源文件放在 cdn 服务器上
- - 减少首页网络请求次数
17、vue 项目如何做性能优化,或者解决首页白屏问题
1. 对资源文件进行压缩合并，使用 cdn 的方式引入资源
2. 使用路由懒加载的方式加载路由对应的组件，初始化的时候第一次不加载所有的路由文件，当访问对应页面的时候再加载
3. 使用 cdn 的方式引入外部资源，把我们项目中的一些第三方插件使用外部引入的方式进行引入。不打包在生成的 js 文件中
4.v-for 循环的时候加上 key
5.使用路由懒加载
推荐观看：vue打包优化_哔哩哔哩_bilibili
18、watch 和计算属性以及 method 方法调用的区别
- - watch 表示监听一个数据的改变，数据改变之后调用一个回调函数；
- - computed，表示依赖的数据改变之后重新计算一个结果。计算属性具有缓存功能，依赖数据不改变的时候计算属性不会重新执行；
- - method，方法调用，使用的时候需要加括号，每一次页面更新的话都会重新执行；
- - computed：多个数据改变之后引起一个计算结果 eg:购物车的结算；
- watch：一个数据改变之后，可以触发的其他影响 eg:搜索；
19、vue 中的数据改变是异步的，如何获取改变之后的最新的数据？
$nextTick，可以获取最新的改变之后的结果。页面在下一次渲染之后会触发它的回调函数；
20、 $set 有没有了解过，有什么作用？
我们在 vue 中动态为 data 添加的数据是不能做到响应式的，可以使用$set 为其设置为响应式；
21、虚拟 dom 和 diff 算法
22、vue 中如何获取 dom 元素？
（1）通过 $refs 获取元素；
<template>
<div>
<input type="text" ref="myInput">
<button @click="handleClick">获取值</button>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
console.log(this.$refs.myInput.value);
},
},
};
</script>使用ref，给相应的元素加ref="name"， 然后再this.$refs.name获取到该元素
（2）通过事件参数 $event 获取元素；
<template>
<div>
<input type="text" @blur="handleBlur">
</div>
</template>
<script>
export default {
methods: {
handleBlur(event) {
console.log(event.target.value);
},
},
};
</script>添加了一个事件监听器，并将其绑定到handleBlur方法。当输入框失去焦点时，handleBlur方法被触发。该方法接受一个事件参数event，并使用event.target.value获取输入框的值。
23、vue 中如何解决 v-for 中使用 v-if 的问题？
在 v-for 循环之前多数据先做过滤处理（只循环需要展示的数据）
v-for 的优先级高于 v-if
24、$route 和 $router 的区别
25、对比 jQuery，Vue 有什么不同？
jQuery 专注视图层，通过直接操作 DOM 去实现页面的一些逻辑渲染；Vue 专注于数据层，通过数据的双向绑定，最终表现在 DOM 层面，减少了 DOM 操作；
Vue 使用了组件化思想，使得项目子集职责清晰，提高了开发效率，方便重复利用，便于协同开发
26、Vue-router 使用 params 与 query 传参有什么区别？
27、用过插槽吗？用的是具名插槽还是匿名插槽？
用过，都使用过。插槽相当于预留了一个位置，可以将我们书写在组件内的内容放入，写一个插槽就会将组件内的内容替换一次，两次则替换两次。为了自定义插槽的位置我们可以给插槽取名，它会根据插槽名来插入内容，一一对应。
28、用过 beforeEach 吗？
每次通过vue-router进行页面跳转，都会触发beforeEach这个钩子函数，这个回调函数共有三个参数，to，from，next这三个参数，to表示我要跳转的目标路由对应的参数，from表示来自那个路由，就是操作路由跳转之前的，即将离开的路由对应的参数，next是一个回调函数，一定要调用next方法来resolve这个钩子函数；
29、常见的事件修饰符及其作用
.stop：等同于 JavaScript 中的event.stopPropagation()，防止事件冒泡；.prevent：等同于 JavaScript 中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）；.capture：与事件冒泡的方向相反，事件捕获由外到内；.self：只会触发自己范围内的事件，不包含子元素；.once：只会触发一次。
30、谈一下你对keep-alive的理解
如果需要在组件切换的时候，保存一些组件的状态防止多次渲染，就可以使用 keep-alive 组件包裹需要保存的组件。
keep-alive 组件是 vue 的内置组件，用于缓存内部组件实例。这样做的目的在于，keep-alive 内部的组件切回时，不用重新创建组件实例，而直接使用缓存中的实例，一方面能够避免创建组件带来的开销，另一方面可以保留组件的状态。
keep-alive 具有 include 和 exclude 属性，通过它们可以控制哪些组件进入缓存。另外它还提供了 max 属性，通过它可以设置最大缓存数，当缓存的实例超过该数时，vue 会移除最久没有使用的组件缓存。
受keep-alive的影响，其内部所有嵌套的组件都具有两个生命周期钩子函数，分别是 activated 和 deactivated，它们分别在组件激活和失活时触发。第一次 activated 触发是在 mounted 之后
在具体的实现上，keep-alive 在内部维护了一个 key 数组和一个缓存对象
// keep-alive 内部的声明周期函数
// keep-alive 内部的声明周期函数
created () {
this.cache = Object.create(null)
this.keys = []
}
key 数组记录目前缓存的组件 key 值，如果组件没有指定 key 值，则会为其自动生成一个唯一的 key 值
cache 对象以 key 值为键，vnode 为值，用于缓存组件对应的虚拟 DOM
在 keep-alive 的渲染函数中，其基本逻辑是判断当前渲染的 vnode 是否有对应的缓存，如果有，从缓存中读取到对应的组件实例；如果没有则将其缓存。
当缓存数量超过 max 数值时，keep-alive 会移除掉 key 数组的第一个元素。
31、Vue-router 导航守卫有哪些
- 全局前置/钩子：beforeEach、beforeResolve、afterEach；
- 路由独享的守卫：beforeEnter；
- 组件内的守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave；
32、vue3 和 vue2 的区别？
vue3 数据双向绑定的原理是 proxy 代理和 vue2 不一样。vue3 中引入了很多 hooks 的写法，vue3 中新增了组合式 api，写法更像 react；
vue3 中移除了 filter 过滤器功能；vue3 中跨组件之间传参使用 provider/inject 实现；
推荐阅读：
前端面试：前端面试八股文（详细版）—上-CSDN博客
前端面试：前端面试八股文（详细版）—中_前端面试八股文在哪刷-CSDN博客
Vue2重点笔记：Vue2快速上手指南，重点笔记整理-CSDN博客
Vue3重点笔记： Vue3快速上手指南，重点知识内容总结_vue3 中 v-phone-hide:name_旺旺大力包的博客-CSDN博客
