从源码层面解读16道Vue常考面试题

客官°小女子只卖身不卖艺 2022-08-29 10:14 142阅读 0赞

> ❝
> 
> 本文通过 16 道 vue 常考题来解读 vue 部分实现原理，希望让大家更深层次的理解 vue；
> 
> 近期自己也实践了几个编码常考题目，希望能够帮助大家加深理解：
> 
> 1.  ES5 实现 new
> 2.  ES5 实现 let/const
> 3.  ES5 实现 call/apply/bind
> 4.  ES5 实现 防抖和节流函数
> 5.  如何实现一个通过 Promise/A+ 规范的 Promise
> 6.  基于 Proxy 实现简易版 Vue
> 
> ❞

### 题目概览 ###

1.  `new Vue()` 都做了什么？
2.  `Vue.use` 做了什么？
3.  `vue` 的响应式？
4.  `vue3` 为何用 `proxy` 替代了 `Object.defineProperty`?
5.  `vue` 双向绑定，`model` 怎么改变 `view`，`view` 怎么改变 `vue`？
6.  `vue` 如何对数组方法进行变异？例如 `push`、`pop`、`slice` 等；
7.  `computed` 如何实现？
8.  `computed` 和 `watch` 的区别在哪里？
9.  计算属性和普通属性的区别？
10. `v-if/v-show/v-html` 的原理是什么，它是如何封装的？
11. `v-for` 给每个元素绑定事件需要事件代理吗？
12. 你知道 `key` 的作⽤吗？
13. 说一下 `vue` 中所有带`$`的方法？
14. 你知道 `nextTick` 吗？
15. 子组件为什么不能修改父组件传递的 `props`，如果修改了，`vue` 是如何监听到并给出警告的？
16. 父组件和子组件生命周期钩子的顺序？

### 题目详解 ###

#### 1. `new Vue()` 都做了什么？ ####

##### 构造函数 #####

> ❝
> 
> 这里我们直接查看源码 `src/core/instance/index.js` 查看入口:
> 
> 1.  首先 `new` 关键字在 `JavaScript` 中是实例化一个对象；
> 2.  这里 `Vue` 是 `function` 形式实现的类，`new Vue(options)` 声明一个实例对象；
> 3.  然后执行 `Vue` 构造函数，`this._init(options)` 初始化入参；
> 
> ❞

import { initMixin } from "./init";
    import { stateMixin } from "./state";
    import { renderMixin } from "./render";
    import { eventsMixin } from "./events";
    import { lifecycleMixin } from "./lifecycle";
    import { warn } from "../util/index";
    
    function Vue(options) {
      // 构造函数
      if (process.env.NODE_ENV !== "production" && !(this instanceof Vue)) {
        warn("Vue is a constructor and should be called with the `new` keyword");
      }
      // 初始化参数
      this._init(options);
    }
    
    // 初始化方法混入
    initMixin(Vue);
    stateMixin(Vue);
    eventsMixin(Vue);
    lifecycleMixin(Vue);
    renderMixin(Vue);
    
    export default Vue;

##### `_init` #####

> ❝
> 
> 深入往下，在 `src/core/instance/init.js` 中找到 `this._init` 的声明
> 
> ❞

// 这里的混入方法入参 Vue
    export function initMixin(Vue: Class<Component>) {
      // 增加原型链 _init 即上面构造函数中调用该方法
      Vue.prototype._init = function (options?: Object) {
        // 上下文转移到 vm
        const vm: Component = this;
        // a uid
        vm._uid = uid++;
    
        let startTag, endTag;
        /* istanbul ignore if */
        if (process.env.NODE_ENV !== "production" && config.performance && mark) {
          startTag = `vue-perf-start:${vm._uid}`;
          endTag = `vue-perf-end:${vm._uid}`;
          mark(startTag);
        }
    
        // a flag to avoid this being observed
        vm._isVue = true;
        // 合并配置 options
        if (options && options._isComponent) {
          // optimize internal component instantiation
          // since dynamic options merging is pretty slow, and none of the
          // internal component options needs special treatment.
          // 初始化内部组件实例
          initInternalComponent(vm, options);
        } else {
          vm.$options = mergeOptions(
            resolveConstructorOptions(vm.constructor),
            options || {},
            vm
          );
        }
        /* istanbul ignore else */
        if (process.env.NODE_ENV !== "production") {
          // 初始化代理 vm
          initProxy(vm);
        } else {
          vm._renderProxy = vm;
        }
        // expose real self
        vm._self = vm;
    
        // 初始化生命周期函数
        initLifecycle(vm);
        // 初始化自定义事件
        initEvents(vm);
        // 初始化渲染
        initRender(vm);
        // 执行 beforeCreate 生命周期
        callHook(vm, "beforeCreate");
        // 在初始化 state/props 之前初始化注入 inject
        initInjections(vm); // resolve injections before data/props
        // 初始化 state/props 的数据双向绑定
        initState(vm);
        // 在初始化 state/props 之后初始化 provide
        initProvide(vm); // resolve provide after data/props
        // 执行 created 生命周期
        callHook(vm, "created");
    
        /* istanbul ignore if */
        if (process.env.NODE_ENV !== "production" && config.performance && mark) {
          vm._name = formatComponentName(vm, false);
          mark(endTag);
          measure(`vue ${vm._name} init`, startTag, endTag);
        }
    
        // 挂载到 dom 元素
        if (vm.$options.el) {
          vm.$mount(vm.$options.el);
        }
      };
    }

##### 小结 #####

> ❝
> 
> 综上，可总结出，`new Vue(options)` 具体做了如下事情：
> 
> 1.  执行构造函数；
> 2.  上下文转移到 vm；
> 3.  如果 `options._isComponent` 为 true，则初始化内部组件实例；否则合并配置参数，并挂载到 `vm.$options` 上面；
> 4.  初始化生命周期函数、初始化事件相关、初始化渲染相关；
> 5.  执行 `beforeCreate` 生命周期函数；
> 6.  在初始化 `state/props` 之前初始化注入 `inject`；
> 7.  初始化 `state/props` 的数据双向绑定；
> 8.  在初始化 `state/props` 之后初始化 `provide`；
> 9.  执行 `created` 生命周期函数；
> 10. 挂载到 `dom` 元素
> 
> 其实 `vue` 还在生产环境中记录了初始化的时间，用于性能分析；
> 
> ❞

#### 2. `Vue.use` 做了什么？ ####

##### use #####

> ❝
> 
> 直接查看 `src/core/global-api/use.js`, 如下
> 
> ❞

import { toArray } from "../util/index";
    
    export function initUse(Vue: GlobalAPI) {
      Vue.use = function (plugin: Function | Object) {
        // 插件缓存数组
        const installedPlugins =
          this._installedPlugins || (this._installedPlugins = []);
        // 已注册则跳出
        if (installedPlugins.indexOf(plugin) > -1) {
          return this;
        }
    
        // 附加参数处理，截取第1个参数之后的参数
        const args = toArray(arguments, 1);
        // 第一个参数塞入 this 上下文
        args.unshift(this);
        // 执行 plugin 这里遵循定义规则
        if (typeof plugin.install === "function") {
          // 插件暴露 install 方法
          plugin.install.apply(plugin, args);
        } else if (typeof plugin === "function") {
          // 插件本身若没有 install 方法，则直接执行
          plugin.apply(null, args);
        }
        // 添加到缓存数组中
        installedPlugins.push(plugin);
        return this;
      };
    }

##### 小结 #####

> ❝
> 
> 综上，可以总结 `Vue.use` 做了如下事情：
> 
> 1.  检查插件是否注册，若已注册，则直接跳出；
> 2.  处理入参，将第一个参数之后的参数归集，并在首部塞入 this 上下文；
> 3.  执行注册方法，调用定义好的 install 方法，传入处理的参数，若没有 install 方法并且插件本身为 function 则直接进行注册；
> 
> ❞

#### 3. `vue` 的响应式？ ####

##### Observer #####

> ❝
> 
> 上代码，直接查看 `src/core/observer/index.js`，class `Observer`，这个方法使得对象/数组可响应
> 
> ❞

export class Observer {
      value: any;
      dep: Dep;
      vmCount: number; // number of vms that have this object as root $data
    
      constructor(value: any) {
        this.value = value;
        this.dep = new Dep();
        this.vmCount = 0;
        def(value, "__ob__", this);
        if (Array.isArray(value)) {
          // 数组则通过扩展原生方法形式使其可响应
          if (hasProto) {
            protoAugment(value, arrayMethods);
          } else {
            copyAugment(value, arrayMethods, arrayKeys);
          }
          this.observeArray(value);
        } else {
          this.walk(value);
        }
      }
    
      /**
       * Walk through all properties and convert them into
       * getter/setters. This method should only be called when
       * value type is Object.
       */
      walk(obj: Object) {
        const keys = Object.keys(obj);
        for (let i = 0; i < keys.length; i++) {
          defineReactive(obj, keys[i]);
        }
      }
    
      /**
       * Observe a list of Array items.
       */
      observeArray(items: Array<any>) {
        for (let i = 0, l = items.length; i < l; i++) {
          observe(items[i]);
        }
      }
    }

##### defineReactive #####

> ❝
> 
> 上代码，直接查看 `src/core/observer/index.js`，核心方法 `defineReactive`，这个方法使得对象可响应，给对象动态添加 getter 和 setter
> 
> ❞

// 使对象中的某个属性可响应
    export function defineReactive(
      obj: Object,
      key: string,
      val: any,
      customSetter?: ?Function,
      shallow?: boolean
    ) {
      // 初始化 Dep 对象，用作依赖收集
      const dep = new Dep();
    
      const property = Object.getOwnPropertyDescriptor(obj, key);
      if (property && property.configurable === false) {
        return;
      }
    
      // cater for pre-defined getter/setters
      const getter = property && property.get;
      const setter = property && property.set;
      if ((!getter || setter) && arguments.length === 2) {
        val = obj[key];
      }
    
      let childOb = !shallow && observe(val);
      // 响应式对象核心，定义对象某个属性的 get 和 set 监听
      Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: function reactiveGetter() {
          const value = getter ? getter.call(obj) : val;
          // 监测 watcher 是否存在
          if (Dep.target) {
            // 依赖收集
            dep.depend();
            if (childOb) {
              childOb.dep.depend();
              if (Array.isArray(value)) {
                dependArray(value);
              }
            }
          }
          return value;
        },
        set: function reactiveSetter(newVal) {
          const value = getter ? getter.call(obj) : val;
          /* eslint-disable no-self-compare */
          if (newVal === value || (newVal !== newVal && value !== value)) {
            return;
          }
          /* eslint-enable no-self-compare */
          if (process.env.NODE_ENV !== "production" && customSetter) {
            customSetter();
          }
          // #7981: for accessor properties without setter
          if (getter && !setter) return;
          if (setter) {
            setter.call(obj, newVal);
          } else {
            val = newVal;
          }
          childOb = !shallow && observe(newVal);
          // 通知更新
          dep.notify();
        },
      });
    }

##### Dep #####

> ❝
> 
> 依赖收集，我们需要看一下 `Dep` 的代码，它依赖收集的核心，在 `src/core/observer/dep.js` 中:
> 
> ❞

import type Watcher from "./watcher";
    import { remove } from "../util/index";
    import config from "../config";
    
    let uid = 0;
    
    /**
     * A dep is an observable that can have multiple
     * directives subscribing to it.
     */
    export default class Dep {
      // 静态属性，全局唯一 Watcher
      // 这里比较巧妙，因为在同一时间只能有一个全局的 Watcher 被计算
      static target: ?Watcher;
      id: number;
      // watcher 数组
      subs: Array<Watcher>;
    
      constructor() {
        this.id = uid++;
        this.subs = [];
      }
    
      addSub(sub: Watcher) {
        this.subs.push(sub);
      }
    
      removeSub(sub: Watcher) {
        remove(this.subs, sub);
      }
    
      depend() {
        if (Dep.target) {
          // Watcher 中收集依赖
          Dep.target.addDep(this);
        }
      }
    
      notify() {
        // stabilize the subscriber list first
        const subs = this.subs.slice();
        if (process.env.NODE_ENV !== "production" && !config.async) {
          // subs aren't sorted in scheduler if not running async
          // we need to sort them now to make sure they fire in correct
          // order
          subs.sort((a, b) => a.id - b.id);
        }
        // 遍历所有的 subs，也就是 Watcher 的实例数组，然后调用每一个 watcher 的 update 方法
        for (let i = 0, l = subs.length; i < l; i++) {
          subs[i].update();
        }
      }
    }
    
    // The current target watcher being evaluated.
    // This is globally unique because only one watcher
    // can be evaluated at a time.
    // 全局唯一的 Watcher
    Dep.target = null;
    const targetStack = [];
    
    export function pushTarget(target: ?Watcher) {
      targetStack.push(target);
      Dep.target = target;
    }
    
    export function popTarget() {
      targetStack.pop();
      Dep.target = targetStack[targetStack.length - 1];
    }

##### Watcher #####

> ❝
> 
> Dep 是对 Watcher 的一种管理，下面我们来看一下 Watcher, 在 `src/core/observer/watcher.js` 中
> 
> ❞

let uid = 0;
    
    /**
     * 一个 Watcher 分析一个表达式，收集依赖项, 并在表达式值更改时触发回调。
     * 用于 $watch() api 和指令
     */
    export default class Watcher {
      vm: Component;
      expression: string;
      cb: Function;
      id: number;
      deep: boolean;
      user: boolean;
      lazy: boolean;
      sync: boolean;
      dirty: boolean;
      active: boolean;
      deps: Array<Dep>;
      newDeps: Array<Dep>;
      depIds: SimpleSet;
      newDepIds: SimpleSet;
      before: ?Function;
      getter: Function;
      value: any;
    
      constructor(
        vm: Component,
        expOrFn: string | Function,
        cb: Function,
        options?: ?Object,
        isRenderWatcher?: boolean
      ) {
        this.vm = vm;
        if (isRenderWatcher) {
          vm._watcher = this;
        }
        vm._watchers.push(this);
        // options
        if (options) {
          this.deep = !!options.deep;
          this.user = !!options.user;
          this.lazy = !!options.lazy;
          this.sync = !!options.sync;
          this.before = options.before;
        } else {
          this.deep = this.user = this.lazy = this.sync = false;
        }
        this.cb = cb;
        this.id = ++uid; // uid for batching
        this.active = true;
        this.dirty = this.lazy; // for lazy watchers
        this.deps = [];
        this.newDeps = [];
        this.depIds = new Set();
        this.newDepIds = new Set();
        this.expression =
          process.env.NODE_ENV !== "production" ? expOrFn.toString() : "";
        // parse expression for getter
        if (typeof expOrFn === "function") {
          this.getter = expOrFn;
        } else {
          this.getter = parsePath(expOrFn);
          if (!this.getter) {
            this.getter = noop;
            process.env.NODE_ENV !== "production" &&
              warn(
                `Failed watching path: "${expOrFn}" ` +
                  "Watcher only accepts simple dot-delimited paths. " +
                  "For full control, use a function instead.",
                vm
              );
          }
        }
        this.value = this.lazy ? undefined : this.get();
      }
    
      // 评估getter，并重新收集依赖项。
      get() {
        // 实际上就是把 Dep.target 赋值为当前的渲染 watcher 并压栈（为了恢复用）。
        pushTarget(this);
        let value;
        const vm = this.vm;
        try {
          // this.getter 对应就是 updateComponent 函数，这实际上就是在执行：
          // 这里需要追溯 new Watcher 执行的地方，是在
          value = this.getter.call(vm, vm);
        } catch (e) {
          if (this.user) {
            handleError(e, vm, `getter for watcher "${this.expression}"`);
          } else {
            throw e;
          }
        } finally {
          // "touch" every property so they are all tracked as
          // dependencies for deep watching
          // 递归深度遍历每一个属性，使其都可以被依赖收集
          if (this.deep) {
            traverse(value);
          }
          // 出栈
          popTarget();
          // 清理依赖收集
          this.cleanupDeps();
        }
        return value;
      }
    
      // 添加依赖
      // 在 Dep 中会调用
      addDep(dep: Dep) {
        const id = dep.id;
        // 避免重复收集
        if (!this.newDepIds.has(id)) {
          this.newDepIds.add(id);
          this.newDeps.push(dep);
          if (!this.depIds.has(id)) {
            // 把当前的 watcher 订阅到这个数据持有的 dep 的 subs 中
            // 目的是为后续数据变化时候能通知到哪些 subs 做准备
            dep.addSub(this);
          }
        }
      }
    
      // 清理依赖
      // 每次添加完新的订阅，会移除掉旧的订阅，所以不会有任何浪费
      cleanupDeps() {
        let i = this.deps.length;
        // 首先遍历 deps，移除对 dep.subs 数组中 Wathcer 的订阅
        while (i--) {
          const dep = this.deps[i];
          if (!this.newDepIds.has(dep.id)) {
            dep.removeSub(this);
          }
        }
        let tmp = this.depIds;
        this.depIds = this.newDepIds;
        this.newDepIds = tmp;
        this.newDepIds.clear();
        tmp = this.deps;
        this.deps = this.newDeps;
        this.newDeps = tmp;
        this.newDeps.length = 0;
      }
    
      // 发布接口
      // 依赖更新的时候触发
      update() {
        /* istanbul ignore else */
        if (this.lazy) {
          // computed 数据
          this.dirty = true;
        } else if (this.sync) {
          // 同步数据更新
          this.run();
        } else {
          // 正常数据会经过这里
          // 派发更新
          queueWatcher(this);
        }
      }
    
      // 调度接口，用于执行更新
      run() {
        if (this.active) {
          const value = this.get();
          if (
            value !== this.value ||
            // Deep watchers and watchers on Object/Arrays should fire even
            // when the value is the same, because the value may
            // have mutated.
            isObject(value) ||
            this.deep
          ) {
            // 设置新的值
            const oldValue = this.value;
            this.value = value;
            if (this.user) {
              try {
                this.cb.call(this.vm, value, oldValue);
              } catch (e) {
                handleError(
                  e,
                  this.vm,
                  `callback for watcher "${this.expression}"`
                );
              }
            } else {
              this.cb.call(this.vm, value, oldValue);
            }
          }
        }
      }
    
      /**
       * Evaluate the value of the watcher.
       * This only gets called for lazy watchers.
       */
      evaluate() {
        this.value = this.get();
        this.dirty = false;
      }
    
      /**
       * Depend on all deps collected by this watcher.
       */
      depend() {
        let i = this.deps.length;
        while (i--) {
          this.deps[i].depend();
        }
      }
    
      /**
       * Remove self from all dependencies' subscriber list.
       */
      teardown() {
        if (this.active) {
          // remove self from vm's watcher list
          // this is a somewhat expensive operation so we skip it
          // if the vm is being destroyed.
          if (!this.vm._isBeingDestroyed) {
            remove(this.vm._watchers, this);
          }
          let i = this.deps.length;
          while (i--) {
            this.deps[i].removeSub(this);
          }
          this.active = false;
        }
      }
    }

##### 小结 #####

> ❝
> 
> 综上响应式核心代码，我们可以描述响应式的执行过程：
> 
> 1.  根据数据类型来做不同处理，如果是对象则 `Object.defineProperty()` 监听数据属性的 `get` 来进行数据依赖收集，再通过 `get` 来完成数据更新的派发；如果是数组如果是数组则通过覆盖 该数组原型的⽅法，扩展它的 7 个变更⽅法（`push`/`pop`/`shift`/`unshift`/`splice`/`reverse`/`sort`），通过监听这些方法可以做到依赖收集和派发更新；
> 2.  `Dep` 是主要做依赖收集，收集的是当前上下文作为 `Watcher`，全局有且仅有一个 `Dep.target`，通过 `Dep` 可以做到控制当前上下文的依赖收集和通知 `Watcher` 派发更新;
> 3.  `Watcher` 连接表达式和值，说白了就是 watcher 连接视图层的依赖，并可以触发视图层的更新，与 `Dep` 紧密结合，通过 `Dep` 来控制其对视图层的监听
> 
> ❞

#### 4. `vue3` 为何用 `proxy` 替代了 `Object.defineProperty`? ####

##### traverse #####

> ❝
> 
> 截取上面 Watcher 中部分代码
> 
> ❞

if (this.deep) {
      // 这里其实递归遍历属性用作依赖收集
      traverse(value);
    }

> ❝
> 
> 再查看 `src/core/observer/traverse.js` 中 `traverse` 的实现，如下：
> 
> ❞

const seenObjects = new Set();
    
    // 递归遍历对象，将所有属性转换为 getter
    // 使每个对象内嵌套属性作为依赖收集项
    export function traverse(val: any) {
      _traverse(val, seenObjects);
      seenObjects.clear();
    }
    
    function _traverse(val: any, seen: SimpleSet) {
      let i, keys;
      const isA = Array.isArray(val);
      if (
        (!isA && !isObject(val)) ||
        Object.isFrozen(val) ||
        val instanceof VNode
      ) {
        return;
      }
      if (val.__ob__) {
        const depId = val.__ob__.dep.id;
        if (seen.has(depId)) {
          return;
        }
        seen.add(depId);
      }
      if (isA) {
        i = val.length;
        while (i--) _traverse(val[i], seen);
      } else {
        keys = Object.keys(val);
        i = keys.length;
        while (i--) _traverse(val[keys[i]], seen);
      }
    }

##### 小结 #####

> ❝
> 
> 再综上一题代码实际了解，其实我们看到一些弊端：
> 
> 1.  Watcher 监听 对属性做了递归遍历，这里可能会造成性能损失；
> 2.  defineReactive 遍历属性对当前存在的属性 `Object.defineProperty()` 作依赖收集，但是对于不存在，或者删除属性，则监听不到；从而会造成 对新增或者删除的属性无法做到响应式，只能通过 Vue.set/delete 这类 api 才可以做到；
> 3.  对于 es6 中新产⽣的 `Map`、`Set` 这些数据结构不⽀持
> 
> ❞

#### 5. `vue` 双向绑定，`Model` 怎么改变 `View`，`View` 怎么改变 `Model`？ ####

> ❝
> 
> 其实这个问题需要承接上述第三题，再结合下图
> 
> ❞

![4af12c3cafd70b86cc24813d2077001d.png][] 响应式原理

> ❝
> 
> Model 改变 View:
> 
> 1.  defineReactive 中通过 Object.defineProperty 使 data 可响应；
> 2.  Dep 在 getter 中作依赖收集，在 setter 中作派发更新；
> 3.  dep.notify() 通知 Watcher 更新，最终调用 `vm._render()` 更新 UI；
> 
> View 改变 Model: 其实同上理，View 与 data 的数据关联在了一起，View 通过事件触发 data 的变化，从而触发了 setter，这就构成了一个双向循环绑定了；
> 
> ❞

#### 6. `vue` 如何对数组方法进行变异？例如 `push`、`pop`、`slice` 等； ####

> ❝
> 
> 这个问题，我们直接从源码找答案，这里我们截取上面 Observer 部分源码，先来追溯一下，Vue 怎么实现数组的响应：
> 
> ❞

constructor(value: any) {
      this.value = value;
      this.dep = new Dep();
      this.vmCount = 0;
      def(value, "__ob__", this);
      if (Array.isArray(value)) {
        // 数组则通过扩展原生方法形式使其可响应
        if (hasProto) {
          protoAugment(value, arrayMethods);
        } else {
          copyAugment(value, arrayMethods, arrayKeys);
        }
        this.observeArray(value);
      } else {
        this.walk(value);
      }
    }

##### arrayMethods #####

> ❝
> 
> 这里需要查看一下 arrayMethods 这个对象，在 `src/core/observer/array.js` 中
> 
> ❞

import { def } from "../util/index";
    
    const arrayProto = Array.prototype;
    // 复制数组原型链，并创建一个空对象
    // 这里使用 Object.create 是为了不污染 Array 的原型
    export const arrayMethods = Object.create(arrayProto);
    
    const methodsToPatch = [
      "push",
      "pop",
      "shift",
      "unshift",
      "splice",
      "sort",
      "reverse",
    ];
    
    // 拦截突变方法并发出事件
    // 拦截了数组的 7 个方法
    methodsToPatch.forEach(function (method) {
      // cache original method
      const original = arrayProto[method];
      // 使其可响应
      def(arrayMethods, method, function mutator(...args) {
        const result = original.apply(this, args);
        const ob = this.__ob__;
        let inserted;
        switch (method) {
          case "push":
          case "unshift":
            inserted = args;
            break;
          case "splice":
            inserted = args.slice(2);
            break;
        }
        if (inserted) ob.observeArray(inserted);
        // notify change
        // 派发更新
        ob.dep.notify();
        return result;
      });
    });

##### def #####

> ❝
> 
> def 使对象可响应，在 `src/core/util/lang.js`
> 
> ❞

export function def(obj: Object, key: string, val: any, enumerable?: boolean) {
      Object.defineProperty(obj, key, {
        value: val,
        enumerable: !!enumerable,
        writable: true,
        configurable: true,
      });
    }

##### 小结 #####

> ❝
> 
> 1.  `Object.create(Array.prototype)` 复制 `Array` 原型链为新的对象；
> 2.  拦截了数组的 7 个方法的执行，并使其可响应，7 个方法分别为：`push`, `pop`, `shift`, `unshift`, `splice`, `sort`, `reverse`；
> 3.  当数组调用到这 7 个方法的时候，执行 `ob.dep.notify()` 进行派发通知 `Watcher` 更新；
> 
> ❞

##### 附加思考 #####

> ❝
> 
> 不过，vue 对数组的监听还是有限制的，如下：
> 
> 1.  数组通过索引改变值的时候监听不到，比如：`array[2] = newObj`
> 2.  数组长度变化无法监听
> 
> 这些操作都需要通过 `Vue.set/del` 去操作才行；
> 
> ❞

#### 7. `computed` 如何实现？ ####

##### initComputed #####

> ❝
> 
> 这个方法用于初始化 `options.computed` 对象, 这里还是上源码，在 `src/core/instance/state.js` 中，这个方法是在 `initState` 中调用的
> 
> ❞

const computedWatcherOptions = { lazy: true };
    
    function initComputed(vm: Component, computed: Object) {
      // $flow-disable-line
      // 创建一个空对象
      const watchers = (vm._computedWatchers = Object.create(null));
      // computed properties are just getters during SSR
      const isSSR = isServerRendering();
    
      for (const key in computed) {
        // 遍历拿到每个定义的 userDef
        const userDef = computed[key];
        const getter = typeof userDef === "function" ? userDef : userDef.get;
        // 没有 getter 则 warn
        if (process.env.NODE_ENV !== "production" && getter == null) {
          warn(`Getter is missing for computed property "${key}".`, vm);
        }
    
        if (!isSSR) {
          // 为每个 computed 属性创建 watcher
          // create internal watcher for the computed property.
          watchers[key] = new Watcher(
            vm,
            getter || noop,
            noop,
            computedWatcherOptions // {lazy: true}
          );
        }
    
        // component-defined computed properties are already defined on the
        // component prototype. We only need to define computed properties defined
        // at instantiation here.
        if (!(key in vm)) {
          // 定义 vm 中未定义的计算属性
          defineComputed(vm, key, userDef);
        } else if (process.env.NODE_ENV !== "production") {
          if (key in vm.$data) {
            // 判断 key 是不是在 data
            warn(`The computed property "${key}" is already defined in data.`, vm);
          } else if (vm.$options.props && key in vm.$options.props) {
            // 判断 key 是不是在 props 中
            warn(
              `The computed property "${key}" is already defined as a prop.`,
              vm
            );
          }
        }
      }
    }

##### defineComputed #####

> ❝
> 
> 这个方法用作定义 computed 中的属性，继续看代码：
> 
> ❞

export function defineComputed(
      target: any,
      key: string,
      userDef: Object | Function
    ) {
      const shouldCache = !isServerRendering();
      if (typeof userDef === "function") {
        sharedPropertyDefinition.get = shouldCache
          ? createComputedGetter(key)
          : createGetterInvoker(userDef);
        sharedPropertyDefinition.set = noop;
      } else {
        sharedPropertyDefinition.get = userDef.get
          ? shouldCache && userDef.cache !== false
            ? createComputedGetter(key)
            : createGetterInvoker(userDef.get)
          : noop;
        sharedPropertyDefinition.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
          );
        };
      }
      // 定义计算属性的 get / set
      Object.defineProperty(target, key, sharedPropertyDefinition);
    }
    
    // 返回计算属性对应的 getter
    function createComputedGetter(key) {
      return function computedGetter() {
        const watcher = this._computedWatchers && this._computedWatchers[key];
        if (watcher) {
          if (watcher.dirty) {
            // watcher 检查是 computed 属性的时候 会标记 dirty 为 true
            // 这里是 computed 的取值逻辑， 执行 evaluate 之后 则 dirty false，直至下次触发
            // 其实这里就可以说明 computed 属性其实是触发了 getter 属性之后才进行计算的，而触发的媒介便是 computed 引用的其他属性触发 getter，再触发 dep.update(), 继而 触发 watcher 的 update
            watcher.evaluate();
            // --------------------------- Watcher --------------------------------
            // 这里截取部分 Watcher 的定义
            // update 定义
            // update () {
            //   /* istanbul ignore else */
            //   if (this.lazy) {
            //     // 触发更新的时候标记计算属性
            //     this.dirty = true
            //   } else if (this.sync) {
            //     this.run()
            //   } else {
            //     queueWatcher(this)
            //   }
            // }
            // evaluate 定义
            // evaluate () {
            //   this.value = this.get()
            //   // 取值后标记 取消
            //   this.dirty = false
            // }
            // ------------------------- Watcher ----------------------------------
          }
          if (Dep.target) {
            // 收集依赖
            watcher.depend();
          }
          return watcher.value;
        }
      };
    }
    
    function createGetterInvoker(fn) {
      return function computedGetter() {
        return fn.call(this, this);
      };
    }

##### 小结 #####

> ❝
> 
> 综上代码分析过程，总结 computed 属性的实现过程如下（以下分析过程均忽略了 ssr 情况）：
> 
> 1.  `Object.create(null)` 创建一个空对象用作缓存 `computed` 属性的 `watchers`，并缓存在 `vm._computedWatchers` 中;
> 2.  遍历计算属性，拿到用户定义的 `userDef`，为每个属性定义 `Watcher`，标记 `Watcher` 属性 `lazy: true`;
> 3.  定义 `vm` 中未定义过的 `computed` 属性，`defineComputed(vm, key, userDef)`，已存在则判断是在 `data` 或者 `props` 中已定义并相应警告；
> 4.  接下来就是定义 `computed` 属性的 `getter` 和 `setter`，这里主要是看 `createComputedGetter` 里面的定义：当触发更新则检测 watcher 的 dirty 标记，则执行 `watcher.evaluate()` 方法执行计算，然后依赖收集；
> 5.  这里再追溯 `watcher.dirty` 属性逻辑，在 `watcher.update` 中 当遇到 computed 属性时候被标记为 `dirty:false`，这里其实可以看出 `computed` 属性的计算前提必须是引用的正常属性的更新触发了 `Dep.update()`，继而触发对应 `watcher.update` 进行标记 `dirty:true`，继而在计算属性 `getter` 的时候才会触发更新，否则不更新;
> 
> 以上便是计算属性的实现逻辑，部分代码逻辑需要追溯上面第三题响应式的部分 `Dep/Watcher` 的触发逻辑；
> 
> ❞

#### 8. `computed` 和 `watch` 的区别在哪里？ ####

##### `initWatch` #####

> ❝
> 
> 这里还是老样子，上代码，在 `src/core/instance/state.js` 中：
> 
> ❞

function initWatch(vm: Component, watch: Object) {
      // 遍历 watch 对象属性
      for (const key in watch) {
        const handler = watch[key];
        //  数组则进行遍历创建 watcher
        if (Array.isArray(handler)) {
          for (let i = 0; i < handler.length; i++) {
            createWatcher(vm, key, handler[i]);
          }
        } else {
          createWatcher(vm, key, handler);
        }
      }
    }
    
    // 创建 watcher 监听
    function createWatcher(
      vm: Component,
      expOrFn: string | Function,
      handler: any,
      options?: Object
    ) {
      if (isPlainObject(handler)) {
        options = handler;
        handler = handler.handler;
      }
      // handler 传入字符串，则直接从 vm 中获取函数方法
      if (typeof handler === "string") {
        handler = vm[handler];
      }
      // 创建 watcher 监听
      return vm.$watch(expOrFn, handler, options);
    }

##### `$watch` #####

> ❝
> 
> 我们还需要看一下 `$watch` 的逻辑，在 `src/core/instance/state.js` 中：
> 
> ❞

Vue.prototype.$watch = function (
      expOrFn: string | Function,
      cb: any,
      options?: Object
    ): Function {
        const vm: Component = this
        if (isPlainObject(cb)) {
          return createWatcher(vm, expOrFn, cb, options)
        }
        options = options || {}
        options.user = true
        // 创建 watch 属性的 Watcher 实例
        const watcher = new Watcher(vm, expOrFn, cb, options)
        if (options.immediate) {
          try {
            cb.call(vm, watcher.value)
          } catch (error) {
            handleError(error, vm, `callback for immediate watcher "${watcher.expression}"`)
          }
        }
    
        // 用作销毁
        return function unwatchFn () {
          // 移除 watcher 的依赖
          watcher.teardown()
        }
      }
    }

##### 小结 #####

> ❝
> 
> 综上代码分析，先看来看一下 `watch` 属性的实现逻辑：
> 
> 1.  遍历 `watch` 属性分别创建属性的 `Watcher` 监听，这里可以看出其实该属性并未被 `Dep` 收集依赖；
> 2.  可以分析 `watch` 监听的属性 必然是已经被 `Dep` 收集依赖的属性了（`data/props` 中的属性），进行对应属性触发更新的时候才会触发 `watch` 属性的监听回调;
> 
> 这里就可以分析 computed 与 watch 的异同：
> 
> 1.  `computed` 属性的更新需要依赖于其引用属性的更新触发标记 `dirty: true`，进而触发 `computed` 属性 `getter` 的时候才会触发其本身的更新，否则其不更新；
> 2.  `watch` 属性则是依赖于本身已被 `Dep` 收集依赖的部分属性，即作为 `data/props` 中的某个属性的尾随 `watcher`，在监听属性更新时触发 `watcher` 的回调；否则监听则无意义；
> 
> 这里再引申一下使用场景：
> 
> 1.  如果一个数据依赖于其他数据，那么就使用 `computed` 属性；
> 2.  如果你需要在某个数据变化时做一些事情，使用 `watch` 来观察这个数据变化；
> 
> ❞

#### 9. 计算属性和普通属性的区别？ ####

> ❝
> 
> 这个题目跟上题类似，区别如下：
> 
> 1.  普通属性都是基于 `getter` 和 `setter` 的正常取值和更新;
> 2.  `computed` 属性是依赖于内部引用普通属性的 `setter` 变更从而标记 `watcher` 中 `dirty` 标记为 `true`，此时才会触发更新;
> 
> ❞

#### 10. `v-if/v-show/v-html` 的原理是什么，它是如何封装的？ ####

##### v-if #####

> ❝
> 
> 先来看一下 `v-if` 的实现，首先 vue 编译 template 模板的时候会先生成 ast 静态语法树，然后进行标记静态节点，再之后生成对应的 render 函数，这里就直接看下 `genIf` 的代码，在`src/compiler/codegen/index.js`中：
> 
> ❞

export function genIf(
      el: any,
      state: CodegenState,
      altGen?: Function,
      altEmpty?: string
    ): string {
      el.ifProcessed = true; // 标记避免递归，标记已经处理过
      return genIfConditions(el.ifConditions.slice(), state, altGen, altEmpty);
    }
    
    function genIfConditions(
      conditions: ASTIfConditions,
      state: CodegenState,
      altGen?: Function,
      altEmpty?: string
    ): string {
      if (!conditions.length) {
        return altEmpty || "_e()";
      }
    
      const condition = conditions.shift();
      // 这里返回的是一个三元表达式
      if (condition.exp) {
        return `(${condition.exp})?${genTernaryExp(
          condition.block
        )}:${genIfConditions(conditions, state, altGen, altEmpty)}`;
      } else {
        return `${genTernaryExp(condition.block)}`;
      }
    
      // v-if with v-once should generate code like (a)?_m(0):_m(1)
      function genTernaryExp(el) {
        return altGen
          ? altGen(el, state)
          : el.once
          ? genOnce(el, state)
          : genElement(el, state);
      }
    }

> ❝
> 
> v-if 在 template 生成 ast 之后 genIf 返回三元表达式，在渲染的时候仅渲染表达式生效部分；
> 
> ❞

##### v-show #####

> ❝
> 
> 这里截取 v-show 指令的实现逻辑，在 `src/platforms/web/runtime/directives/show.js` 中：
> 
> ❞

export default {
      bind(el: any, { value }: VNodeDirective, vnode: VNodeWithData) {
        vnode = locateNode(vnode);
        const transition = vnode.data && vnode.data.transition;
        const originalDisplay = (el.__vOriginalDisplay =
          el.style.display === "none" ? "" : el.style.display);
        if (value && transition) {
          vnode.data.show = true;
          enter(vnode, () => {
            el.style.display = originalDisplay;
          });
        } else {
          el.style.display = value ? originalDisplay : "none";
        }
      },
    
      update(el: any, { value, oldValue }: VNodeDirective, vnode: VNodeWithData) {
        /* istanbul ignore if */
        if (!value === !oldValue) return;
        vnode = locateNode(vnode);
        const transition = vnode.data && vnode.data.transition;
        if (transition) {
          vnode.data.show = true;
          if (value) {
            enter(vnode, () => {
              el.style.display = el.__vOriginalDisplay;
            });
          } else {
            leave(vnode, () => {
              el.style.display = "none";
            });
          }
        } else {
          el.style.display = value ? el.__vOriginalDisplay : "none";
        }
      },
    
      unbind(
        el: any,
        binding: VNodeDirective,
        vnode: VNodeWithData,
        oldVnode: VNodeWithData,
        isDestroy: boolean
      ) {
        if (!isDestroy) {
          el.style.display = el.__vOriginalDisplay;
        }
      },
    };

> ❝
> 
> 这里其实比较明显了，`v-show` 根据表达式的值最终操作的是 `style.display`
> 
> ❞

##### v-html #####

> ❝
> 
> v-html 比较简单，最终操作的是 `innerHTML`，我们还是看代码，在 `src/platforms/compiler/directives/html.js` 中：
> 
> ❞

import { addProp } from "compiler/helpers";
    
    export default function html(el: ASTElement, dir: ASTDirective) {
      if (dir.value) {
        addProp(el, "innerHTML", `_s(${dir.value})`, dir);
      }
    }

##### 小结 #####

> ❝
> 
> 综上代码证明：
> 
> 1.  `v-if` 在 `template` 生成 `ast` 之后 `genIf` 返回三元表达式，在渲染的时候仅渲染表达式生效部分；
> 2.  `v-show` 根据表达式的值最终操作的是 `style.display`，并标记当前 `vnode.data.show` 属性;
> 3.  `v-html` 最终操作的是 `innerHTML`，将当前值 innerHTML 到当前标签;
> 
> ❞

#### 11. `v-for` 给每个元素绑定事件需要事件代理吗？ ####

> ❝
> 
> 首先，我们先来看一下 `v-for` 的实现，同上面 `v-if`，在模板渲染过程中由`genFor` 处理，在 `src/compiler/codegen/index.js` 中：
> 
> ❞

export function genFor(
      el: any,
      state: CodegenState,
      altGen?: Function,
      altHelper?: string
    ): string {
      const exp = el.for;
      const alias = el.alias;
      const iterator1 = el.iterator1 ? `,${el.iterator1}` : "";
      const iterator2 = el.iterator2 ? `,${el.iterator2}` : "";
    
      if (
        process.env.NODE_ENV !== "production" &&
        state.maybeComponent(el) &&
        el.tag !== "slot" &&
        el.tag !== "template" &&
        !el.key
      ) {
        state.warn(
          `<${el.tag} v-for="${alias} in ${exp}">: component lists rendered with ` +
            `v-for should have explicit keys. ` +
            `See https://vuejs.org/guide/list.html#key for more info.`,
          el.rawAttrsMap["v-for"],
          true /* tip */
        );
      }
    
      el.forProcessed = true; // 标记避免递归，标记已经处理过
      return (
        `${altHelper || "_l"}((${exp}),` +
        `function(${alias}${iterator1}${iterator2}){` +
        `return ${(altGen || genElement)(el, state)}` +
        "})"
      );
      // 伪代码解析后大致如下
      // _l(data, function (item, index) {
      //   return genElement(el, state);
      // });
    }

> ❝
> 
> 这里其实可以看出，genFor 最终返回了一串伪代码（见注释）最终每个循环返回 `genElement(el, state)`，其实这里可以大胆推测，`vue` 并没有单独在 `v-for` 对事件做委托处理，只是单独处理了每次循环的处理；  
> 可以确认的是，vue 在 v-for 中并没有处理事件委托，处于性能考虑，最好自己加上事件委托，这里有个帖子有分析对比，第 94 题：vue 在 v-for 时给每项元素绑定事件需要用事件代理吗？为什么？
> 
> ❞

#### 12. 你知道 `key` 的作⽤吗？ ####

> ❝
> 
> `key` 可预想的是 `vue` 拿来给 `vnode` 作唯一标识的，下面我们先来看下 key 到底被拿来做啥事，在 `src/core/vdom/patch.js` 中：
> 
> ❞

##### updateChildren #####

function updateChildren(
      parentElm,
      oldCh,
      newCh,
      insertedVnodeQueue,
      removeOnly
    ) {
      let oldStartIdx = 0;
      let newStartIdx = 0;
      let oldEndIdx = oldCh.length - 1;
      let oldStartVnode = oldCh[0];
      let oldEndVnode = oldCh[oldEndIdx];
      let newEndIdx = newCh.length - 1;
      let newStartVnode = newCh[0];
      let newEndVnode = newCh[newEndIdx];
      let oldKeyToIdx, idxInOld, vnodeToMove, refElm;
    
      // removeOnly is a special flag used only by <transition-group>
      // to ensure removed elements stay in correct relative positions
      // during leaving transitions
      const canMove = !removeOnly;
    
      if (process.env.NODE_ENV !== "production") {
        checkDuplicateKeys(newCh);
      }
    
      while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
        if (isUndef(oldStartVnode)) {
          oldStartVnode = oldCh[++oldStartIdx]; // Vnode has been moved left
        } else if (isUndef(oldEndVnode)) {
          oldEndVnode = oldCh[--oldEndIdx];
        } else if (sameVnode(oldStartVnode, newStartVnode)) {
          patchVnode(
            oldStartVnode,
            newStartVnode,
            insertedVnodeQueue,
            newCh,
            newStartIdx
          );
          oldStartVnode = oldCh[++oldStartIdx];
          newStartVnode = newCh[++newStartIdx];
        } else if (sameVnode(oldEndVnode, newEndVnode)) {
          patchVnode(
            oldEndVnode,
            newEndVnode,
            insertedVnodeQueue,
            newCh,
            newEndIdx
          );
          oldEndVnode = oldCh[--oldEndIdx];
          newEndVnode = newCh[--newEndIdx];
        } else if (sameVnode(oldStartVnode, newEndVnode)) {
          // Vnode moved right
          patchVnode(
            oldStartVnode,
            newEndVnode,
            insertedVnodeQueue,
            newCh,
            newEndIdx
          );
          canMove &&
            nodeOps.insertBefore(
              parentElm,
              oldStartVnode.elm,
              nodeOps.nextSibling(oldEndVnode.elm)
            );
          oldStartVnode = oldCh[++oldStartIdx];
          newEndVnode = newCh[--newEndIdx];
        } else if (sameVnode(oldEndVnode, newStartVnode)) {
          // Vnode moved left
          patchVnode(
            oldEndVnode,
            newStartVnode,
            insertedVnodeQueue,
            newCh,
            newStartIdx
          );
          canMove &&
            nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm);
          oldEndVnode = oldCh[--oldEndIdx];
          newStartVnode = newCh[++newStartIdx];
        } else {
          if (isUndef(oldKeyToIdx))
            oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);
          idxInOld = isDef(newStartVnode.key)
            ? oldKeyToIdx[newStartVnode.key]
            : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx);
          if (isUndef(idxInOld)) {
            // New element
            createElm(
              newStartVnode,
              insertedVnodeQueue,
              parentElm,
              oldStartVnode.elm,
              false,
              newCh,
              newStartIdx
            );
          } else {
            vnodeToMove = oldCh[idxInOld];
            if (sameVnode(vnodeToMove, newStartVnode)) {
              patchVnode(
                vnodeToMove,
                newStartVnode,
                insertedVnodeQueue,
                newCh,
                newStartIdx
              );
              oldCh[idxInOld] = undefined;
              canMove &&
                nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm);
            } else {
              // same key but different element. treat as new element
              createElm(
                newStartVnode,
                insertedVnodeQueue,
                parentElm,
                oldStartVnode.elm,
                false,
                newCh,
                newStartIdx
              );
            }
          }
          newStartVnode = newCh[++newStartIdx];
        }
      }
      if (oldStartIdx > oldEndIdx) {
        refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm;
        addVnodes(
          parentElm,
          refElm,
          newCh,
          newStartIdx,
          newEndIdx,
          insertedVnodeQueue
        );
      } else if (newStartIdx > newEndIdx) {
        removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);
      }
    }

> ❝
> 
> 这段代码是 vue diff 算法的核心代码了，用作比较同级节点是否相同，批量更新的，可谓是性能核心了，以上可以看下 `sameVnode` 比较节点被用了多次，下面我们来看下是怎么比较两个相同节点的
> 
> ❞

##### sameVnode #####

function sameVnode(a, b) {
      return (
        // 首先就是比较 key，key 相同是必要条件
        a.key === b.key &&
        ((a.tag === b.tag &&
          a.isComment === b.isComment &&
          isDef(a.data) === isDef(b.data) &&
          sameInputType(a, b)) ||
          (isTrue(a.isAsyncPlaceholder) &&
            a.asyncFactory === b.asyncFactory &&
            isUndef(b.asyncFactory.error)))
      );
    }

> ❝
> 
> 可以看到 key 是 diff 算法用来比较节点的必要条件，可想而知 key 的重要性；
> 
> ❞

##### 小结 #####

> ❝
> 
> 以上，我们了解到 key 的关键性，这里可以总结下：
> 
> key 在 diff 算法比较中用作比较两个节点是否相同的重要标识，相同则复用，不相同则删除旧的创建新的；
> 
> 1.  相同上下文的 key 最好是唯一的；
> 2.  别用 index 来作为 key，index 相对于列表元素来说是可变的，无法标记原有节点，比如我新增和插入一个元素，index 对于原来节点就发生了位移，就无法 diff 了；
> 
> ❞

#### 13. 说一下 `vue` 中所有带`$`的方法？ ####

##### 实例 property #####

*  `vm.$data`: Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象 property 的访问。
 *  `vm.$props`: 当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象 property 的访问。
 *  `vm.$el`: Vue 实例使用的根 DOM 元素。
 *  `vm.$options`: 用于当前 Vue 实例的初始化选项。
 *  `vm.$parent`: 父实例，如果当前实例有的话。
 *  `vm.$root`: 当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己。
 *  `vm.$children`: 当前实例的直接子组件。需要注意 `$children` 并不保证顺序，也不是响应式的。如果你发现自己正在尝试使用 `$children` 来进行数据绑定，考虑使用一个数组配合 `v-for` 来生成子组件，并且使用 `Array` 作为真正的来源。
 *  `vm.$slots`: 用来访问被插槽分发的内容。每个具名插槽有其相应的 property (例如：`v-slot:foo` 中的内容将会在 `vm.$slots.foo` 中被找到)。default property 包括了所有没有被包含在具名插槽中的节点，或 `v-slot:default` 的内容。
 *  `vm.$scopedSlots`: 用来访问作用域插槽。对于包括 默认 slot 在内的每一个插槽，该对象都包含一个返回相应 VNode 的函数。
 *  `vm.$refs`: 一个对象，持有注册过 ref attribute 的所有 DOM 元素和组件实例。
 *  `vm.$isServer`: 当前 Vue 实例是否运行于服务器。
 *  `vm.$attrs`: 包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 `v-bind="$attrs"` 传入内部组件——在创建高级别的组件时非常有用。
 *  `vm.$listeners`: 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 `v-on="$listeners"` 传入内部组件——在创建更高层次的组件时非常有用。

##### 实例方法 / 数据 #####

*  `vm.$watch( expOrFn, callback, [options] )`: 观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式，用一个函数取代。
 *  `vm.$set( target, propertyName/index, value )`: 这是全局 Vue.set 的别名。
 *  `vm.$delete( target, propertyName/index )`: 这是全局 Vue.delete 的别名。

##### 实例方法 / 事件 #####

*  `vm.$on( event, callback )`: 监听当前实例上的自定义事件。事件可以由 `vm.$emit` 触发。回调函数会接收所有传入事件触发函数的额外参数。
 *  `vm.$once( event, callback )`: 监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除。
 *  `vm.$off( [event, callback] )`: 移除自定义事件监听器。
 *   *  如果没有提供参数，则移除所有的事件监听器；
     *  如果只提供了事件，则移除该事件所有的监听器；
     *  如果同时提供了事件与回调，则只移除这个回调的监听器。
 *  `vm.$emit( eventName, […args] )`: 触发当前实例上的事件。附加参数都会传给监听器回调。

##### 实例方法 / 生命周期 #####

*  `vm.$mount( [elementOrSelector] )`
 *   *  如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 `vm.$mount()` 手动地挂载一个未挂载的实例。
     *  如果没有提供 elementOrSelector 参数，模板将被渲染为文档之外的的元素，并且你必须使用原生 DOM API 把它插入文档中。
     *  这个方法返回实例自身，因而可以链式调用其它实例方法。
 *  `vm.$forceUpdate()`: 迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
 *  `vm.$nextTick( [callback] )`: 将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。
 *  `vm.$destroy()`: 完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。
 *   *  触发 beforeDestroy 和 destroyed 的钩子。

#### 14. 你知道 `nextTick` 吗？ ####

> ❝
> 
> 直接上代码，在 `src/core/util/next-tick.js` 中：
> 
> ❞

import { noop } from "shared/util";
    import { handleError } from "./error";
    import { isIE, isIOS, isNative } from "./env";
    
    export let isUsingMicroTask = false;
    
    const callbacks = [];
    let pending = false;
    
    function flushCallbacks() {
      pending = false;
      const copies = callbacks.slice(0);
      callbacks.length = 0;
      for (let i = 0; i < copies.length; i++) {
        copies[i]();
      }
    }
    
    //这里我们使用微任务使用异步延迟包装器。
    //在2.5中，我们使用(宏)任务(与微任务结合使用)。
    //但是，当状态在重新绘制之前被更改时，它会有一些微妙的问题
    //(例如#6813，输出转换)。
    // 此外，在事件处理程序中使用(宏)任务会导致一些奇怪的行为
    //不能规避(例如#7109、#7153、#7546、#7834、#8109)。
    //因此，我们现在再次在任何地方使用微任务。
    //这种权衡的一个主要缺点是存在一些场景
    //微任务的优先级过高，并在两者之间被触发
    //顺序事件(例如#4521、#6690，它们有解决方案)
    //甚至在同一事件的冒泡(#6566)之间。
    let timerFunc;
    
    // nextTick行为利用了可以访问的微任务队列
    //通过任何一个原生承诺。然后或MutationObserver。
    // MutationObserver获得了更广泛的支持，但它受到了严重的干扰
    // UIWebView在iOS >= 9.3.3时触发的触摸事件处理程序。它
    //触发几次后完全停止工作…所以,如果本地
    // Promise可用，我们将使用:
    if (typeof Promise !== "undefined" && isNative(Promise)) {
      const p = Promise.resolve();
      timerFunc = () => {
        p.then(flushCallbacks);
    
        //在有问题的UIWebViews中，承诺。然后不完全打破，但是
        //它可能陷入一种奇怪的状态，即回调被推入
        // 但是队列不会被刷新，直到浏览器刷新
        //需要做一些其他的工作，例如处理定时器。因此,我们可以
        //通过添加空计时器来“强制”刷新微任务队列。
        if (isIOS) setTimeout(noop);
      };
      isUsingMicroTask = true;
    } else if (
      !isIE &&
      typeof MutationObserver !== "undefined" &&
      (isNative(MutationObserver) ||
        // PhantomJS and iOS 7.x
        MutationObserver.toString() === "[object MutationObserverConstructor]")
    ) {
      //在原生 Promise 不可用的情况下使用MutationObserver，
      //例如PhantomJS, iOS7, android4.4
      // (#6466 MutationObserver在IE11中不可靠)
      let counter = 1;
      const observer = new MutationObserver(flushCallbacks);
      const textNode = document.createTextNode(String(counter));
      observer.observe(textNode, {
        characterData: true,
      });
      timerFunc = () => {
        counter = (counter + 1) % 2;
        textNode.data = String(counter);
      };
      isUsingMicroTask = true;
    } else if (typeof setImmediate !== "undefined" && isNative(setImmediate)) {
      //退回到setimmediation。
      //技术上它利用了(宏)任务队列，
      //但它仍然是比setTimeout更好的选择。
      timerFunc = () => {
        setImmediate(flushCallbacks);
      };
    } else {
      // Fallback to setTimeout.
      timerFunc = () => {
        setTimeout(flushCallbacks, 0);
      };
    }
    
    export function nextTick(cb?: Function, ctx?: Object) {
      let _resolve;
      // 入队列
      callbacks.push(() => {
        if (cb) {
          try {
            cb.call(ctx);
          } catch (e) {
            handleError(e, ctx, "nextTick");
          }
        } else if (_resolve) {
          _resolve(ctx);
        }
      });
      if (!pending) {
        pending = true;
        timerFunc();
      }
    
      // 这是当 nextTick 不传 cb 参数的时候，提供一个 Promise 化的调用
      if (!cb && typeof Promise !== "undefined") {
        return new Promise((resolve) => {
          _resolve = resolve;
        });
      }
    }

##### 小结 #####

> ❝
> 
> 结合以上代码，总结如下：
> 
> 1.  回调函数先入队列，等待；
> 2.  执行 timerFunc，Promise 支持则使用 Promise 微队列形式，否则，再非 IE 情况下，若支持 MutationObserver，则使用 MutationObserver 同样以 微队列的形式，再不支持则使用 setImmediate，再不济就使用 setTimeout;
> 3.  执行 flushCallbacks，标记 pending 完成，然后先复制 callback，再清理 callback；
> 
> 以上便是 vue 异步队列的一个实现，主要是优先以（promise/MutationObserver）微任务的形式去实现（其次才是（setImmediate、setTimeout）宏任务去实现），等待当前宏任务完成后，便执行当下所有的微任务
> 
> ❞

#### 15. 子组件为什么不能修改父组件传递的 `props`，如果修改了，`vue` 是如何监听到并给出警告的？ ####

##### initProps #####

> ❝
> 
> 这里可以看一下 `initProps` 的实现逻辑，先看一下 props 的初始化流程：
> 
> ❞

function initProps(vm: Component, propsOptions: Object) {
      const propsData = vm.$options.propsData || {};
      const props = (vm._props = {});
      // cache prop keys so that future props updates can iterate using Array
      // instead of dynamic object key enumeration.
      const keys = (vm.$options._propKeys = []);
      const isRoot = !vm.$parent;
      // root instance props should be converted
      if (!isRoot) {
        toggleObserving(false);
      }
      // props 属性遍历监听
      for (const key in propsOptions) {
        keys.push(key);
        const value = validateProp(key, propsOptions, propsData, vm);
        /* istanbul ignore else */
        if (process.env.NODE_ENV !== "production") {
          const hyphenatedKey = hyphenate(key);
          if (
            isReservedAttribute(hyphenatedKey) ||
            config.isReservedAttr(hyphenatedKey)
          ) {
            warn(
              `"${hyphenatedKey}" is a reserved attribute and cannot be used as component prop.`,
              vm
            );
          }
          // props 数据绑定监听
          defineReactive(props, key, value, () => {
            // 开发环境下会提示 warn
            if (!isRoot && !isUpdatingChildComponent) {
              warn(
                `Avoid mutating a prop directly since the value will be ` +
                  `overwritten whenever the parent component re-renders. ` +
                  `Instead, use a data or computed property based on the prop's ` +
                  `value. Prop being mutated: "${key}"`,
                vm
              );
            }
          });
        } else {
          // props 数据绑定监听
          defineReactive(props, key, value);
        }
        // static props are already proxied on the component's prototype
        // during Vue.extend(). We only need to proxy props defined at
        // instantiation here.
        if (!(key in vm)) {
          proxy(vm, `_props`, key);
        }
      }
      toggleObserving(true);
    }

> ❝
> 
> 分析代码发现 props 单纯做了数据浅绑定监听，提示是在开发环境中做的校验
> 
> ❞

##### 小结 #####

> ❝
> 
> 如上可知，props 初始化时对 props 属性遍历 `defineReactive(props, key, value)` 做了数据浅绑定监听：
> 
> 1.  如果 value 为基本属性（开发环境中），当更改 props 的时候则会 warn，但是这里修改并不会改变父级的属性，因为这里的基础数据是值拷贝；
> 2.  如果 value 为对象或者数组时，则更改父级对象值的时候也会 warn（但是不会影响父级 props），但是当修改其 属性的时候则不会 warn，并且会直接修改父级的 props 对应属性值；
> 3.  注意这里父级的 props 在组件创建时是数据拷贝过来的；
> 
> 继续分析，如果 vue 允许子组件修改父组件的情况下，这里 props 将需要在父组件以及子组件中都进行数据绑定，这样讲导致多次监听，而且不利于维护，并且可想而知，容易逻辑交叉，不容易维护；  
> 所以 vue 在父子组件的数据中是以单向数据流来做的处理，这样父子的业务数据逻辑不易交叉，并且易于定位问题源头；
> 
> ❞

#### 16. 父组件和子组件生命周期钩子的顺序？ ####

##### 渲染过程 #####

> ❝
> 
> 从父到子，再由子到父；（由外到内再由内到外）
> 
> ❞

*  父 beforeCreate->父 created->父 beforeMount->子 beforeCreate->子 created->子 beforeMount->子 mounted->父 mounted

##### 子组件更新过程 #####

*  父 beforeUpdate->子 beforeUpdate->子 updated->父 updated

##### 父组件更新过程 #####

*  父 beforeUpdate->父 updated

##### 销毁过程 #####

*  父 beforeDestroy->子 beforeDestroy->子 destroyed->父 destroyed

#### 展望 ####

> ❝
> 
> 谢谢大家的阅读，希望对大家有所帮助，后续打算：
> 
> 1.  解读 vuex 源码常考题；
> 2.  解读 react-router 源码常考题；
> 3.  实现自己的 vue/vuex/react-router 系列；
> 
> 欢迎关注，敬请期待。
> 
> ❞