滴滴前端一面高频 vue 面试题及答案

<keep-alive>  <component :is="view"></component></keep-alive>

<keep-alive include="a,b">  <component :is="view"></component></keep-alive>
<!-- 正则表达式 (使用 `v-bind`) --><keep-alive :include="/a|b/">  <component :is="view"></component></keep-alive>
<!-- 数组 (使用 `v-bind`) --><keep-alive :include="['a', 'b']">  <component :is="view"></component></keep-alive>

{  path: 'list',  name: 'itemList', // 列表页  component (resolve) {    require(['@/pages/item/list'], resolve) }, meta: {  keepAlive: true,  title: '列表页' }}

<div id="app" class='wrapper'>    <keep-alive>        <!-- 需要缓存的视图组件 -->         <router-view v-if="$route.meta.keepAlive"></router-view>     </keep-alive>      <!-- 不需要缓存的视图组件 -->     <router-view v-if="!$route.meta.keepAlive"></router-view></div>

beforeRouteEnter(to, from, next){    next(vm=>{        console.log(vm)        // 每次进入路由执行        vm.getData()  // 获取数据    })},

// 注意：服务器端渲染期间avtived不被调用activated(){  this.getData() // 获取数据},

export default {  name: "keep-alive",  abstract: true, //抽象组件
  props: {    include: patternTypes, //要缓存的组件    exclude: patternTypes, //要排除的组件    max: [String, Number], //最大缓存数  },
  created() {    this.cache = Object.create(null); //缓存对象  {a:vNode,b:vNode}    this.keys = []; //缓存组件的key集合 [a,b]  },
  destroyed() {    for (const key in this.cache) {      pruneCacheEntry(this.cache, key, this.keys);    }  },
  mounted() {    //动态监听include  exclude    this.$watch("include", (val) => {      pruneCache(this, (name) => matches(val, name));    });    this.$watch("exclude", (val) => {      pruneCache(this, (name) => !matches(val, name));    });  },
  render() {    const slot = this.$slots.default; //获取包裹的插槽默认值 获取默认插槽中的第一个组件节点    const vnode: VNode = getFirstComponentChild(slot); //获取第一个子组件    // 获取该组件节点的componentOptions    const componentOptions: ?VNodeComponentOptions =      vnode && vnode.componentOptions;    if (componentOptions) {      // 获取该组件节点的名称，优先获取组件的name字段，如果name不存在则获取组件的tag      const name: ?string = getComponentName(componentOptions);      const { include, exclude } = this;      // 不走缓存 如果name不在inlcude中或者存在于exlude中则表示不缓存，直接返回vnode      if (        // not included  不包含        (include && (!name || !matches(include, name))) ||        // excluded  排除里面        (exclude && name && matches(exclude, name))      ) {        //返回虚拟节点        return vnode;      }
      const { cache, keys } = this;      // 获取组件的key值      const key: ?string =        vnode.key == null          ? // same constructor may get registered as different local components            // so cid alone is not enough (#3269)            componentOptions.Ctor.cid +            (componentOptions.tag ? `::${componentOptions.tag}` : "")          : vnode.key;      // 拿到key值后去this.cache对象中去寻找是否有该值，如果有则表示该组件有缓存，即命中缓存      if (cache[key]) {        //通过key 找到缓存 获取实例        vnode.componentInstance = cache[key].componentInstance;        // make current key freshest        remove(keys, key); //通过LRU算法把数组里面的key删掉        keys.push(key); //把它放在数组末尾      } else {        cache[key] = vnode; //没找到就换存下来        keys.push(key); //把它放在数组末尾        // prune oldest entry  //如果超过最大值就把数组第0项删掉        if (this.max && keys.length > parseInt(this.max)) {          pruneCacheEntry(cache, keys[0], keys, this._vnode);        }      }
      vnode.data.keepAlive = true; //标记虚拟节点已经被缓存    }    // 返回虚拟节点    return vnode || (slot && slot[0]);  },};

this.cache = {  'key1':'组件1',  'key2':'组件2',  // ...}

function pruneCacheEntry (  cache: VNodeCache,  key: string,  keys: Array<string>,  current?: VNode) {  const cached = cache[key]  /* 判断当前没有处于被渲染状态的组件，将其销毁*/  if (cached && (!current || cached.tag !== current.tag)) {    cached.componentInstance.$destroy()  }  cache[key] = null  remove(keys, key)}

mounted () {  this.$watch('include', val => {      pruneCache(this, name => matches(val, name))  })  this.$watch('exclude', val => {      pruneCache(this, name => !matches(val, name))  })}

function pruneCache (keepAliveInstance, filter) {  const { cache, keys, _vnode } = keepAliveInstance  for (const key in cache) {    const cachedNode = cache[key]    if (cachedNode) {      const name = getComponentName(cachedNode.componentOptions)      if (name && !filter(name)) {        pruneCacheEntry(cache, key, keys, _vnode)      }    }  }}

const key = vnode.key == null? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : ''): vnode.key

/* 如果命中缓存，则直接从缓存中拿 vnode 的组件实例 */if (cache[key]) {    vnode.componentInstance = cache[key].componentInstance    /* 调整该组件key的顺序，将其从原来的地方删掉并重新放在最后一个 */    remove(keys, key)    keys.push(key)} 

/* 如果没有命中缓存，则将其设置进缓存 */else {    cache[key] = vnode    keys.push(key)    /* 如果配置了max并且缓存的长度超过了this.max，则从缓存中删除第一个 */    if (this.max && keys.length > parseInt(this.max)) {        pruneCacheEntry(cache, keys[0], keys, this._vnode)    }}

// 缓存数组原型const arrayProto = Array.prototype;// 实现 arrayMethods.__proto__ === Array.prototypeexport const arrayMethods = Object.create(arrayProto);// 需要进行功能拓展的方法const methodsToPatch = [  "push",  "pop",  "shift",  "unshift",  "splice",  "sort",  "reverse"];
/** * Intercept mutating methods and emit events */methodsToPatch.forEach(function(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) {    // push、unshift会新增索引，所以要手动observer      case "push":      case "unshift":        inserted = args;        break;      // splice方法，如果传入了第三个参数，也会有索引加入，也要手动observer。      case "splice":        inserted = args.slice(2);        break;    }    //     if (inserted) ob.observeArray(inserted);// 获取插入的值，并设置响应式监听    // notify change    ob.dep.notify();// 通知依赖更新    // 返回原生数组方法的执行结果    return result;  });});

import { mutableHandlers } from "./baseHandlers"; // 代理相关逻辑import { isObject } from "./util"; // 工具方法
export function reactive(target) {  // 根据不同参数创建不同响应式对象  return createReactiveObject(target, mutableHandlers);}function createReactiveObject(target, baseHandler) {  if (!isObject(target)) {    return target;  }  const observed = new Proxy(target, baseHandler);  return observed;}
const get = createGetter();const set = createSetter();
function createGetter() {  return function get(target, key, receiver) {    // 对获取的值进行放射    const res = Reflect.get(target, key, receiver);    console.log("属性获取", key);    if (isObject(res)) {      // 如果获取的值是对象类型，则返回当前对象的代理对象      return reactive(res);    }    return res;  };}function createSetter() {  return function set(target, key, value, receiver) {    const oldValue = target[key];    const hadKey = hasOwn(target, key);    const result = Reflect.set(target, key, value, receiver);    if (!hadKey) {      console.log("属性新增", key, value);    } else if (hasChanged(value, oldValue)) {      console.log("属性值被修改", key, value);    }    return result;  };}export const mutableHandlers = {  get, // 当获取属性时调用此方法  set, // 当修改属性时调用此方法};

function createKeyToOldIdx(children, beginIdx, endIdx) {  let i, key;  const map = {};  for (i = beginIdx; i <= endIdx; ++i) {    key = children[i].key;    if (isDef(key)) map[key] = i;  }  return map;}

<keep-alive>    <router-view v-if="$route.meta.keepAlive"></router-view></kepp-alive>

{  path: '/',  name: 'xxx',  component: ()=>import('../src/views/xxx.vue'),  meta:{    keepAlive: true // 需要被缓存  }},

this.$nextTick(() => {    // 获取数据的操作...})

<input v-model="sth" />//  等同于<input     v-bind:value="message"     v-on:input="message=$event.target.value">//$event 指代当前触发的事件对象;//$event.target 指代当前触发的事件对象的dom;//$event.target.value 就是当前dom的value值;//在@input方法中，value => sth;//在:value中,sth => value;

<child :value="message"  @input="function(e){message = e}"></child>

// 父组件<aa-input v-model="aa"></aa-input>// 等价于<aa-input v-bind:value="aa" v-on:input="aa=$event.target.value"></aa-input>
// 子组件：<input v-bind:value="aa" v-on:input="onmessage"></aa-input>
props:{value:aa,}methods:{    onmessage(e){        $emit('input',e.target.value)    }}

第一步是将 模板字符串 转换成 element ASTs（解析器）第二步是对 AST 进行静态节点标记，主要用来做虚拟DOM的渲染优化（优化器）第三步是 使用 element ASTs 生成 render 函数代码字符串（代码生成器）

export function compileToFunctions(template) {  // 我们需要把html字符串变成render函数  // 1.把html代码转成ast语法树  ast用来描述代码本身形成树结构 不仅可以描述html 也能描述css以及js语法  // 很多库都运用到了ast 比如 webpack babel eslint等等  let ast = parse(template);  // 2.优化静态节点  // 这个有兴趣的可以去看源码  不影响核心功能就不实现了  //   if (options.optimize !== false) {  //     optimize(ast, options);  //   }
  // 3.通过ast 重新生成代码  // 我们最后生成的代码需要和render函数一样  // 类似_c('div',{id:"app"},_c('div',undefined,_v("hello"+_s(name)),_c('span',undefined,_v("world"))))  // _c代表创建元素 _v代表创建文本 _s代表文Json.stringify--把对象解析成文本  let code = generate(ast);  //   使用with语法改变作用域为this  之后调用render函数可以使用call改变this 方便code里面的变量取值  let renderFn = new Function(`with(this){return ${code}}`);  return renderFn;}

let callbacks = [];let pending = false;function flushCallbacks() {  pending = false; //把标志还原为false  // 依次执行回调  for (let i = 0; i < callbacks.length; i++) {    callbacks[i]();  }}let timerFunc; //定义异步方法  采用优雅降级if (typeof Promise !== "undefined") {  // 如果支持promise  const p = Promise.resolve();  timerFunc = () => {    p.then(flushCallbacks);  };} else if (typeof MutationObserver !== "undefined") {  // MutationObserver 主要是监听dom变化 也是一个异步方法  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);  };} else if (typeof setImmediate !== "undefined") {  // 如果前面都不支持 判断setImmediate  timerFunc = () => {    setImmediate(flushCallbacks);  };} else {  // 最后降级采用setTimeout  timerFunc = () => {    setTimeout(flushCallbacks, 0);  };}
export function nextTick(cb) {  // 除了渲染watcher  还有用户自己手动调用的nextTick 一起被收集到数组  callbacks.push(cb);  if (!pending) {    // 如果多次调用nextTick  只会执行一次异步 等异步队列清空之后再把标志变为false    pending = true;    timerFunc();  }}