一.vue
1.v-if和v-for哪个优先级更高？
可以在源码compiler\codegen\index.js中找到答案
1、显然v-for高于v-if被解析。
2、如果同时出现，每次渲染都会先执行循环再判断条件，无论如何循环都不可避免，浪费了性能。
3、要避免这种情况，要在外层嵌套一个template，在这一层进行v-if的判断，然后在内部进行v-for的循环。
2.vue组件中的data为啥必须是函数，而vue的根实例没有此限制？
可以在源码src\core\instance\state.js-initData()中找到答案
1、vue组件可能存在多个实例，如果使用对象形式定义data，则会导致他们公用一个data对象，那么状态变更会影响
所有组件实例，这是不合理的。
2.采用函数定义，在initData时，会将其作为工厂函数返回全新data对象，有效规避多实例之间状态污染问题。
3.而在vue根实例创建过程中不存在该限制，也是因为根实例只能有一个，不需要担心这种状况。
3.vue中key的作用及工作原理？
可以在源码src\core\vdom\patch.js-updateChildren() 中找到答案
1、key的作用主要是为了高效的更新虚拟dom，其原理是vue在patch过程中通过key可以精准判断俩个
节点是否是同一个，从而避免频繁更新不同元素，使得patch过程中更加高效，减少dom频繁操作，提高性能。
2、若不设置key还可能在列表更新时引发一些隐蔽的bug。
3、vue中在使用相同标签名元素过度切换时，也会使用到key属性，其目的也是为了让vue可以区分他
们，否则vue只会触发替换其内部属性而不会触发过度效果
4.如何理解vue中的diff算法呢？
1、diff算法是虚拟dom技术的必然产物，通告新旧虚拟dom作对比（即diff）将变化的地方更新在真实
的dom上；另外，也需要diff高效的执行对比过程，从而降低时间复杂度O(n)
2、vue 2.x中为了降低watcher粒度，每个组件只有一个watcher与之对应，只有引入diff才能精确
找到发生变化的地方。
3、vue中diff执行的时刻是组件实例执行其更新函数时，他会比对上一次渲染结果，oldVnode和新的
渲染结果newVnode，此过程称为patch。
4、diff整体过程遵循深度优先、同层比较策略；两个节点之间比较是根据他们是否拥有子节点或文本节
点做不同的操作，比较两组子节点是算法的重点。
5.谈一谈对vue组件化的理解？
1、组件是独立可复用的代码组织单元，组件系统是vue核心特性之一，它使开发者使用小型、 独立和通
常可复用的组件构建大型应用。
2、组件化开发可以大幅度提高应用开发效率、测试性、复用性等
3、组件使用 按分类有：页面组件、业务组件、通用组件
4、vue的组件是基于配置的，我们通常编写的组件是组件配置而非组件，框架后续会生成其构造函数，
他们基于VueComponent，扩展于vue
5、vue中常见的组件化技术有：属性prop，自定义事件、插槽等，他们主要用于组件通信扩展等；
6、合理的划分组件，有助于提升应用性能
7、组件应该是高内聚，低偶合的
8、遵循单向数据流的原则
6.vue组件的通信？
1.vue组件中通信方式有哪几种？
1>props
2>$emit/$on 事件总线
3>vuex
4>$parent/$children
5>$attrs/$listeners
6>provide /inject
分为父子组件通信
兄弟组件通信
跨层级之间组件通信
## 7.vue3.0新特性
二.react
1、redux中间件的原理是什么？
redux 是 派发action 传给 store 传给 Reducer，->store
中间件是 action 和 store 之间的，action 和 store中间的桥梁是 dispatch，
action ->store.dispatch 直接传递给store，所以action只能是一个对象，
使用redux-thunk action 就可以是一个函数
redux-thunk 源码：
function createThunkMiddleware(extraArgument) {
return ({ dispatch, getState }) => (next) => (action) => {
if (typeof action === 'function') {
return action(dispatch, getState, extraArgument);
}
return next(action);
};
}
const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;
export default thunk;
2、你会把数据统一放到redux 中管理，还是把共享的数据放到redux中管理？
都放到redux中管理 便于后期的维护和扩展 项目不分大小，工程化统一管理
3、componentWillReceiveProps的调用时机？
子组件第二次接收props的时候 会调用。
4、react性能优化的最佳实践？
pureComponent 自带shouldComponenUpdata() 浅比较props 如果相同 不进行渲染 immutable.js 库做结合 要看看
5、虚拟dom是什么？为什么虚拟dom会提升代码性能？
虚拟dom 就是js对象 将真实dom转成js对象 进行比对 提高性能 diff 算法 要看看
6、webpack 中，是借助loader完成jsx转化 还是babel？
babel-preset-react
7、调用setState后发生了什么？
如何使用？
函数式编程 this.setState((preState)=>{
age:++preState.age;
})
8、setState是异步的，这个点你在什么时候遇到过坑？
就是取值 要在回调函数中取值
9、refs的作用是什么？在什么业务场景下使用refs？
获取图片宽高 ，做放大镜的
10、ref是一个函数 ，有什么好处？
class Test extends Component{
componentDidMount{
this.elem
// 获取div标签对应的元素 好处是销毁/重新渲染的时候 有效清空 防止内存泄露
}
render(){
return <div ref={(div)=>{this.elem = div }}> </div>
}
}
11、高阶组件你是怎么理解的？他本质是一个什么样的东西？
高阶组件 本质上就是一个函数 接收函数 返回函数
对一个组件进行包装 ，返回新的组件，
为什么要进行包装？
因为这个组件很多地方都要用到，这个组件大部分地方都可以共用，小部分有区别，把大部分共用的地方
放到高阶组件里 小部分通过传入不同的参数来动态改变不同场景下使用的差异
高阶组件用的多吗？ 会遇到什么问题？
用的多 会出现高阶组件地狱的现象 高版本中hook解决了问题
12、受控组件和非受控组件的区别？
受控组件 的改变 完全受控于数据的变化
非受控组件 通过refs 去直接拿dom上的数据
13、函数组件和hooks
14、this指向问题 你一般都怎么解决？
箭头函数 this指向组件 是作用域链的问题
15、函数组件怎么做性能优化？
函数式组件 性能相对于 普通组件是高还是低？
高的原因：是个函数，没有生命周期，和类来比较 没有构造类的过程，直接执行函数就可以啦
低的原因：props发生变化 函数就要重新执行，可以用react.memo 进行包装 包装后就有
shouldComponenUpdate 的一个特性 同时不用构造自己的生命周期函数 性能一定比普通函数要好
16、哪一个生命周期里发送ajax？
componentDidMount
1.componentWillMount 新的版本中已经废弃了
2.ssr项目中componentWillMount 要做服务器端项目数据的获取，所以不能被占用
17、ssr的原理是什么？
借助虚拟dom在服务器上执行 1、虚拟dom的好处 可以让我们的代码运行速度更快 2、虚拟dom 让我们的代码变成一个js对象，通过node让react 在客户端和服务器上执行
18、redux-saga 的设计思想是什么？什么是sideEffects
高薪 要了解
19、react vue jquery 是否可以共存在一个项目之中？
可以
<div></div> // jquery操作的
<div id="react"></div> // react 操控的
<div id="vue"></div> // vue 操控的
reactDom.render(<app/>,document.getElemenetbyId("react"));
20、组件是什么？ 类是什么？ 被编译成什么？
模块概念是 webpack中引入的一个个文件。
函数是功能的集合。
组件是页面上的一部分
组件本质上是一个类 ，es6的类 对应成es5的一个构造函数，最本质上是一个构造函数，
类被编译成一个构造函数
21、你是如何跟着社区成长的？
考察 学习新知识点的态度
手机按照vpn 订阅react官方团队的 推特的账号 ，会领先于知乎 掘金 。
22、如何避免ajax数据重新获取？
用redux进行管理 如果数据不存在 不进行ajax发送
23、react-router4的核心思想是什么？和3有什么区别？
4.0 路由变成组件 非常灵活
3.0 是配置的路由思想
24、reselect 是做什么用的呢？
充当vue中computed的作用 如果计算属性发生变化则调用 通过缓存来提升代码数据
25、react-router 的基本原理 hashHistory，browserHistory？
hashHistory 不需要后端支持 #
browserHistory 后端服务器 做配置
26、什么情况使用异步组件？
Reloadable 库
27、xss攻击在react中如何防范？
dangerouslySetInnerHTML={{__html:''}} 慎用这个函数
28、getDerivedStateFromProps getSnapshotBeforeUpdate
父组件的props 发生变化去更新state 去替换componentWillReceivePorps函数
getSnapshotBeforeUpdate 在组件发生更新之前，去获取dom结构 替换componentWillUpdate
