社招前端一面必会 vue 面试题

// 源码位置 src/core/global-api/extend.js
// enable recursive self-lookupif (name) {     Sub.options.components[name] = Sub // 记录自己 在组件中递归自己  -> jsx}

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

// 复用代码：它是一个配置对象，选项和组件里面一样const mymixin = {   methods: {      dosomething(){}   }}// 全局混入：将混入对象传入Vue.mixin(mymixin)
// 局部混入：做数组项设置到mixins选项，仅作用于当前组件const Comp = {   mixins: [mymixin]}

<div>  <slot>这个内容会被父组件传递的内容替换</slot></div>

<div>   <Child>来自父组件内容</Child></div>

// 扩展对象const myextends = {   methods: {      dosomething(){}   }}// 组件扩展：做数组项设置到extends选项，仅作用于当前组件// 跟混入的不同是它只能扩展单个对象// 另外如果和混入发生冲突，该选项优先级较高，优先起作用const Comp = {   extends: myextends}

// 复用逻辑1function useXX() {}// 复用逻辑2function useYY() {}// 逻辑组合const Comp = {   setup() {      const {xx} = useXX()      const {yy} = useYY()      return {xx, yy}   }}

import { defineAsyncComponent } from 'vue'// defineAsyncComponent定义异步组件，返回一个包装组件。包装组件根据加载器的状态决定渲染什么内容const AsyncComp = defineAsyncComponent(() => {  // 加载函数返回Promise  return new Promise((resolve, reject) => {    // ...可以从服务器加载组件    resolve(/* loaded component */)  })})// 借助打包工具实现ES模块动态导入const AsyncComp = defineAsyncComponent(() =>  import('./components/MyComponent.vue'))

<!-- 正常父传子 --><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>

Vue.component('functional',{ // 构造函数产生虚拟节点的    functional:true, // 函数式组件 // data={attrs:{}}    render(h){        return h('div','test')    }})const vm = new Vue({    el: '#app'})

// functional componentif (isTrue(Ctor.options.functional)) { // 带有functional的属性的就是函数式组件  return createFunctionalComponent(Ctor, propsData, data, context, children)}
// extract listeners, since these needs to be treated as// child component listeners instead of DOM listenersconst listeners = data.on // 处理事件// replace with listeners with .native modifier// so it gets processed during parent component patch.data.on = data.nativeOn // 处理原生事件
// install component management hooks onto the placeholder nodeinstallComponentHooks(data) // 安装组件相关钩子 （函数式组件没有调用此方法，从而性能高于普通组件）

let template = require('vue-template-compiler'); let r = template.compile(`<div v-html="'<span>hello</span>'"></div>`) 
// with(this){return _c('div',{domProps: {"innerHTML":_s('<span>hello</span>')}})} console.log(r.render);
// _c 定义在core/instance/render.js // _s 定义在core/instance/render-helpers/index,jsif (key === 'textContent' || key === 'innerHTML') {     if (vnode.children) vnode.children.length = 0     if (cur === oldProps[key]) continue // #6601 work around Chrome version <= 55 bug where single textNode // replaced by innerHTML/textContent retains its parentNode property     if (elm.childNodes.length === 1) {         elm.removeChild(elm.childNodes[0])     } }

[      { 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  }});

{    tag: 'div',                 /*说明这是一个div标签*/    children: [                 /*存放该标签的子节点*/        {            tag: 'a',           /*说明这是一个a标签*/            text: 'click me'    /*标签的内容*/        }    ]}

<div>    <a>click me</a></div>

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

<router-view v-slot="{ Component }">  <keep-alive>    <component :is="Component"></component>  </keep-alive></router-view>

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

activated(){    this.getData() // 获取数据},

export default function initExtend(Vue) {  let cid = 0; //组件的唯一标识  // 创建子类继承Vue父类 便于属性扩展  Vue.extend = function (extendOptions) {    // 创建子类的构造函数 并且调用初始化方法    const Sub = function VueComponent(options) {      this._init(options); //调用Vue初始化方法    };    Sub.cid = cid++;    Sub.prototype = Object.create(this.prototype); // 子类原型指向父类    Sub.prototype.constructor = Sub; //constructor指向自己    Sub.options = mergeOptions(this.options, extendOptions); //合并自己的options和父类的options    return Sub;  };}

<!-- 在双花括号中 -->{ message | capitalize }
<!-- 在 `v-bind` 中 --><div v-bind:id="rawId | formatId"></div>

filters: {  capitalize: function (value) {    if (!value) return ''    value = value.toString()    return value.charAt(0).toUpperCase() + value.slice(1)  }}

Vue.filter('capitalize', function (value) {  if (!value) return ''  value = value.toString()  return value.charAt(0).toUpperCase() + value.slice(1)})
new Vue({  // ...})

{ message | filterA | filterB }

{{ message | filterA('arg1', arg2) }}

<div id="app">  <p>{{ msg | msgFormat('疯狂','--')}}</p></div>
<script>    // 定义一个 Vue 全局的过滤器，名字叫做  msgFormat    Vue.filter('msgFormat', function(msg, arg, arg2) {        // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则        return msg.replace(/单纯/g, arg+arg2)    })</script>

Vue.filter('toThousandFilter', function (value) {  if (!value) return ''  value = value.toString()  return .replace(str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g, '$1,')})

{{ message | capitalize }}

_s(_f('filterFormat')(message))

// 变为this.$options.filters['filterFormat'](message) // message为参数

import { indentity,resolveAsset } from 'core/util/index' 
export function resolveFilter(id){  return resolveAsset(this.$options,'filters',id,true) || identity}

export function resolveAsset(options,type,id,warnMissing){ // 因为我们找的是过滤器，所以在 resolveFilter函数中调用时 type 的值直接给的 'filters',实际这个函数还可以拿到其他很多东西  if(typeof id !== 'string'){ // 判断传递的过滤器id 是不是字符串，不是则直接返回      return   }  const assets = options[type]  // 将我们注册的所有过滤器保存在变量中  // 接下来的逻辑便是判断id是否在assets中存在，即进行匹配  if(hasOwn(assets,id)) return assets[id] // 如找到，直接返回过滤器  // 没有找到，代码继续执行  const camelizedId  = camelize(id) // 万一你是驼峰的呢  if(hasOwn(assets,camelizedId)) return assets[camelizedId]  // 没找到，继续执行  const PascalCaseId = capitalize(camelizedId) // 万一你是首字母大写的驼峰呢  if(hasOwn(assets,PascalCaseId)) return assets[PascalCaseId]  // 如果还是没找到，则检查原型链(即访问属性)  const result = assets[id] || assets[camelizedId] || assets[PascalCaseId]  // 如果依然没找到，则在非生产环境的控制台打印警告  if(process.env.NODE_ENV !== 'production' && warnMissing && !result){    warn('Failed to resolve ' + type.slice(0,-1) + ': ' + id, options)  }  // 无论是否找到，都返回查找结果  return result}

function toString(value){  return value == null  ? ''  : typeof value === 'object'    ? JSON.stringify(value,null,2)// JSON.stringify()第三个参数可用来控制字符串里面的间距    : String(value)}

function parseFilters (filter) {    let filters = filter.split('|')    let expression = filters.shift().trim() // shift()删除数组第一个元素并将其返回，该方法会更改原数组    let i    if (filters) {        for(i = 0;i < filters.length;i++){            experssion = warpFilter(expression,filters[i].trim()) // 这里传进去的expression实际上是管道符号前面的字符串，即过滤器的第一个参数        }    }    return expression}// warpFilter函数实现function warpFilter(exp,filter){    // 首先判断过滤器是否有其他参数    const i = filter.indexof('(')    if(i<0){ // 不含其他参数，直接进行过滤器表达式字符串的拼接        return `_f("${filter}")(${exp})`    }else{        const name = filter.slice(0,i) // 过滤器名称        const args = filter.slice(i+1) // 参数，但还多了 ‘)’        return `_f('${name}')(${exp},${args}` // 注意这一步少给了一个 ')'    }}