一、vue的生命周期以及做了什么
beforeCreate： created： beforeMount: mounted: beforeUpdate: updated: beforeDestroy: destroyed:
二、响应式原理 和 双向绑定原理
1.响应式原理：
- 主要是研究vue怎么追踪数据变化，关注的是数据发生改变时，怎么自动通知到依赖这个数据的地方，就像有个小闹钟，数据一变化它就响，提醒相关的地方该更新了。
- 具体内容：Vue在初始化数据时，会使用
Object.defineProperty给每个属性添加getter、setter，结合发布订阅模式，实现依赖收集和更新。当页面使用对应属性时，首先会进行依赖收集(收集当前组件的watcher)如果属性发生变化会通知相关依赖进行更新操作(发布订阅)。 - vue3和vue2响应式区别：vue3用Proxy进行数据劫持。可直接监听对象、数组的变化，并且有13种拦截方法。同样结合发布-订阅模式，实现依赖收集和更新。Proxy只会代理对象的第一层，那么Vue3又是怎样处理这个问题的呢？：判断当前Reflect.get的返回值是否为Object，如果是则再通过
reactive方法做代理
三、v-model的双向数据绑定原理
在内部为表单元素绑定了value属性和input事件，在标签上使用v-model就相当于设置了value=xxx，监听input事件以及不同标签生成不同事件和属性，监听事件来更新value的值。
四、vue组件通信方式：
1.父子组件：父->子：props；子->父：$emit
2.获取父子组件实例：$parent, $children, $refs
3.兄弟组件传值：全局事件总线:$on,$emit
4.隔代传值：provide，inject
5.无关联组件：vuex
五、vue的SSR
SSR原理：SSR也就是服务端渲染，也就是将vue再客户端把标签渲染成HTML的工作放在服务器端完成，然后再把html直接返回给客户端。
六、vue组件的data为什么必须是函数
防止数据共享，组件可以被复用，保证组件不同的实例之间data不冲突。
七、hash路由和history路由：
- hash路由：是根据url中#后面的hash值切换页面内容的，不美观，但兼容性好，所有浏览器都支持了可以通过window.location.hash来获取和修改hash值
- history路由：是借助HTML5的
History API来实现页面导航，通过pushState()和replaceState()方法来改变浏览器的历史记录，从而实现无刷新页面切换。美观，但兼容性不如hash路由，IE9及以下浏览器都不支持
八、说一下v-if和v-show的区别
- v-if：是根据条件表达式的真假渲染元素的。当条件为真时，元素才会被渲染到DOM中；条件为假时，元素及其所有子节点都不会被渲染。
- v-show：无论表达式的真假，元素都会被渲染到DOM中，只是通过修改元素的display属性来控制元素的显隐
- 性能消耗：v-if性能消耗较高，因为他会在条件变化时，进行DOM的添加或删除操作，这会触发浏览器的重排；v-show的切换性能消耗较低。只是简单的修改元素的display样式，只触发重绘不会触发重排，切换状态时速度也更快
九、keep-alive：
- 功能：
缓存组件：当组件被keep-alive 包裹时，在组件切换出去后，不会被销毁，而是被缓存起来。当再次切换回该组件时，会直接从缓存中获取组件实例，而不是重新创建。保留状态：可以保留组件的状态。 - 生命周期：被keep-alive缓存的组件会多出两个生命周期钩子函数，
activated和deactivated。当组件被激活时（从缓存中取出并显示时），会触发activated钩子函数；当组件被停用时（切换到其他组件），会触发deactivated钩子函数。可以在activated中发送数据请求，在deactivated中进行一些清理工作。 - 缓存特定组件：用include和exclude缓存和不缓存与之匹配的组件
- 限制缓存数量：max
十、watch和computed区别：
- watch：用于监听响应式数据的变化，比如data或者props中的值，当被监听的数据发生变化，会执行相应的回调函数，支持异步操作，没有缓存机制。
- computed：用于计算一个新的值，依赖于其他响应式数据，只有当以来的数据发生变化时才会重新计算，内部有缓存机制，不支持异步操作。
十一、vue的修饰符:
1.事件修饰符：
- .stop：阻止冒泡
- .prevent：阻止默认事件
- .capture：使用事件捕获
- .self：只在当前元素本身触发
- .once：只触发一次
- .passive：默认行为将会立即触发
2.表单修饰符：
- .lazy:在文本框失焦才会渲染
- .number:自动将输入内容转换为number数据类型
- .trim:可以自动过滤输入首位的空格
十二、v-if和v-for
v-for的优先级高于v-if，当它们同时存在于一个元素上时，v-for会先执行，可能会导致不必要的渲染，如果要根据条件来判断是否渲染列表的话，最好是将v-if绑定在v-for的外层元素上。
十三、优化
- key 保证唯一
- 使用路由懒加载、异步组件
- 防抖、节流
- 第三方模块按需导入
- 长列表滚动到可视区域动态加载
- 图片懒加载
- 压缩图片：image-webpack-loader
十四、vue中key的作用（在diff算法中的作用）
1.vue的虚拟DOM的diff算法：
- 概念：diff算法用于比较虚拟DOM树的前后变化，找出需要更新的部分，并将这些变化更新到真实DOM上，以最小化DOM操作，提高性能。
- 工作原理：vue的diff算法采用了双端比较的策略。在对比新旧虚拟DOM树时，它会从根节点开始，逐层比较。对于同一层级的节点，会先比较首尾节点，然后根据节点类型和key值判断是否是相同节点，如果相同则继续比较子节点，否则直接替换该节点及其子节点。
- key值作用：如果有key值，在比较同一层级节点时，会根据key值精准定位更新节点，避免不必要的DOM移动和创建。如果没有key值，vu饿就采用简单的顺序比较算法，可能会导致较多的DOM更新操作。
十五、ref作用：
- 父组件获取子组件实例或者DOM元素的信息。
- 如果绑定在普通DOM元素上，就指向DOM元素
- 如果绑定在子组件元素上，就指向子组件实例
- 使用场景：1.当前页面获取DOM；2.获取子组件中data；3.获取子组件中的方法
十六、接口请求一般放在哪个生命周期中
1.理论上可以放在：
created、beforeMount、mounted中，因为这三个钩子中，data已经创建，可以将服务器返回的数据进行赋值
2.一般在created中请求：
能更快获取服务端数据，减少页面加载时间 SSR不支持beforeMount和mounted钩子函数，放在created有助于代码一致性 在created中调用，是在页面渲染前初始化数据，而mounted中请求数据可能会导致闪屏问题。
十七、vuex
定义：集中存储更新应用程序中所有组件的状态
核心概念：
State：存储变量，储存应用的状态数据，相当于全局数据源 Mutation：唯一能直接更改state中的变量，必须是同步函数。 Action：用于处理异步操作，也可以通过commit方法提交mutation简介更改state Getter：类似于计算属性，当它所依赖的state中数据发生变化时，Getter会自动重新计算并更新其返回值 Module：将state、getter、mutation、acion按照不同功能模块进行划分，每个模块拥有自己的状态和相关的操作。
十八、动态渲染组件：
通过component元素和is属性来实现
十九、route和router
route是指路由信息对象，包括路由信息参数；router是路由实例对象，包括跳转方法、钩子函数等
二十、路由跳转方法
router-link、push、replace push：新增一条记录，浏览器后退可返回 replace：替换当前路由，浏览器不可回退
