Vue
1. MVVM 、MVC、MVP的区别
- MVVM
- Model(数据) View(视图) ViewModel
- MVC
- Model View Controller(控制器)
- MVP
- 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.emit 是主要API
- 任意组件:使用 Vuex 通信
7. Vue是如何实现双向绑定的
8. Vue 的key值有什么用
9. 怎么去捕获await async 中的错误
🈶10. Vue 数据响应式怎么做到的?️️️️️
-
答案在文档《深入响应式原理》
-
要点
- 使用 Object.defineProperty 把这些属性全部转为 getter/setter
- 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 树的区别完成的。
🈶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 是高阶组件)