vue 面试经常会问的那些题

components:{   AddCustomerSchedule:(resolve)=>import("../components/AddCustomer") // require([]) }

export function ( Ctor: Class<Component> | Function | Object | void, data: ?VNodeData, context: Component, children: ?Array<VNode>, tag?: string ): VNode | Array<VNode> | void {     // async component     let asyncFactory     if (isUndef(Ctor.cid)) {         asyncFactory = Ctor         Ctor = resolveAsyncComponent(asyncFactory, baseCtor) // 默认调用此函数时返回 undefiend         // 第二次渲染时Ctor不为undefined         if (Ctor === undefined) {             return createAsyncPlaceholder( // 渲染占位符 空虚拟节点                 asyncFactory,                 data,                 context,                 children,                 tag             )         }     } }function resolveAsyncComponent ( factory: Function, baseCtor: Class<Component> ): Class<Component> | void {     if (isDef(factory.resolved)) {         // 3.在次渲染时可以拿到获取的最新组件         return factory.resolved     }    const resolve = once((res: Object | Class<Component>) => {         factory.resolved = ensureCtor(res, baseCtor)         if (!sync) {             forceRender(true) //2. 强制更新视图重新渲染         } else {             owners.length = 0         }     })    const reject = once(reason => {         if (isDef(factory.errorComp)) {             factory.error = true forceRender(true)         }     })    const res = factory(resolve, reject)// 1.将resolve方法和reject方法传入，用户调用 resolve方法后     sync = false     return factory.resolved }

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

// 父组件<template>  <div id="father">    <son :msg="msgData" :fn="myFunction"></son>  </div></template>
<script>import son from "./son.vue";export default {  name: father,  data() {    msgData: "父组件数据";  },  methods: {    myFunction() {      console.log("vue");    },  },  components: { son },};</script>

// 子组件<template>  <div id="son">    <p>{{ msg }}</p>    <button @click="fn">按钮</button>  </div></template><script>export default { name: "son", props: ["msg", "fn"] };</script>

// 父组件<template>  <div class="section">    <com-article      :articles="articleList"      @onEmitIndex="onEmitIndex"    ></com-article>    <p>{{ currentIndex }}</p>  </div></template>
<script>import comArticle from "./test/article.vue";export default {  name: "comArticle",  components: { comArticle },  data() {    return { currentIndex: -1, articleList: ["红楼梦", "西游记", "三国演义"] };  },  methods: {    onEmitIndex(idx) {      this.currentIndex = idx;    },  },};</script>

//子组件<template>  <div>    <div      v-for="(item, index) in articles"      :key="index"      @click="emitIndex(index)"    >      {{ item }}    </div>  </div></template>
<script>export default {  props: ["articles"],  methods: {    emitIndex(index) {      this.$emit("onEmitIndex", index); // 触发父组件的方法，并传递参数index    },  },};</script>

// event-bus.js
import Vue from 'vue'export const EventBus = new Vue()

<template>  <div>    <first-com></first-com>    <second-com></second-com>  </div></template>
<script>import firstCom from "./firstCom.vue";import secondCom from "./secondCom.vue";export default { components: { firstCom, secondCom } };</script>

<template>  <div>    <button @click="add">加法</button>  </div></template>
<script>import { EventBus } from "./event-bus.js"; // 引入事件中心
export default {  data() {    return { num: 0 };  },  methods: {    add() {      EventBus.$emit("addition", { num: this.num++ });    },  },};</script>

<template>  <div>求和: {{ count }}</div></template>
<script>import { EventBus } from "./event-bus.js";export default {  data() {    return { count: 0 };  },  mounted() {    EventBus.$on("addition", (param) => {      this.count = this.count + param.num;    });  },};</script>

provide() {     return {             num: this.num      };}

inject: ['num']

provide() { return {    app: this  };}data() { return {    num: 1  };}
inject: ['app']console.log(this.app.num)

export default {  data () {    return {      name: 'JavaScript'    }  },  methods: {    sayHello () {      console.log('hello')    }  }}

<template>  <child ref="child"></component-a></template><script>import child from "./child.vue";export default {  components: { child },  mounted() {    console.log(this.$refs.child.name); // JavaScript    this.$refs.child.sayHello(); // hello  },};</script>

<template>  <div>    <span>{{ message }}</span>    <p>获取父组件的值为: {{ parentVal }}</p>  </div></template>
<script>export default {  data() {    return { message: "Vue" };  },  computed: {    parentVal() {      return this.$parent.msg;    },  },};</script>

// 父组件中<template>  <div class="hello_world">    <div>{{ msg }}</div>    <child></child>    <button @click="change">点击改变子组件值</button>  </div></template>
<script>import child from "./child.vue";export default {  components: { child },  data() {    return { msg: "Welcome" };  },  methods: {    change() {      // 获取到子组件      this.$children[0].message = "JavaScript";    },  },};</script>

<template>  <div id="app">    //此处监听了两个事件，可以在B组件或者C组件中直接触发    <child1      :p-child1="child1"      :p-child2="child2"      @test1="onTest1"      @test2="onTest2"    ></child1>  </div></template><script>import Child1 from "./Child1.vue";export default {  components: { Child1 },  methods: {    onTest1() {      console.log("test1 running");    },    onTest2() {      console.log("test2 running");    },  },};</script>

<template>  <div class="child-1">    <p>props: {{ pChild1 }}</p>    <p>$attrs: {{ $attrs }}</p>    <child2 v-bind="$attrs" v-on="$listeners"></child2>  </div></template><script>import Child2 from "./Child2.vue";export default {  props: ["pChild1"],  components: { Child2 },  inheritAttrs: false,  mounted() {    this.$emit("test1"); // 触发APP.vue中的test1方法  },};</script>

<template>  <div class="child-2">    <p>props: {{ pChild2 }}</p>    <p>$attrs: {{ $attrs }}</p>  </div></template><script>export default {  props: ["pChild2"],  inheritAttrs: false,  mounted() {    this.$emit("test2"); // 触发APP.vue中的test2方法  },};</script>

export function set (target: Array<any> | Object, key: any, val: any): any {  // target 为数组    if (Array.isArray(target) && isValidArrayIndex(key)) {    // 修改数组的长度, 避免索引>数组长度导致splcie()执行有误    target.length = Math.max(target.length, key)    // 利用数组的splice变异方法触发响应式      target.splice(key, 1, val)    return val  }  // key 已经存在，直接修改属性值    if (key in target && !(key in Object.prototype)) {    target[key] = val    return val  }  const ob = (target: any).__ob__  // target 本身就不是响应式数据, 直接赋值  if (!ob) {    target[key] = val    return val  }  // 对属性进行响应式处理  defineReactive(ob.value, key, val)  ob.dep.notify()  return val}

1. 数据驱动页面，提供响应式的试图组件2. 都有virtual DOM,组件化的开发，通过props参数进行父子之间组件传递数据，都实现了webComponents规范3. 数据流动单向，都支持服务器的渲染SSR4. 都有支持native的方法，react有React native， vue有wexx

 1.数据绑定：Vue实现了双向的数据绑定，react数据流动是单向的 2.数据渲染：大规模的数据渲染，react更快 3.使用场景：React配合Redux架构适合大规模多人协作复杂项目，Vue适合小快的项目 4.开发风格：react推荐做法jsx + inline style把html和css都写在js了      vue是采用webpack + vue-loader单文件组件格式，html, js, css同一个文件

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='something'>
相当于
<input v-bind:value="something" v-on:input="something = $event.target.value">

父组件：<ModelChild v-model="message"></ModelChild>
子组件：<div>{{value}}</div>
props:{    value: String},methods: {  test1(){     this.$emit('input', '小红')  },},