几个面试题

题目

vue

• v-if 和 v-show 的区别
• 为何 v-for 中要用 key
• 描述 vue 组件生命周期（以及有父子组件，两者的生命周期）
• 组件间如何通讯
• 响应式原理
• 组件渲染和更新的过程
• 双向数据绑定 v-model 的原理

React

• 组件之间如何通讯
• JSX 本质是什么
• context 是什么，如何应用？
• shouldComponentUpdate 的用途
• redux 单向数据流过程
• setState 场景题

综合应用

• 用 React 设计一个 todo-list

• 说明组件结构

• 说明 redux state 数据结构

• 用 vue 设计一个购物车

• 说明组件结构

• 说明 vuex state 数据结构

webpack

• 前端代码为何要进行构架和打包？
• module chunk bundle 的区别
• loader 和 plugin 的区别
• webpack 如何实现懒加载？
• webpack 性能优化
• babel-runtime 是什么，如何应用？

如何应对？

老师看过很多面试题，对于框架面试题，总结出规律

使用

• 基本用法
• 高级特性
• 周边工具

原理

• 基本理念的理解（组件化， MVVM）
• 热门技术的深度（vdom， diff 算法）
• 框架原理的全面性，完整流程

综合应用

• 场景题，现场做项目设计
• 组件结构
• 数据结构

思考一下，为何面试会这样问：

• 保证候选人能正常干活，不拖后腿 —— 考察：基本用法，周边工具，高级特性
• 多候选人竞争时，选择有技术追求的 —— 考察：原理
• 看候选人是否能独立承担项目 —— 考察：综合应用、设计

class Root extends React.Component {
  constructor(props) {
    super(props)
    this.state = { count: 0 }
  }
  componentDidMount() {
    this.setState({ count: this.state.count + 1 })
    console.log(this.state.count)    // 打印
    this.setState({ count: this.state.count + 1 })
    console.log(this.state.count)    // 打印
    setTimeout(function(){
      this.setState({ count: this.state.count + 1 })
      console.log(this.state.count)   // 打印
    }, 0)
    setTimeout(function(){
      this.setState({ count: this.state.count + 1 })
      console.log(this.state.count)   // 打印
    }, 0)
  }
  render() {
    return <h1>{this.state.count}</h1>
  }
}