苏宁外包电话初面

[lizhongzhen11]

说明

同一天，刚刚觉得浪费了半天钱请假去东软面试，结果没能最大限度的检验自己的技术，不值。在新街口等小伙伴的时间里，BOSS上又有个苏宁外包来联系我了。
当时我的内心是：苏宁大佬都邀请我去面试了，我才不去外包呢！
但是，人好，我态度很好的说，之前面的几家公司都水的一逼，技术都问不了什么难度的东西（PS：我没告诉他我阿里一面挂了的事。。。）。
我说别再搞这种很水的面试来找我，如果你们技术追求不够的话别来找我，人事估计也被我口气震惊住了，然后说，他们公司的技术负责人待会可以打电话跟我进行一次简短的电话出面，问我可不可以？
可能也想灭灭我的威风吧。我想想反正朋友还没下班，就坐在大洋百货里面的星巴克接受电话出面了。
没过多久，电话打来了。
简短寒暄后，开始提问题。

过程

1.说说vue双向绑定和响应式监听原理

我看过，而且是源码，这是核心，问题不大。

2.说说computed和methos区别

这个真没关注过，不错，发现一个弱点。
我当时回答两者有本质区别的，methos可以看成我们以前写的函数，computed是计算属性，它是要被放进data里面监听的。当然，我瞎编的。。。

2018-07-20补充
我下午看了一会，大致算有点懂了吧，写下个人拙见。
我先全局搜索computed，dist文件夹不看，example文件夹也先排除，然后在src/core/instance/state.js和src/core/util/option里面发现了computed以及props还有methods。
而src/core/instance/state.js里面有initProps, initData, initComputed以及initMethods等初始化方法，名字这么直观，我当然看它了！
initMethods方法代码最少，最重要的是最后一行：

vm[key] = methods[key] == null ? noop : bind(methods[key], vm)

也就是说其实就是在vue实例上绑定methods里面定义的方法，跟obj.fn = function(){}类似的道理，没做特殊处理。

但是initComputed相关的代码就有点多了。
先调用了util/env.js里面的isServerRendering方法，其实就是判断是不是处于浏览器环境下并且检测VUE服务器渲染器的存在并避免 Webpack shimming(填补？？？)过程。（注释里的说明）

结合initComputed方法里的代码，其实是为了防止不在浏览器环境（比如node），把watchers数组里面的各个方法变成Watcher的实例（注释里说明：为计算属性创建内部监视器）。这里其实就能大概知道computed和methods的不同，一个就是很普通的函数作为属性值，还有一个是内部拥有监听器的函数。

但是，还得往下看，不要轻易下结论。
接下来判断vue实例中有没有computed中的方法，没有的话调用defineComputed(vm, key, userDef)。该方法就在下面：

export function defineComputed (
  target: any,
  key: string,
  userDef: Object | Function
) {
  const shouldCache = !isServerRendering() // 这一步是判断需不需要缓存的
  if (typeof userDef === 'function') {  // userDef其实就是computed里面的属性，我们一般写成函数 
    sharedPropertyDefinition.get = shouldCache
      ? createComputedGetter(key)  // 浏览器环境下且vue服务渲染器存在的话就会调用，其实就是修改函数的get方法
      : userDef
    sharedPropertyDefinition.set = noop // sharedPropertyDefinition 在state.js开头就定义了，是一个初始化get/set方法的对象
  } else { // 这个分支判断如果我们写的computed里面的属性值不是函数，而是其他东西
    sharedPropertyDefinition.get = userDef.get // 可能是一个有get方法的对象也可能没有
      ? shouldCache && userDef.cache !== false
        ? createComputedGetter(key) // 有缓存就继续修改get方法
        : userDef.get
      : noop // 没有get方法那就默认赋值为空函数
    sharedPropertyDefinition.set = userDef.set
      ? userDef.set
      : noop
  }
  if (process.env.NODE_ENV !== 'production' &&
      sharedPropertyDefinition.set === noop) {
    sharedPropertyDefinition.set = function () {
      warn(
        `Computed property "${key}" was assigned to but it has no setter.`,
        this
      )
    }
  }
  Object.defineProperty(target, key, sharedPropertyDefinition) // 上面那么多代码其实就是为了改sharedPropertyDefinition的set/get方法，然后最终通过 Object.defineProperty() 把computed里面的属性名添加到vue实例中。
}
// 这个方法最终把get方法缓存到Watcher中
function createComputedGetter (key) {
  return function computedGetter () {
    const watcher = this._computedWatchers && this._computedWatchers[key]
    if (watcher) {
      if (watcher.dirty) {
        watcher.evaluate()
      }
      if (Dep.target) {
        watcher.depend()
      }
      return watcher.value
    }
  }
}

源码其实不难，仔细用心看下来就能发现methods和computed的区别了。所以记住，methods就是vue实例对象的普通属性，指向了一堆普通函数，而computed则在函数内部通过Watcher修改了get和set方法，进行了监听。

3.父子组件传值

这个也没问题。

4.flex

虽然没用过，但是常用属性还是背过的。当然，让我一个不差的全背出来估计得预先准备下。

5.移动端click事件300ms延迟

哈哈哈哈哈，感谢上周自己不辞辛劳整理的常考面试题，我才知道这个问题及答案的。
一般说的是ios，因为历史原因遗留下来的问题。以前流行一个叫fastclick库，不用这个库自己写也可以，直接在body或者父div上绑定要执行的事件，通过事件冒泡执行同时禁用原先应该要执行的事件。

6.原型链

这个东西也是常考，自己也写过博客做强记忆理解。

之后

BOSS上的人事联系我说负责人反馈我技术确实不错，哈哈哈哈哈，傲娇一把。
其实我技术什么水平，阿里一面挂了我就知道。
P5肯定没有，不用想。所以，能不能达到P4呢？
这个就需要下周苏宁前端组长来面试我了。
是的，虽然是外包，但却是苏宁的人来面试我。我觉得很好，苏宁我会去尝试正式员工面试，在这之前就有苏宁员工来面试我可以让我增加经验，期待！

最终

由于我没有满2年工作经验，他想让我造假，我想了下，不行，我接下来要去面试苏宁本部的，我才不造假呢。因为工作经验不够，没达到2年标准，所以还是没敢继续推。计划泡汤了，只能接下来自己去面本部了。