Vue

1. MVVM 、MVC、MVP的区别

MVVM

Model(数据) View（视图） ViewModel

Model View Controller(控制器)

Model View Presenter

MVVM和MVC他们相同点都有M和V，

区别是一个是VM一个C

MVC里面中的C会比较手动一点，它需要自己去监听视图和数据的变化，去发一些请求，然后去更新视图和数据

而VM的话它会自动化一点，它可以自动对视图和Model双向绑定

2. slot是什么？有什么作用？

slot 插槽的意思
它有默认插槽、具名插槽、作用域插槽
作用：我们在写一些组件的时候，它的子元素是可以通过外部指定的，这个时候我们就可以使用插槽，就可以把子元素从外部来指定

3. v-model是如何实现的

v-model本质其实是一个语法糖
其实当你在写v-model的时候，相当于在写两件事

绑定value等于这个事件
监听这个组件的事件，获取它的值

:value="xxx" @input="xxx = $event.target.value"

🈶4. watch 和 computed的区别

watch是监听属性，computed是计算属性
watch在每次监听的属性变化时，它会自动跟着变化，而computed它是有缓存的，如果它的缓存没有发生变化它是不会主动变化的
juejin.cn/post/700100…

🈶5. Vue 有哪些生命周期钩子函数？分别有什么用？

Vue哪个生命周期进行数据请求，不考虑服务器端渲染，一般在mounted周期内请求数据

beforeCreate 是用来在创建组件之前做一些事情
created 是用来在创建组件之后做一些事情
beforeMount 是用来挂载组件之前做一些事情
Mounted 是用来挂载组件之后做一些事情
beforeUpdate 是用来更新组件之前做一些事情
Updated 是用来更新最贱之后做一些事情
beforeDestroy 是用来在组件毁灭之前做一些事情
destroyed 是用来在组件毁灭之后做一些事情

🈶6. Vue 如何实现组件间通信？

父子组件：使用 v-on 通过事件通信
爷孙组件：使用两次 v-on 通过爷爷爸爸通信，爸爸儿子通信实现爷孙通信
任意组件：使用 eventBus = new Vue() 来通信，eventBus. $on 和 eventBus.$ emit 是主要API
任意组件：使用 Vuex 通信

7. Vue是如何实现双向绑定的

8. Vue 的key值有什么用

9. 怎么去捕获await async 中的错误

🈶10. Vue 数据响应式怎么做到的？️️️️️

答案在文档《深入响应式原理》
1. 要点
  1. 使用 Object.defineProperty 把这些属性全部转为 getter/setter
  2. Vue 不能检测到对象属性的添加或删除，解决方法是手动调用 Vue.set 或者 this.$set

🈶11. Vuex 你怎么用的？

背下文档第一句：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
说出核心概念的名字和作用：State/Getter/Mutation/Action/Module

🈶12. Vue.set 是做什么用的？

🈶13. VueRouter 你怎么用的？

背下文档第一句：Vue Router 是 Vue.js 官方的路由管理器。
说出核心概念的名字和作用：History 模式/导航守卫/路由懒加载
说出常用API：

router-link/router-view/this.$router.push/this.$router.replace/this.$route.params

     this.$router.push('/user-admin')
     this.$route.params

🈶14. 路由守卫是什么？

看官方文档的例子，背里面的关键的话

____________________

React

1. React Hooks

🈶2. 受控组件 VS 非受控组件

   <FInput value={x} onChange={fn}/> 受控组件
   <FInput defaultValue={x} ref={input}/> 非受控组件

区别受控组件的状态由开发者维护，非受控组件的状态由组件自身维护（不受开发者控制）

🈶3. React 有哪些生命周期函数？分别有什么用？（Ajax 请求放在哪个阶段？）\

答题思路跟 Vue 的一样

钩子在文档里，蓝色框框里面的都是生命周期钩子
把名字翻译一遍就是满分
要特别说明哪个钩子里请求数据，答案是 componentDidMount

🈶4. React 如何实现组件间通信？

父子靠 props 传函数

爷孙可以穿两次 props

任意组件用 Redux（也可以自己写一个 eventBus）

🈶5. shouldComponentUpdate 有什么用？

要点：用于在没有必要更新 UI 的时候返回 false，以提高渲染性能

🈶6. 虚拟 DOM 是什么？

要点：虚拟 DOM 就是用来模拟 DOM 的一个对象，这个对象拥有一些重要属性，并且更新 UI 主要就是通过对比（DIFF）旧的虚拟 DOM 树和新的虚拟 DOM 树的区别完成的。
参考：www.alloyteam.com/2015/10/rea…

🈶7. 什么是高阶组件？

要点：文档原话——高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。
举例：React-Redux 里 connect 就是一个高阶组件，比如 connect(mapState)(MyComponent) 接受组件 MyComponent，返回一个具有状态的新 MyComponent 组件。

🈶8. React diff 的原理是什么？

看你记忆力了：imweb.io/topic/579e3…

🈶9. 必考 Redux 是什么？

背下文档第一句：Redux 是 JavaScript 状态容器，提供可预测化的状态管理。重点是『状态管理』。
说出核心概念的名字和作用：Action/Reducer/Store/单向数据流
说出常用 API：store.dispatch(action)/store.getState()

🈶10. connect 的原理是什么？

react-redux 库提供的一个 API，connect 的作用是让你把组件和store连接起来，产生一个新的组件（connect 是高阶组件）

参考：segmentfault.com/a/119000001…

面Vue、React

Vue