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

import List from '@/components/list.vue'const router = new VueRouter({  routes: [    { path: '/list', component: List }  ]})

const List = () => import('@/components/list.vue')const router = new VueRouter({  routes: [    { path: '/list', component: List }  ]})

const router = new Router({  routes: [   {     path: '/list',     component: resolve => require(['@/components/list'], resolve)   }  ]})

// r就是resolveconst List = r => require.ensure([], () => r(require('@/components/list')), 'list');// 路由也是正常的写法  这种是官方推荐的写的 按模块划分懒加载 const router = new Router({  routes: [  {    path: '/list',    component: List,    name: 'list'  } ]}))

<template>  <button @click="increment">    Count: {{ count }}  </button></template>
<script>// Composition API 将组件属性暴露为函数，因此第一步是导入所需的函数import { ref, computed, onMounted } from 'vue'
export default {  setup() {// 使用 ref 函数声明了称为 count 的响应属性，对应于Vue2中的data函数    const count = ref(0) // Vue2中需要在methods option中声明的函数，现在直接声明    function increment() {      count.value++    } // 对应于Vue2中的mounted声明周期    onMounted(() => console.log('component mounted!'))     return {      count,      increment    }  }}</script>

var a=[1,2,3,4]var b=[1,2,3,4]delete a[0]console.log(a)  //[empty,2,3,4]this.$delete(b,0)console.log(b)  //[2,3,4]

<template id="element-details-template">  <slot name="element-name">Slot template</slot></template><element-details>  <span slot="element-name">1</span></element-details><element-details>  <span slot="element-name">2</span></element-details>

customElements.define('element-details',  class extends HTMLElement {    constructor() {      super();      const template = document        .getElementById('element-details-template')        .content;      const shadowRoot = this.attachShadow({mode: 'open'})        .appendChild(template.cloneNode(true));  }})

class Store {    constructor(options) {        this.state = reactive(options.state)        this.options = options    }    commit(type, payload) {        this.options.mutations[type].call(this, this.state, payload)    }}

/** * 1 实现插件，挂载$store * 2 实现store */
let Vue;
class Store {  constructor(options) {    // state响应式处理    // 外部访问： this.$store.state.***    // 第一种写法    // this.state = new Vue({    //   data: options.state    // })
    // 第二种写法：防止外界直接接触内部vue实例，防止外部强行变更    this._vm = new Vue({      data: {        $$state: options.state      }    })
    this._mutations = options.mutations    this._actions = options.actions    this.getters = {}    options.getters && this.handleGetters(options.getters)
    this.commit = this.commit.bind(this)    this.dispatch = this.dispatch.bind(this)  }
  get state () {    return this._vm._data.$$state  }
  set state (val) {    return new Error('Please use replaceState to reset state')  }
  handleGetters (getters) {    Object.keys(getters).map(key => {      Object.defineProperty(this.getters, key, {        get: () => getters[key](this.state)      })    })  }
  commit (type, payload) {    let entry = this._mutations[type]    if (!entry) {      return new Error(`${type} is not defined`)    }
    entry(this.state, payload)  }
  dispatch (type, payload) {    let entry = this._actions[type]    if (!entry) {      return new Error(`${type} is not defined`)    }
    entry(this, payload)  }}
const install = (_Vue) => {  Vue = _Vue
  Vue.mixin({    beforeCreate () {      if (this.$options.store) {        Vue.prototype.$store = this.$options.store      }    },  })}

export default { Store, install }

import Vue from 'vue'import Vuex from './vuex'// this.$storeVue.use(Vuex)
export default new Vuex.Store({  state: {    counter: 0  },  mutations: {    // state从哪里来的    add (state) {      state.counter++    }  },  getters: {    doubleCounter (state) {      return state.counter * 2    }  },  actions: {    add ({ commit }) {      setTimeout(() => {        commit('add')      }, 1000)    }  },  modules: {  }})

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

<input v-model="sth" /><!-- 等同于 --><input :value="sth" @input="sth = $event.target.value" />

//Parent<template>  {{num}}  <Child v-model="num"></template>export default {  data(){    return {      num: 0    }  }}
//Child<template>  <div @click="add">Add</div></template>export default {  props: ['value'], // 属性必须为value  methods:{    add(){      // 方法名为input      this.$emit('input', this.value + 1)    }  }}

const VueTemplateCompiler = require('vue-template-compiler'); const ele = VueTemplateCompiler.compile('<el-checkbox v-model="check"></el- checkbox>'); 
// 观察输出的渲染函数：// with(this) { //     return _c('el-checkbox', { //         model: { //             value: (check), //             callback: function ($$v) { check = $$v }, //             expression: "check" //         } //     }) // }

// 源码位置 core/vdom/create-component.js line:155
function transformModel (options, data: any) {     const prop = (options.model && options.model.prop) || 'value'     const event = (options.model && options.model.event) || 'input'     ;(data.attrs || (data.attrs = {}))[prop] = data.model.value     const on = data.on || (data.on = {})     const existing = on[event]     const callback = data.model.callback     if (isDef(existing)) {         if (Array.isArray(existing) ? existing.indexOf(callback) === -1 : existing !== callback ) {            on[event] = [callback].concat(existing)         }     } else {         on[event] = callback     } }

const VueTemplateCompiler = require('vue-template-compiler'); const ele = VueTemplateCompiler.compile('<input v-model="value"/>');
// with(this) { //     return _c('input', { //         directives: [{ name: "model", rawName: "v-model", value: (value), expression: "value" }], //         domProps: { "value": (value) },//         on: {"input": function ($event) { //             if ($event.target.composing) return;//             value = $event.target.value//         }//         }//     })// }

if (el.component) {     genComponentModel(el, value, modifiers) // component v-model doesn't need extra runtime     return false } else if (tag === 'select') {     genSelect(el, value, modifiers) } else if (tag === 'input' && type === 'checkbox') {     genCheckboxModel(el, value, modifiers) } else if (tag === 'input' && type === 'radio') {     genRadioModel(el, value, modifiers) } else if (tag === 'input' || tag === 'textarea') {     genDefaultModel(el, value, modifiers) } else if (!config.isReservedTag(tag)) {     genComponentModel(el, value, modifiers) // component v-model doesn't need extra runtime     return false }

inserted (el, binding, vnode, oldVnode) {     if (vnode.tag === 'select') { // #6903     if (oldVnode.elm && !oldVnode.elm._vOptions) {         mergeVNodeHook(vnode, 'postpatch', () => {             directive.componentUpdated(el, binding, vnode)         })     } else {         setSelected(el, binding, vnode.context)     }    el._vOptions = [].map.call(el.options, getValue)     } else if (vnode.tag === 'textarea' || isTextInputType(el.type)) {         el._vModifiers = binding.modifiers         if (!binding.modifiers.lazy) {             el.addEventListener('compositionstart', onCompositionStart)             el.addEventListener('compositionend', onCompositionEnd)             // Safari < 10.2 & UIWebView doesn't fire compositionend when             // switching focus before confirming composition choice             // this also fixes the issue where some browsers e.g. iOS Chrome            // fires "change" instead of "input" on autocomplete.             el.addEventListener('change', onCompositionEnd) /* istanbul ignore if */             if (isIE9) {                 el.vmodel = true             }        }    }}

const props = defineProps(['foo'])// ❌ 下面行为会被警告, props是只读的!props.foo = 'bar'

const props = defineProps(['initialCounter'])const counter = ref(props.initialCounter)

const props = defineProps(['size'])// prop变化，计算属性自动更新const normalizedSize = computed(() => props.size.trim().toLowerCase())

<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() // 获取数据},

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

<template>  <child :msg="message"></child></template>
<script>import child from './child.vue';export default {  components: {    child  },  data () {    return {      message: 'father message';    }  }}</script>

<template>    <div>{{msg}}</div></template>
<script>export default {  props: {    msg: {      type: String,      required: true    }  }}</script>

// 父组件Parent.vue：<Child :changeMsgFn="changeMessage">methods: {    changeMessage(){        this.message = 'test'    }}

// 子组件Child.vue：<button @click="changeMsgFn">props:['changeMsgFn']

<template>    <child @msgFunc="func"></child></template>
<script>import child from './child.vue';export default {    components: {        child    },    methods: {        func (msg) {            console.log(msg);        }    }}</script>

<template>    <button @click="handleClick">点我</button></template>
<script>export default {    props: {        msg: {            type: String,            required: true        }    },    methods () {        handleClick () {          //........          this.$emit('msgFunc');        }    }}</script>

export default {  data() {    return {      title: '我是父组件',      name: 'poetry'    }  },  methods: {    say() {      alert(1)    }  },  // provide属性 能够为后面的后代组件/嵌套的组件提供所需要的变量和方法  provide() {    return {      message: '我是祖先组件提供的数据',      name: this.name, // 传递属性      say: this.say    }  }}

<template>  <p>曾孙组件</p>  <p>{{message}}</p></template><script>export default {  // inject 注入/接收祖先组件传递的所需要的数据即可   //接收到的数据 变量 跟data里面的变量一样 可以直接绑定到页面 {{}}  inject: [ "message","say"],  mounted() {    this.say();  },};</script>

<!-- parent.vue --><template><div>  <child1></child1>     <child2></child2>   <button @click="clickChild">$children方式获取子组件值</button></div></template><script>import child1 from './child1'import child2 from './child2'export default {  data(){    return {      total: 108    }  },  components: {    child1,    child2    },  methods: {    funa(e){      console.log("index",e)    },    clickChild(){      console.log(this.$children[0].msg);      console.log(this.$children[1].msg);    }  }}</script>

<!-- child1.vue --><template>  <div>    <button @click="parentClick">点击访问父组件</button>  </div></template><script>export default {  data(){    return {      msg:"child1"    }  },  methods: {    // 访问父组件数据    parentClick(){      this.$parent.funa("xx")      console.log(this.$parent.total);    }  }}</script>

<!-- child2.vue --><template>  <div>    child2  </div></template><script>export default {  data(){    return {     msg: 'child2'    }  }}</script>

// 父组件Parent.vue：<Child :name="name" :age="age"/>
// 子组件Child.vue：<GrandChild v-bind="$attrs" />
// 孙子组件GrandChild<p>姓名：{{$attrs.name}}</p><p>年龄：{{$attrs.age}}</p>

// 父组件Parent.vue：<Child :name="name" :age="age" @changeNameFn="changeName"/>
// 子组件Child.vue：<button @click="$listeners.changeNameFn"></button>

// 父组件Parent.vue：<Child ref="childComp"/><button @click="changeName"></button>changeName(){    console.log(this.$refs.childComp.age);    this.$refs.childComp.changeAge()}
// 子组件Child.vue：data(){    return{        age:20    }},methods(){    changeAge(){        this.age=15  }}

// Bus.js
// 创建一个中央时间总线类  class Bus {    constructor() {      this.callbacks = {};   // 存放事件的名字    }    $on(name, fn) {      this.callbacks[name] = this.callbacks[name] || [];      this.callbacks[name].push(fn);    }    $emit(name, args) {      if (this.callbacks[name]) {        this.callbacks[name].forEach((cb) => cb(args));      }    }  }  
// main.js  Vue.prototype.$bus = new Bus() // 将$bus挂载到vue实例的原型上  // 另一种方式  Vue.prototype.$bus = new Vue() // Vue已经实现了Bus的功能  

<template>    <button @click="toBus">子组件传给兄弟组件</button></template>
<script>export default{    methods: {    toBus () {      this.$bus.$emit('foo', '来自兄弟组件')    }  }}</script>

export default {  data() {    return {      message: ''    }  },  mounted() {    this.$bus.$on('foo', (msg) => {      this.message = msg    })  }}

var vm = new Vue({  el: "#app",  data() {    return {      rootInfo:"我是根元素的属性"    }  },  methods: {    alerts() {      alert(111)    }  },  components: {    com1: {      data() {        return {          info: "组件1"        }      },      template: "<p>{{ info }} <com2></com2></p>",      components: {        com2: {          template: "<p>我是组件1的子组件</p>",          created() {            this.$root.alerts()// 根组件方法            console.log(this.$root.rootInfo)// 我是根元素的属性          }        }      }    }  }});

// source.vue被vue-loader处理之后返回的代码​// import the <template> blockimport render from 'source.vue?vue&type=template'// import the <script> blockimport script from 'source.vue?vue&type=script'export * from 'source.vue?vue&type=script'// import <style> blocksimport 'source.vue?vue&type=style&index=1'​script.render = renderexport default script

import script from 'source.vue?vue&type=script

import script from 'babel-loader!vue-loader!source.vue?vue&type=script'

<style scoped lang="scss">

import 'source.vue?vue&type=style&index=1&scoped&lang=scss'

import 'style-loader!css-loader!sass-loader!vue-loader!source.vue?vue&type=style&index=1&scoped&lang=scss'

// <template lang="pug">import 'vue-loader/template-loader!pug-loader!source.vue?vue&type=template'​// <style scoped lang="scss">import 'style-loader!vue-loader/style-post-loader!css-loader!sass-loader!vue-loader!source.vue?vue&type=style&index=1&scoped&lang=scss'

<template><div>  请输入firstName：  <input type="text" v-model="firstName"></div><div>  请输入lastName：  <input type="text" v-model="lastName"></div><div>  请输入obj.text：  <input type="text" v-model="obj.text"></div> <div> 【obj.text】 {{obj.text}} </div></template>
<script>import {ref, reactive, watch, watchEffect} from 'vue'export default {  name: "HelloWorld",  props: {    msg: String,  },  setup(props,content){    let firstName = ref('')    let lastName = ref('')    let obj= reactive({      text:'hello'    })    watchEffect(()=>{      console.log('触发了watchEffect');      console.log(`组合后的名称为：${firstName.value}${lastName.value}`)    })    return{      obj,      firstName,      lastName    }  }};</script>

watchEffect(()=>{  console.log('触发了watchEffect');  // 这里我们不使用firstName.value/lastName.value ，相当于是监控整个ref,对应第四点上面的结论  console.log(`组合后的名称为：${firstName}${lastName}`)})

watchEffect(()=>{  console.log('触发了watchEffect');  console.log(obj);})

let obj = reactive({  text:'hello'})watchEffect(()=>{  console.log('触发了watchEffect');  console.log(obj.text);})

let obj= reactive({  text:'hello'})// watch是惰性执行， 默认初始化之后不会执行，只有值有变化才会触发，可通过配置参数实现默认执行watch(obj, (newValue, oldValue) => {  // 回调函数  console.log('触发监控更新了new',  newValue);  console.log('触发监控更新了old',  oldValue);},{  // 配置immediate参数，立即执行，以及深层次监听  immediate: true,  deep: true})

const count = ref(0)​watchEffect(() => console.log(count.value))// -> logs 0​count.value++// -> logs 1

const state = reactive({ count: 0 })watch(  () => state.count,  (count, prevCount) => {    /* ... */  })

export function watchEffect(  effect: WatchEffect,  options?: WatchOptionsBase): WatchStopHandle {  return doWatch(effect, null, options)}

export function watch<T = any, Immediate extends Readonly<boolean> = false>(  source: T | WatchSource<T>,  cb: any,  options?: WatchOptions<Immediate>): WatchStopHandle {  return doWatch(source as any, cb, options)}

axios.interceptors.request.use(config => {    config.headers['token'] = cookie.get('token')    return config})axios.interceptors.response.use(res=>{},{response}=>{    if (response.data.code === 40099 || response.data.code === 40098) { //token过期或者错误        router.push('/login')    }})

const routerMap = [  {    path: '/permission',    component: Layout,    redirect: '/permission/index',    alwaysShow: true, // will always show the root menu    meta: {      title: 'permission',      icon: 'lock',      roles: ['admin', 'editor'] // you can set roles in root nav    },    children: [{      path: 'page',      component: () => import('@/views/permission/page'),      name: 'pagePermission',      meta: {        title: 'pagePermission',        roles: ['admin'] // or you can only set roles in sub nav      }    }, {      path: 'directive',      component: () => import('@/views/permission/directive'),      name: 'directivePermission',      meta: {        title: 'directivePermission'        // if do not set roles, means: this page does not require permission      }    }]  }]

import router from './router'import store from './store'import { Message } from 'element-ui'import NProgress from 'nprogress' // progress barimport 'nprogress/nprogress.css'// progress bar styleimport { getToken } from '@/utils/auth' // getToken from cookie
NProgress.configure({ showSpinner: false })// NProgress Configuration
// permission judge functionfunction hasPermission(roles, permissionRoles) {  if (roles.indexOf('admin') >= 0) return true // admin permission passed directly  if (!permissionRoles) return true  return roles.some(role => permissionRoles.indexOf(role) >= 0)}
const whiteList = ['/login', '/authredirect']// no redirect whitelist
router.beforeEach((to, from, next) => {  NProgress.start() // start progress bar  if (getToken()) { // determine if there has token    /* has token*/    if (to.path === '/login') {      next({ path: '/' })      NProgress.done() // if current page is dashboard will not trigger    afterEach hook, so manually handle it    } else {      if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息        store.dispatch('GetUserInfo').then(res => { // 拉取user_info          const roles = res.data.roles // note: roles must be a array! such as: ['editor','develop']          store.dispatch('GenerateRoutes', { roles }).then(() => { // 根据roles权限生成可访问的路由表            router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record          })        }).catch((err) => {          store.dispatch('FedLogOut').then(() => {            Message.error(err || 'Verification failed, please login again')            next({ path: '/' })          })        })      } else {        // 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓        if (hasPermission(store.getters.roles, to.meta.roles)) {          next()//        } else {          next({ path: '/401', replace: true, query: { noGoBack: true }})        }        // 可删 ↑      }    }  } else {    /* has no token*/    if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入      next()    } else {      next('/login') // 否则全部重定向到登录页      NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it    }  }})
router.afterEach(() => {  NProgress.done() // finish progress bar})

{    name: "login",    path: "/login",    component: () => import("@/pages/Login.vue")}

function hasPermission(router, accessMenu) {  if (whiteList.indexOf(router.path) !== -1) {    return true;  }  let menu = Util.getMenuByName(router.name, accessMenu);  if (menu.name) {    return true;  }  return false;
}
Router.beforeEach(async (to, from, next) => {  if (getToken()) {    let userInfo = store.state.user.userInfo;    if (!userInfo.name) {      try {        await store.dispatch("GetUserInfo")        await store.dispatch('updateAccessMenu')        if (to.path === '/login') {          next({ name: 'home_index' })        } else {          //Util.toDefaultPage([...routers], to.name, router, next);          next({ ...to, replace: true })//菜单权限更新完成,重新进一次当前路由        }      }        catch (e) {        if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入          next()        } else {          next('/login')        }      }    } else {      if (to.path === '/login') {        next({ name: 'home_index' })      } else {        if (hasPermission(to, store.getters.accessMenu)) {          Util.toDefaultPage(store.getters.accessMenu,to, routes, next);        } else {          next({ path: '/403',replace:true })        }      }    }  } else {    if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入      next()    } else {      next('/login')    }  }  let menu = Util.getMenuByName(to.name, store.getters.accessMenu);  Util.title(menu.title);});
Router.afterEach((to) => {  window.scrollTo(0, 0);});

const Home = () => import("../pages/Home.vue");const UserInfo = () => import("../pages/UserInfo.vue");export default {    home: Home,    userInfo: UserInfo};

[    {        name: "home",        path: "/",        component: "home"    },    {        name: "home",        path: "/userinfo",        component: "userInfo"    }]

{    path: '/permission',    component: Layout,    name: '权限测试',    meta: {        btnPermissions: ['admin', 'supper', 'normal']    },    //页面需要的权限    children: [{        path: 'supper',        component: _import('system/supper'),        name: '权限测试页',        meta: {            btnPermissions: ['admin', 'supper']        } //页面需要的权限    },    {        path: 'normal',        component: _import('system/normal'),        name: '权限测试页',        meta: {            btnPermissions: ['admin']        } //页面需要的权限    }]}

import Vue from 'vue'/**权限指令**/const has = Vue.directive('has', {    bind: function (el, binding, vnode) {        // 获取页面按钮权限        let btnPermissionsArr = [];        if(binding.value){            // 如果指令传值，获取指令参数，根据指令参数和当前登录人按钮权限做比较。            btnPermissionsArr = Array.of(binding.value);        }else{            // 否则获取路由中的参数，根据路由的btnPermissionsArr和当前登录人按钮权限做比较。            btnPermissionsArr = vnode.context.$route.meta.btnPermissions;        }        if (!Vue.prototype.$_has(btnPermissionsArr)) {            el.parentNode.removeChild(el);        }    }});// 权限检查方法Vue.prototype.$_has = function (value) {    let isExist = false;    // 获取用户按钮权限    let btnPermissionsStr = sessionStorage.getItem("btnPermissions");    if (btnPermissionsStr == undefined || btnPermissionsStr == null) {        return false;    }    if (value.indexOf(btnPermissionsStr) > -1) {        isExist = true;    }    return isExist;};export {has}

<el-button @click='editClick' type="primary" v-has>编辑</el-button>

// 方案一：document.addEventListener('DOMContentLoaded', (event) => {    console.log('first contentful painting');});// 方案二：performance.getEntriesByName("first-contentful-paint")[0].startTime
// performance.getEntriesByName("first-contentful-paint")[0]// 会返回一个 PerformancePaintTiming的实例，结构如下：{  name: "first-contentful-paint",  entryType: "paint",  startTime: 507.80000002123415,  duration: 0,};

routes:[     path: 'Blogs',    name: 'ShowBlogs',    component: () => import('./components/ShowBlogs.vue')]

import ElementUI from 'element-ui'Vue.use(ElementUI)

import { Button, Input, Pagination, Table, TableColumn, MessageBox } from 'element-ui';Vue.use(Button)Vue.use(Input)Vue.use(Pagination)

minChunks: 3

cnmp i compression-webpack-plugin -D

const CompressionPlugin = require('compression-webpack-plugin')
configureWebpack: (config) => {        if (process.env.NODE_ENV === 'production') {            // 为生产环境修改配置...            config.mode = 'production'            return {                plugins: [new CompressionPlugin({                    test: /\.js$|\.html$|\.css/, //匹配文件名                    threshold: 10240, //对超过10k的数据进行压缩                    deleteOriginalAssets: false //是否删除原文件                })]            }        }

const compression = require('compression')app.use(compression())  // 在其他中间件使用之前调用