前端 vue 面试题（持续更新中）

get () {     pushTarget(this) // 先将当前依赖放到 Dep.target上     let value     const vm = this.vm     try {         value = this.getter.call(vm, vm)     } catch (e) {         if (this.user) {             handleError(e, vm, `getter for watcher "${this.expression}"`)         } else {             throw e         }     } finally {         if (this.deep) { // 如果需要深度监控         traverse(value) // 会对对象中的每一项取值,取值时会执行对应的get方法     }popTarget() }

<app>    <div slot="a">xxxx</div>    <div slot="b">xxxx</div></app> 
slot name="a" slot name="b"

// 插槽
const VueTemplateCompiler = require('vue-template-compiler'); let ele = VueTemplateCompiler.compile(`     <my-component>         <div slot="header">node</div>         <div>react</div>         <div slot="footer">vue</div>     </my-component> `)
// with(this) { //     return _c('my-component', [_c('div', { //         attrs: { "slot": "header" },//         slot: "header" //     }, [_v("node")] // _文本及诶点 )//     , _v(" "), //     _c('div', [_v("react")]), _v(" "), _c('div', { //         attrs: { "slot": "footer" },//         slot: "footer" }, [_v("vue")])]) // }
const VueTemplateCompiler = require('vue-template-compiler');let ele = VueTemplateCompiler.compile(`     <div>        <slot name="header"></slot>         <slot name="footer"></slot>         <slot></slot>     </div> `);
with(this) {     return _c('div', [_v("node"), _v(" "), _t(_v("vue")])]), _v(" "), _t("default")], 2) }//  _t定义在 core/instance/render-helpers/index.js

// 作用域插槽:let ele = VueTemplateCompiler.compile(` <app>        <div slot-scope="msg" slot="footer">{{msg.a}}</div>     </app> `);
// with(this) { //     return _c('app', { scopedSlots: _u([{ //         // 作用域插槽的内容会被渲染成一个函数 //         key: "footer", //         fn: function (msg) { //             return _c('div', {}, [_v(_s(msg.a))]) } }]) //         })//     } // }
const VueTemplateCompiler = require('vue-template-compiler');VueTemplateCompiler.compile(` <div><slot name="footer" a="1" b="2"></slot> </div> `);
// with(this) { return _c('div', [_t("footer", null, { "a": "1", "b": "2" })], 2) }

<!-- 正常父传子 --><Son :a="num" :b="num2" />
<!-- 加上sync之后的父传子 --><Son :a.sync="num" :b.sync="num2" />
<!-- 它等价于 --><Son   :a="num"   :b="num2"   @update:a="val=>num=val"   @update:b="val=>num2=val" />
<!-- 相当于多了一个事件监听，事件名是update:a, --><!-- 回调函数中，会把接收到的值赋值给属性绑定的数据项中。 -->

<com1 v-model="num"></com1><!-- 等价于 --><com1 :value="num" @input="(val)=>num=val"></com1>

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执行更新方法      },    });  }  

<el-tabs>   <el-tab-pane label="⽤户管理" name="first">⽤户管理</el-tab-pane>     <el-tab-pane label="⻆⾊管理" name="third">⻆⾊管理</el-tab-pane></el-tabs>

// 前端组件名和组件映射表const map = {  //xx: require('@/views/xx.vue').default // 同步的⽅式  xx: () => import('@/views/xx.vue') // 异步的⽅式}// 服务端返回的asyncRoutesconst asyncRoutes = [  { path: '/xx', component: 'xx',... }]// 遍历asyncRoutes，将component替换为map[component]function mapComponent(asyncRoutes) {  asyncRoutes.forEach(route => {    route.component = map[route.component];    if(route.children) {      route.children.map(child => mapComponent(child))    }    })}mapComponent(asyncRoutes)

props: ['initialCounter'],data: function () {  return {    counter: this.initialCounter  }}

props: ['size'],computed: {  normalizedSize: function () {    return this.size.trim().toLowerCase()  }}

window.history.pushState(state,title,url)//state：需要保存的数据，这个数据在触发popstate事件时，可以在event.state里获取//title：标题，基本没用，一般传null//url：设定新的历史纪录的url。新的url与当前url的origin必须是一样的，否则会抛出错误。url可以时绝对路径，也可以是相对路径。//如 当前url是 https://www.baidu.com/a/,执行history.pushState(null, null, './qq/')，则变成 https://www.baidu.com/a/qq/，//执行history.pushState(null, null, '/qq/')，则变成 https://www.baidu.com/qq/
window.history.replaceState(state,title,url)//与pushState 基本相同，但她是修改当前历史纪录，而 pushState 是创建新的历史纪录

// https://github.com/vuejs/vue-next/blob/3cd30c5245da0733f9eb6f29d220f39c46518162/packages/runtime-dom/src/directives/vShow.tsexport const vShow: ObjectDirective<VShowElement> = {  beforeMount(el, { value }, { transition }) {    el._vod = el.style.display === 'none' ? '' : el.style.display    if (transition && value) {      transition.beforeEnter(el)    } else {      setDisplay(el, value)    }  },  mounted(el, { value }, { transition }) {    if (transition && value) {      transition.enter(el)    }  },  updated(el, { value, oldValue }, { transition }) {    // ...  },  beforeUnmount(el, { value }) {    setDisplay(el, value)  }}

// https://github.com/vuejs/vue-next/blob/cdc9f336fd/packages/compiler-core/src/transforms/vIf.tsexport const transformIf = createStructuralDirectiveTransform(  /^(if|else|else-if)$/,  (node, dir, context) => {    return processIf(node, dir, context, (ifNode, branch, isRoot) => {      // ...      return () => {        if (isRoot) {          ifNode.codegenNode = createCodegenNodeForBranch(            branch,            key,            context          ) as IfConditionalExpression        } else {          // attach this branch's codegen node to the v-if root.          const parentCondition = getParentCondition(ifNode.codegenNode!)          parentCondition.alternate = createCodegenNodeForBranch(            branch,            key + ifNode.branches.length - 1,            context          )        }      }    })  })

<div id="app">  <p v-if="isShow" v-for="item in items">    {{ item.title }}  </p></div>

const app = new Vue({  el: "#app",  data() {    return {      items: [        { title: "foo" },        { title: "baz" }]    }  },  computed: {    isShow() {      return this.items && this.items.length > 0    }  }})

ƒ anonymous() {  with (this) { return     _c('div', { attrs: { "id": "app" } },     _l((items), function (item)     { return (isShow) ? _c('p', [_v("\n" + _s(item.title) + "\n")]) : _e() }), 0) }}

<div id="app">  <template v-if="isShow">    <p v-for="item in items">{{item.title}}</p>  </template></div>

ƒ anonymous() {  with(this){return     _c('div',{attrs:{"id":"app"}},    [(isShow)?[_v("\n"),    _l((items),function(item){return _c('p',[_v(_s(item.title))])})]:_e()],2)}}

export function genElement (el: ASTElement, state: CodegenState): string {  if (el.parent) {    el.pre = el.pre || el.parent.pre  }  if (el.staticRoot && !el.staticProcessed) {    return genStatic(el, state)  } else if (el.once && !el.onceProcessed) {    return genOnce(el, state)  } else if (el.for && !el.forProcessed) {    return genFor(el, state)  } else if (el.if && !el.ifProcessed) {    return genIf(el, state)  } else if (el.tag === 'template' && !el.slotTarget && !state.pre) {    return genChildren(el, state) || 'void 0'  } else if (el.tag === 'slot') {    return genSlot(el, state)  } else {    // component or element    ...}

<template>  <li>    <div> {{ model.name }}</div>    <ul v-show="isOpen" v-if="isFolder">      <!-- 注意这里：组件递归渲染了它自己 -->      <TreeItem        class="item"        v-for="model in model.children"        :model="model">      </TreeItem>    </ul>  </li><script>export default {  name: 'TreeItem',  // ...}</script>

const _component_Comp = _resolveComponent("Comp", true)

export function resolveComponent(  name: string,  maybeSelfReference?: boolean): ConcreteComponent | string {  return resolveAsset(COMPONENTS, name, true, maybeSelfReference) || name}

if (!res && maybeSelfReference) {    // fallback to implicit self-reference    return Component}

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}

// 判断两个vnode的标签和key是否相同 如果相同 就可以认为是同一节点就地复用function isSameVnode(oldVnode, newVnode) {  return oldVnode.tag === newVnode.tag && oldVnode.key === newVnode.key;}
// 根据key来创建老的儿子的index映射表  类似 {'a':0,'b':1} 代表key为'a'的节点在第一个位置 key为'b'的节点在第二个位置function makeIndexByKey(children) {  let map = {};  children.forEach((item, index) => {    map[item.key] = index;  });  return map;}// 生成的映射表let map = makeIndexByKey(oldCh);

export function callHook(vm, hook) {  // 依次执行生命周期对应的方法  const handlers = vm.$options[hook];  if (handlers) {    for (let i = 0; i < handlers.length; i++) {      handlers[i].call(vm); //生命周期里面的this指向当前实例    }  }}
// 调用的时候Vue.prototype._init = function (options) {  const vm = this;  vm.$options = mergeOptions(vm.constructor.options, options);  callHook(vm, "beforeCreate"); //初始化数据之前  // 初始化状态  initState(vm);  callHook(vm, "created"); //初始化数据之后  if (vm.$options.el) {    vm.$mount(vm.$options.el);  }};