Vue2
一、vue2的生命周期钩子有哪些？数据请求放在哪个钩子？
生命周期钩子：
创建：
beforeCreate – 数据data初始化前
created – 数据data初始化之后
挂载：
beforeMount – 数据准备渲染（此时data和template生成了html但还未在页面中渲染）
Mounted – 数据渲染完成（模板的html已经渲染到了页面，且只执行一次）
更新：实时监控数据变化，随时更新DOM
beforeUpdate – 数据更新前
updated – 数据更新
销毁：
beforeDestroy – Vue实例销毁之前执行
destroyed – Vue实例销毁之后执行
还有三个不常用
缓存：
activated:被keep-alive缓存的组件激活时调用。
deactivated：被keep-alive缓存的组件失活时调用。
错误处理
errorCaptured：组件或组件的后代发生错误调用。
数据请求放在 mounted 里面，因为放在其他地方都不合适（xjb扯）。
为什么不放在created里面？
SSR
如果放到created里面，会在后端执行一次，前端执行一次。
SSR会执行created。把组件放到前端时再执行一次created。
二、Vue2组件间通信的方式有哪些？
父子组件：使用「props 和事件」进行通信详情
爷孙组件：
使用两次父子组件间通信来实现
使用「provide + inject」来通信
任意组件：使用 eventBus = new Vue() 来通信
主要API 是 eventBus.emit
缺点是事件多了就很乱，难以维护
使用 Event Bus 实现兄弟组件通信【Vue 小技巧】_哔哩哔哩_bilibili
任意组件：使用 Vuex 通信（Vue 3 可用 Pinia 代替 Vuex）
三、Vuex用过吗？怎么理解？
1、背下文档第一句：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库
2、说出核心概念的名字和作用：store/State/Getter/Mutation/Action/Module
store 是个大容器，包含以下所有内容
State 用来读取状态，带有一个 mapState 辅助函数
Getter 用来读取派生状态（你读的东西是计算出来的，比如名字加年龄），附有一个 mapGetters 辅助函数
Mutation 用于同步提交状态变更，附有一个 mapMutations 辅助函数
Action 用于异步变更状态，但它提交的是 mutation，而不是直接变更状态。
Module 用来给 store 划分模块，方便维护代码
常见追问：Mutation 和 Action 为什么要分开？
答案：为了让代码更易于维护。（可是 Pinia 就把 Mutation 和 Action 合并了呀）
如果反问为啥Pinia把他们合并了：减少一些概念，让代码更容易理解。
复杂是为了维护简单是为了理解 万能答案。
四、VueRouter用过吗？怎么理解？
1、背下文档第一句：Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。
2、说出核心概念的名字和作用：router-link（点击跳转） router-view（容纳路由视图） 嵌套路由（路由加一个child路由里面还有路由，子路由渲染到router-view中）、Hash 模式和 History 模式、导航守卫、懒加载
常见追问：
Hash 模式和 History 模式的区别？
一个用的 URL的Hash，一个用的HTML5的 History API
哈希模式不需要后端 nginx 配合（把所有的HTML请求都重定向到index），一个需要后端配合
导航守卫如何实现登录控制？
router.beforeEach((to, from, next) => {
if (to.path === '/login') return next()//如果是登录页面直接放行
//你想去受控页面但是又没有登录我给你重定向到登录页面
if (to是受控页面 && 没有登录) return next('/login')
//如果你不是受控页面或者已经登录了直接next放行
next()
})
导航守卫就是每一个路由都可以设置一个钩子，进入离开路由以及在路由解析的时候做什么。
import（‘APP’）importAPP组件
加括号把这个组件放到路由里面这就是懒加载。
https://blog.csdn.net/sinat_36521655/article/details/106125910
五、Vue2 如何实现双向绑定？
1、一般使用 v-model / .sync 实现，
v-model 是 v-bind:value 和 v-on:input 的语法糖
- v-bind:value 实现了 data ⇒ UI 的单向绑定
- v-on:input 实现了 UI ⇒ data 的单向绑定
加起来就是双向绑定了
2、这两个单向绑定是如何实现的呢？
- v-bind:value通过 Object.defineProperty API 给 data每一个属性递归的创建 getter 和 setter，用于监听 data 的改变，data 一变就会安排改变 UI
- v-on:input通过 template compiler 给 DOM 添加事件监听，DOM input 的值变了就会去修改 data。
Vue3
一、Vue3为什么使用Proxy?
-
弥补 Object.defineProperty 的两个不足
- 动态创建的 data 属性需要用 Vue.set 来赋值，Vue 3 用了 Proxy 就不需要了
- 基于性能考虑，Vue 2 篡改了数组的 7 个 API，Vue 3 用了 Proxy 就不需要了
defineProperty 需要提前递归地遍历 data 做到响应式，而 Proxy 可以在真正用到深层数据的时候再做响应式（惰性）
二、Vue 3 为什么使用 Composition API？
答案参考尤雨溪的博客：Vue Function-based API RFC - 知乎 (zhihu.com)
-
Composition API 比 mixins、高阶组件、extends、Renderless Components 等更好，原因有三：
- 模版中的数据来源不清晰。
- 命名空间冲突。
- 性能。
更适合 TypeScript
二、Vue 3 与Vue2 对比做了哪些改动？
createApp() 代替了 new Vue()
v-model 代替了以前的 v-model 和 .sync
根元素template 可以有不止一个元素了
新增 Teleport 传送门
destroyed 被改名为 unmounted 了（before 当然也改了）
ref 属性支持函数了
其他建议自己看看写写。
