前端框架相关面试题

一、框架（Vue/React）

1. Vue的生命周期

• beforeCreate & created 在实例化vue的阶段，在_init方法中执行的。

Vue.prototype._init = function (options?: Object) {
  // ...
  initLifecycle(vm)
  initEvents(vm)
  initRender(vm)
  callHook(vm, 'beforeCreate')
  initInjections(vm) // resolve injections before data/props
  initState(vm)
  initProvide(vm) // resolve provide after data/props
  callHook(vm, 'created')
  // ...
}

initState作用是初始化props、data、methods、watch、computed等属性，因此不能在beforeCreate钩子函数中获取props、data等定义的值，也不能调用methods中定义的函数。

• beforeMount & mounted
• beforeUpdate & updated
• beforeDestory & destoryed
• activated & deactivated

2. diff 算法

3. 响应式原理

Vue.js 实现响应式的核心是利用了 ES5 的 Object.defineProperty。

• Vue将data初始化为一个Observer，遍历data对象的所有property，使用Object.defineProperty将这些property全部转为getter/setter，getter负责依赖收集，setter负责派发更新；
• getter实例化一个Dep的实例const dep = new Dep()，通过dep.depend方法收集依赖，也就是收集Watcher；
• data值发生改变时，触发set，触发依赖收集器中的所有监听（Watcher）更新，从而使关联的数组重新渲染。

1. Object.defineProperty

该方法直接在一个对象上定义一个新属性，或者修改一个对象的现有属性值，并返回这个对象。

Object.defineProperty(obj, prop, descriptor)

descriptor提供的get和set方法可以访问和修改属性，而一旦对象拥有了getter和setter，我们可以简单的把这个对象称为响应式对象。

4. vue父子组件生命周期执行顺序

vue父子组件生命周期执行顺序