常考 vue 面试题（附答案）

<script>    // Vue.options 中会存放所有全局属性
    // 会用自身的 + Vue.options 中的属性进行合并    // Vue.mixin({    //     beforeCreate() {    //         console.log('before 0')    //     },    // })    debugger;    const vm = new Vue({        el: '#app',        beforeCreate: [            function() {                console.log('before 1')            },            function() {                console.log('before 2')            }        ]    });    console.log(vm);</script>

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);  }};
// 销毁实例实现Vue.prototype.$destory = function() {     // 触发钩子    callHook(vm, 'beforeDestory')    // 自身及子节点    remove()     // 删除依赖    watcher.teardown()     // 删除监听    vm.$off()     // 触发钩子    callHook(vm, 'destoryed')}

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

const createElement = (vnode) => {  let tag = vnode.tag;  let attrs = vnode.attrs || {};  let children = vnode.children || [];  if(!tag) {    return null;  }  //创建元素  let elem = document.createElement(tag);  //属性  let attrName;  for (attrName in attrs) {    if(attrs.hasOwnProperty(attrName)) {      elem.setAttribute(attrName, attrs[attrName]);    }  }  //子元素  children.forEach(childVnode => {    //给elem添加子元素    elem.appendChild(createElement(childVnode));  })
  //返回真实的dom元素  return elem;}

function updateChildren(vnode, newVnode) {  let children = vnode.children || [];  let newChildren = newVnode.children || [];
  children.forEach((childVnode, index) => {    let newChildVNode = newChildren[index];    if(childVnode.tag === newChildVNode.tag) {      //深层次对比, 递归过程      updateChildren(childVnode, newChildVNode);    } else {      //替换      replaceNode(childVnode, newChildVNode);    }  })}

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

const patternTypes: Array<Function> = [String, RegExp, Array] // 接收：字符串，正则，数组
export default {  name: 'keep-alive',  abstract: true, // 抽象组件，是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。
  props: {    include: patternTypes, // 匹配的组件，缓存    exclude: patternTypes, // 不去匹配的组件，不缓存    max: [String, Number], // 缓存组件的最大实例数量, 由于缓存的是组件实例（vnode），数量过多的时候，会占用过多的内存，可以用max指定上限  },
  created() {    // 用于初始化缓存虚拟DOM数组和vnode的key    this.cache = Object.create(null)    this.keys = []  },
  destroyed() {    // 销毁缓存cache的组件实例    for (const key in this.cache) {      pruneCacheEntry(this.cache, key, this.keys)    }  },
  mounted() {    // prune 削减精简[v.]    // 去监控include和exclude的改变，根据最新的include和exclude的内容，来实时削减缓存的组件的内容    this.$watch('include', (val) => {      pruneCache(this, (name) => matches(val, name))    })    this.$watch('exclude', (val) => {      pruneCache(this, (name) => !matches(val, name))    })  },}

render () {  //  function getFirstComponentChild (children: ?Array<VNode>): ?VNode {    if (Array.isArray(children)) {  for (let i = 0; i < children.length; i++) {    const c = children[i]    if (isDef(c) && (isDef(c.componentOptions) || isAsyncPlaceholder(c))) {      return c    }  }  }  }  const slot = this.$slots.default // 获取默认插槽  const vnode: VNode = getFirstComponentChild(slot)// 获取第一个子组件  const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions // 组件参数  if (componentOptions) { // 是否有组件参数    // check pattern    const name: ?string = getComponentName(componentOptions) // 获取组件名    const { include, exclude } = this    if (      // not included      (include && (!name || !matches(include, name))) ||      // excluded      (exclude && name && matches(exclude, name))    ) {      // 如果不匹配当前组件的名字和include以及exclude      // 那么直接返回组件的实例      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
    if (cache[key]) {      // LRU缓存策略执行      vnode.componentInstance = cache[key].componentInstance // 组件初次渲染的时候componentInstance为undefined
      // make current key freshest      remove(keys, key)      keys.push(key)      // 根据LRU缓存策略执行，将key从原来的位置移除，然后将这个key值放到最后面    } else {      // 在缓存列表里面没有的话，则加入，同时判断当前加入之后，是否超过了max所设定的范围，如果是，则去除      // 使用时间间隔最长的一个      cache[key] = vnode      keys.push(key)      // prune oldest entry      if (this.max && keys.length > parseInt(this.max)) {        pruneCacheEntry(cache, keys[0], keys, this._vnode)      }    }    // 将组件的keepAlive属性设置为true    vnode.data.keepAlive = true // 作用：判断是否要执行组件的created、mounted生命周期函数  }  return vnode || (slot && slot[0])}

// core/instance/lifecyclefunction initLifecycle (vm: Component) {  const options = vm.$options
  // locate first non-abstract parent  let parent = options.parent  if (parent && !options.abstract) { // 判断组件的abstract属性，才往父组件里面挂载DOM    while (parent.$options.abstract && parent.$parent) {      parent = parent.$parent    }    parent.$children.push(vm)  }
  vm.$parent = parent  vm.$root = parent ? parent.$root : vm
  vm.$children = []  vm.$refs = {}
  vm._watcher = null  vm._inactive = null  vm._directInactive = false  vm._isMounted = false  vm._isDestroyed = false  vm._isBeingDestroyed = false}

// core/vdom/create-componentinit (vnode: VNodeWithData, hydrating: boolean): ?boolean {    if (      vnode.componentInstance &&      !vnode.componentInstance._isDestroyed &&      vnode.data.keepAlive    ) { // componentInstance在初次是undefined!!!      // kept-alive components, treat as a patch      const mountedNode: any = vnode // work around flow      componentVNodeHooks.prepatch(mountedNode, mountedNode) // prepatch函数执行的是组件更新的过程    } else {      const child = vnode.componentInstance = createComponentInstanceForVnode(        vnode,        activeInstance      )      child.$mount(hydrating ? vnode.elm : undefined, hydrating)    }  },

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

// 创建组件构造器let Component = Vue.extend({ template: "<div>test</div>" });// 挂载到 #app 上new Component().$mount('#app')// 除了上面的方式，还可以用来扩展已有的组件let SuperComponent = Vue.extend(Component);new SuperComponent({  created() {    console.log(1);  },});new SuperComponent().$mount("#app");

<!-- View 层 -->
<div id="app">    <p>{{message}}</p>    <button v-on:click="showMessage()">Click me</button></div>

// ViewModel 层
var app = new Vue({    el: '#app',    data: {  // 用于描述视图状态           message: 'Hello Vue!',     },    methods: {  // 用于描述视图行为          showMessage(){            let vm = this;            alert(vm.message);        }    },    created(){        let vm = this;        // Ajax 获取 Model 层的数据        ajax({            url: '/your/server/data/api',            success(res){                vm.message = res;            }        });    }})

// Model 层
{    "url": "/your/server/data/api",    "res": {        "success": true,        "name": "test",        "domain": "www.baidu.com"    }}

<router-link to="/about">Go to About</router-link>

// literal string pathrouter.push('/users/1')​// object with pathrouter.push({ path: '/users/1' })​// named route with params to let the router build the urlrouter.push({ name: 'user', params: { username: 'test' } })

function Vue (options) {  if (process.env.NODE_ENV !== 'production' &&    !(this instanceof Vue)  ) {    warn('Vue is a constructor and should be called with the `new` keyword')  }  this._init(options)}

Vue.prototype._init = function (options?: Object) {  const vm: Component = this  // a uid  vm._uid = uid++
  let startTag, endTag  /* istanbul ignore if */  if (process.env.NODE_ENV !== 'production' && config.performance && mark) {    startTag = `vue-perf-start:${vm._uid}`    endTag = `vue-perf-end:${vm._uid}`    mark(startTag)  }
  // a flag to avoid this being observed  vm._isVue = true  // merge options  if (options && options._isComponent) {    // optimize internal component instantiation    // since dynamic options merging is pretty slow, and none of the    // internal component options needs special treatment.    initInternalComponent(vm, options)  } else {    vm.$options = mergeOptions(      resolveConstructorOptions(vm.constructor),      options || {},      vm    )  }  /* istanbul ignore else */  if (process.env.NODE_ENV !== 'production') {    initProxy(vm)  } else {    vm._renderProxy = vm  }  // expose real self  vm._self = vm  initLifecycle(vm)  initEvents(vm)  initRender(vm)  callHook(vm, 'beforeCreate')  initInjections(vm) // resolve injections before data/props  initState(vm)  initProvide(vm) // resolve provide after data/props  callHook(vm, 'created')
  /* istanbul ignore if */  if (process.env.NODE_ENV !== 'production' && config.performance && mark) {    vm._name = formatComponentName(vm, false)    mark(endTag)    measure(`vue ${vm._name} init`, startTag, endTag)  }
  if (vm.$options.el) {    vm.$mount(vm.$options.el)  }}

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