熬夜整理的 vue 面试题

switch (mode) {    case 'history':    this.history = new HTML5History(this, options.base)    break    case 'hash':    this.history = new HashHistory(this, options.base, this.fallback)      break    case 'abstract':    this.history = new AbstractHistory(this, options.base)      break  default:    if (process.env.NODE_ENV !== 'production') {      assert(false, `invalid mode: ${mode}`)    }}

Vue.mixin({  beforeCreate() {    // ...逻辑        // 这种方式会影响到每个组件的 beforeCreate 钩子函数  },});

<!-- 在双花括号中 -->{ 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}` // 注意这一步少给了一个 ')'    }}

<div id="app"></div><script>    let vm = new Vue({        el: '#app',        template: `<div>            // <span>hello world</span> 是静态节点            <span>hello world</span>                // <p>{{name}}</p> 是动态节点            <p>{{name}}</p>        </div>`,        data() {          return { name: 'test' }        }    });</script>

export function compileToFunctions(template) {  // 我们需要把html字符串变成render函数  // 1.把html代码转成ast语法树  ast用来描述代码本身形成树结构 不仅可以描述html 也能描述css以及js语法  // 很多库都运用到了ast 比如 webpack babel eslint等等  let ast = parse(template);  // 2.优化静态节点：对ast树进行标记,标记静态节点    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;}

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

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

<!-- Parent --><template><div class="wrap">    <Child /></div></template>
<style lang="scss" scoped>.wrap /deep/ .box{    background: red;}</style>
<!-- Child --><template>    <div class="box"></div></template>

<!-- Parent --><template><div class="wrap">    <Child /></div></template>
<style lang="scss" scoped>/* 其他样式 */</style><style lang="scss">.wrap .box{  background: red;}</style>
<!-- Child --><template>  <div class="box"></div></template>

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

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 是创建新的历史纪录

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

<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)// 我是根元素的属性          }        }      }    }  }});