社招前端经典 vue 面试题（附答案）

const store = createStore({  state () {    return {      count: localStorage.getItem('count')    }  }})

store.commit('increment')localStorage.setItem('count', store.state.count)

export function set (target: Array<any> | Object, key: any, val: any): any {  // target 为数组    if (Array.isArray(target) && isValidArrayIndex(key)) {    // 修改数组的长度, 避免索引>数组长度导致splcie()执行有误    target.length = Math.max(target.length, key)    // 利用数组的splice变异方法触发响应式      target.splice(key, 1, val)    return val  }  // key 已经存在，直接修改属性值    if (key in target && !(key in Object.prototype)) {    target[key] = val    return val  }  const ob = (target: any).__ob__  // target 本身就不是响应式数据, 直接赋值  if (!ob) {    target[key] = val    return val  }  // 对属性进行响应式处理  defineReactive(ob.value, key, val)  ob.dep.notify()  return val}

// 父组件<template>  <div id="father">    <son :msg="msgData" :fn="myFunction"></son>  </div></template>
<script>import son from "./son.vue";export default {  name: father,  data() {    msgData: "父组件数据";  },  methods: {    myFunction() {      console.log("vue");    },  },  components: { son },};</script>

// 子组件<template>  <div id="son">    <p>{{ msg }}</p>    <button @click="fn">按钮</button>  </div></template><script>export default { name: "son", props: ["msg", "fn"] };</script>

// 父组件<template>  <div class="section">    <com-article      :articles="articleList"      @onEmitIndex="onEmitIndex"    ></com-article>    <p>{{ currentIndex }}</p>  </div></template>
<script>import comArticle from "./test/article.vue";export default {  name: "comArticle",  components: { comArticle },  data() {    return { currentIndex: -1, articleList: ["红楼梦", "西游记", "三国演义"] };  },  methods: {    onEmitIndex(idx) {      this.currentIndex = idx;    },  },};</script>

//子组件<template>  <div>    <div      v-for="(item, index) in articles"      :key="index"      @click="emitIndex(index)"    >      {{ item }}    </div>  </div></template>
<script>export default {  props: ["articles"],  methods: {    emitIndex(index) {      this.$emit("onEmitIndex", index); // 触发父组件的方法，并传递参数index    },  },};</script>

// event-bus.js
import Vue from 'vue'export const EventBus = new Vue()

<template>  <div>    <first-com></first-com>    <second-com></second-com>  </div></template>
<script>import firstCom from "./firstCom.vue";import secondCom from "./secondCom.vue";export default { components: { firstCom, secondCom } };</script>

<template>  <div>    <button @click="add">加法</button>  </div></template>
<script>import { EventBus } from "./event-bus.js"; // 引入事件中心
export default {  data() {    return { num: 0 };  },  methods: {    add() {      EventBus.$emit("addition", { num: this.num++ });    },  },};</script>

<template>  <div>求和: {{ count }}</div></template>
<script>import { EventBus } from "./event-bus.js";export default {  data() {    return { count: 0 };  },  mounted() {    EventBus.$on("addition", (param) => {      this.count = this.count + param.num;    });  },};</script>

provide() {     return {             num: this.num      };}

inject: ['num']

provide() { return {    app: this  };}data() { return {    num: 1  };}
inject: ['app']console.log(this.app.num)

export default {  data () {    return {      name: 'JavaScript'    }  },  methods: {    sayHello () {      console.log('hello')    }  }}

<template>  <child ref="child"></component-a></template><script>import child from "./child.vue";export default {  components: { child },  mounted() {    console.log(this.$refs.child.name); // JavaScript    this.$refs.child.sayHello(); // hello  },};</script>

<template>  <div>    <span>{{ message }}</span>    <p>获取父组件的值为: {{ parentVal }}</p>  </div></template>
<script>export default {  data() {    return { message: "Vue" };  },  computed: {    parentVal() {      return this.$parent.msg;    },  },};</script>

// 父组件中<template>  <div class="hello_world">    <div>{{ msg }}</div>    <child></child>    <button @click="change">点击改变子组件值</button>  </div></template>
<script>import child from "./child.vue";export default {  components: { child },  data() {    return { msg: "Welcome" };  },  methods: {    change() {      // 获取到子组件      this.$children[0].message = "JavaScript";    },  },};</script>

<template>  <div id="app">    //此处监听了两个事件，可以在B组件或者C组件中直接触发    <child1      :p-child1="child1"      :p-child2="child2"      @test1="onTest1"      @test2="onTest2"    ></child1>  </div></template><script>import Child1 from "./Child1.vue";export default {  components: { Child1 },  methods: {    onTest1() {      console.log("test1 running");    },    onTest2() {      console.log("test2 running");    },  },};</script>

<template>  <div class="child-1">    <p>props: {{ pChild1 }}</p>    <p>$attrs: {{ $attrs }}</p>    <child2 v-bind="$attrs" v-on="$listeners"></child2>  </div></template><script>import Child2 from "./Child2.vue";export default {  props: ["pChild1"],  components: { Child2 },  inheritAttrs: false,  mounted() {    this.$emit("test1"); // 触发APP.vue中的test1方法  },};</script>

<template>  <div class="child-2">    <p>props: {{ pChild2 }}</p>    <p>$attrs: {{ $attrs }}</p>  </div></template><script>export default {  props: ["pChild2"],  inheritAttrs: false,  mounted() {    this.$emit("test2"); // 触发APP.vue中的test2方法  },};</script>

<script>    // Vue.options    Vue.mixin({ // 如果他是对象 每个组件都用mixin里的对象进行合并        data(){            return {a: 1,b: 2}        }    });    // Vue.extend    Vue.component('my',{ // 组件必须是函数 Vue.extend  => render(xxx)        data(){            return {x:1}        }    })     // 没有 new 没有实例  _init()    // const vm = this    new Vue({        el:'#app',        data(){ // 根可以不是函数             return {c:3}        }    })</script>

export default function initMixin(Vue){  Vue.mixin = function (mixin) {    //   合并对象      this.options=mergeOptions(this.options,mixin)  };}};
// src/util/index.js// 定义生命周期export const LIFECYCLE_HOOKS = [  "beforeCreate",  "created",  "beforeMount",  "mounted",  "beforeUpdate",  "updated",  "beforeDestroy",  "destroyed",];
// 合并策略const strats = {};// mixin核心方法export function mergeOptions(parent, child) {  const options = {};  // 遍历父亲  for (let k in parent) {    mergeFiled(k);  }  // 父亲没有 儿子有  for (let k in child) {    if (!parent.hasOwnProperty(k)) {      mergeFiled(k);    }  }
  //真正合并字段方法  function mergeFiled(k) {    // strats合并策略    if (strats[k]) {      options[k] = strats[k](parent[k], child[k]);    } else {      // 默认策略      options[k] = child[k] ? child[k] : parent[k];    }  }  return options;}

const vm = new Vue({    el: '#app',    data() {        return { a: 1 }    }}); 
// vm.$nextTick(() => {// [nextTick回调函数fn,内部更新flushSchedulerQueue]//     console.log(vm.$el.innerHTML)// })
// 是将内容维护到一个数组里，最终按照顺序顺序。 第一次会开启一个异步任务
vm.a = 'test'; // 修改了数据后并不会马上更新视图vm.$nextTick(() => {// [nextTick回调函数fn,内部更新flushSchedulerQueue]    console.log(vm.$el.innerHTML)})
// nextTick中的方法会被放到 更新页面watcher的后面去

// src/core/utils/nextTicklet 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();  }}

// src/core/observer/scheduler.js
export function queueWatcher (watcher: Watcher) {  const id = watcher.id  if (has[id] == null) {    has[id] = true    if (!flushing) {      queue.push(watcher)    } else {      // if already flushing, splice the watcher based on its id      // if already past its id, it will be run next immediately.      let i = queue.length - 1      while (i > index && queue[i].id > watcher.id) {        i--      }      queue.splice(i + 1, 0, watcher)    }    // queue the flush    if (!waiting) {      waiting = true
      if (process.env.NODE_ENV !== 'production' && !config.async) {        flushSchedulerQueue()        return      }      // 把更新方法放到数组中维护[nextTick回调函数,更新函数flushSchedulerQueue]      /**       * vm.a = 'test'; // 修改了数据后并不会马上更新视图        vm.$nextTick(() => {// [fn,更新]            console.log(vm.$el.innerHTML)        })       */      nextTick(flushSchedulerQueue)    }  }}

https://interview2.poetries.top#search

window.addEventListener("hashchange", funcRef, false);

window.history.pushState(null, null, path);window.history.replaceState(null, null, path);

[      { name: "张三", age: "20", address: "北京"},      { name: "李四", age: "21", address: "武汉"},      { name: "王五", age: "22", address: "杭州"},]

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>Document</title></head>
<body>  <div id="container"></div>  <button id="btn-change">改变</button>
  <script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.js"></script>  <script>    const data = [{        name: "张三",        age: "20",        address: "北京"      },      {        name: "李四",        age: "21",        address: "武汉"      },      {        name: "王五",        age: "22",        address: "杭州"      },    ];    //渲染函数    function render(data) {      const $container = $('#container');      $container.html('');      const $table = $('<table>');      // 重绘一次      $table.append($('<tr><td>name</td><td>age</td><td>address</td></tr>'));      data.forEach(item => {        //每次进入都重绘        $table.append($(`<tr><td>${item.name}</td><td>${item.age}</td><td>${item.address}</td></tr>`))      })      $container.append($table);    }
    $('#btn-change').click(function () {      data[1].age = 30;      data[2].address = '深圳';      render(data);    });  </script></body></html>

<ul id="list">    <li class="item">Item1</li>    <li class="item">Item2</li></ul>

{  tag: "ul",  attrs: {    id: "list"  },  children: [    {      tag: "li",      attrs: { className: "item" },      children: ["Item1"]    }, {      tag: "li",      attrs: { className: "item" },      children: ["Item2"]    }  ]} 

h('标签名', {属性}, [子元素])h('标签名', {属性}, [文本])patch(container, vnode) // container为容器DOM元素patch(vnode, newVnode)

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>Document</title></head><body>  <div id="container"></div>  <button id="btn-change">改变</button>  <script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom.js"></script>  <script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-class.js"></script>  <script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-props.js"></script>  <script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-style.js"></script>  <script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-eventlisteners.min.js"></script>  <script src="https://cdn.bootcss.com/snabbdom/0.7.3/h.js"></script>  <script>    let snabbdom = window.snabbdom;
    // 定义patch    let patch = snabbdom.init([      snabbdom_class,      snabbdom_props,      snabbdom_style,      snabbdom_eventlisteners    ]);
    //定义h    let h = snabbdom.h;
    const data = [{        name: "张三",        age: "20",        address: "北京"      },      {        name: "李四",        age: "21",        address: "武汉"      },      {        name: "王五",        age: "22",        address: "杭州"      },    ];    data.unshift({name: "姓名", age: "年龄", address: "地址"});
    let container = document.getElementById('container');    let vnode;    const render = (data) => {      let newVnode = h('table', {}, data.map(item => {         let tds = [];        for(let i in item) {          if(item.hasOwnProperty(i)) {            tds.push(h('td', {}, item[i] + ''));          }        }        return h('tr', {}, tds);      }));
      if(vnode) {          patch(vnode, newVnode);      } else {          patch(container, newVnode);      }      vnode = newVnode;    }
    render(data);
    let btnChnage = document.getElementById('btn-change');    btnChnage.addEventListener('click', function() {      data[1].age = 30;      data[2].address = "深圳";      //re-render      render(data);    })  </script></body></html>

const vm = new Vue({  el: '#app',  data: {    user: {name:'poetry'}  },  render(h){    // h()    // h(App)    // h('div',[])    let vnode = h('div',{},'hello world');    return vnode  }});

class Vue {    constructor(options) {      this.$options = options;      this.$data = options.data;  
    // 对data选项做响应式处理      observe(this.$data);  
    // 代理data到vm上      proxy(this);  
    // 执行编译      new Compile(options.el, this);    }  }  

function observe(obj) {    if (typeof obj !== "object" || obj == null) {      return;    }    new Observer(obj);  }  
class Observer {    constructor(value) {      this.value = value;      this.walk(value);    }    walk(obj) {      Object.keys(obj).forEach((key) => {        defineReactive(obj, key, obj[key]);      });    }  }  

class Compile {    constructor(el, vm) {      this.$vm = vm;      this.$el = document.querySelector(el);  // 获取dom      if (this.$el) {        this.compile(this.$el);      }    }    compile(el) {      const childNodes = el.childNodes;       Array.from(childNodes).forEach((node) => { // 遍历子元素        if (this.isElement(node)) {   // 判断是否为节点          console.log("编译元素" + node.nodeName);        } else if (this.isInterpolation(node)) {          console.log("编译插值⽂本" + node.textContent);  // 判断是否为插值文本 {{}}        }        if (node.childNodes && node.childNodes.length > 0) {  // 判断是否有子元素          this.compile(node);  // 对子元素进行递归遍历        }      });    }    isElement(node) {      return node.nodeType == 1;    }    isInterpolation(node) {      return node.nodeType == 3 && /\{\{(.*)\}\}/.test(node.textContent);    }  }  

// 负责更新视图  class Watcher {    constructor(vm, key, updater) {      this.vm = vm      this.key = key      this.updaterFn = updater  
    // 创建实例时，把当前实例指定到Dep.target静态属性上      Dep.target = this      // 读一下key，触发get      vm[key]      // 置空      Dep.target = null    }  
  // 未来执行dom更新函数，由dep调用的    update() {      this.updaterFn.call(this.vm, this.vm[this.key])    }  }  

class Dep {    constructor() {      this.deps = [];  // 依赖管理    }    addDep(dep) {      this.deps.push(dep);    }    notify() {       this.deps.forEach((dep) => dep.update());    }  } 

class Watcher {    constructor(vm, key, updateFn) {      Dep.target = this;      this.vm[this.key];      Dep.target = null;    }  }  

function defineReactive(obj, key, val) {    this.observe(val);    const dep = new Dep();    Object.defineProperty(obj, key, {      get() {        Dep.target && dep.addDep(Dep.target);// Dep.target也就是Watcher实例        return val;      },      set(newVal) {        if (newVal === val) return;        dep.notify(); // 通知dep执行更新方法      },    });  }  

<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)    }}