Vue 2 常见面试题速查

<div id="demo">
  <h1>v-if 和 v-for 哪个优先级更高？如果两个同时出现，应该如何优化？</h1>
  <p v-for="child in children" v-if="isFolder">{{child.title}}</p>
</div>

// app.$options.render
// 循环并对每一个循环子项做判断
(function anonymous(
) {
with(this){return _c('div',{attrs:{"id":"demo"}},[_c('h1',[_v("v-if 和 v-for 哪个优先级更高？如果两个同时出现，应该如何优化？")]),_v(" "),_l((children),function(child){return (isFolder)?_c('p',[_v(_s(child.title))]):_e()})],2)}
})

<div id="demo">
  <h1>v-if 和 v-for 哪个优先级更高？如果两个同时出现，应该如何优化？</h1>
  <template v-if="isFolder">
    <p v-for="child in children">{{child.title}}</p>
  </template>
</div>

// app.$options.render
// 如果判断不通过就不展开循环
(function anonymous(
) {
with(this){return _c('div',{attrs:{"id":"demo"}},[_c('h1',[_v("v-if 和 v-for 哪个优先级更高？如果两个同时出现，应该如何优化？")]),_v(" "),(isFolder)?_l((children),function(child){return _c('p',[_v(_s(child.title))])}):_e()],2)}
})

// src\compiler\codegen\index.js
export function genElement (el: ASTElement, state: CodegenState): string {
  if (el.parent) {
    el.pre = el.pre || el.parent.pre
  }

  if (el.staticRoot && !el.staticProcessed) {
    return genStatic(el, state)
  } else if (el.once && !el.onceProcessed) {
    return genOnce(el, state)
  } else if (el.for && !el.forProcessed) {
    return genFor(el, state)
  } else if (el.if && !el.ifProcessed) {
    return genIf(el, state)
  } else if (el.tag === 'template' && !el.slotTarget && !state.pre) {
    return genChildren(el, state) || 'void 0'
  } else if (el.tag === 'slot') {
    return genSlot(el, state)
  } else {
    // component or element
    // ... 
  }
}

<div id="demo">
  <h1>Vue组件data为什么必须是个函数而Vue的根实例则没有限制？</h1>
  <comp></comp>
  <comp></comp>
</div>
<script>
  Vue.component('comp', {
    template: '<div @click="counter++">{{counter}}</div>',
    data: { counter: 0 }
  })
  const app = new Vue({
    el: '#demo',
  });
</script>

// src\core\instance\state.js
function initData (vm: Component) {
  let data = vm.$options.data
  data = vm._data = typeof data === 'function'
    ? getData(data, vm)
    : data || {}
  // ...
}

<div id="demo">
  <p v-for="item in items" :key="item">{{item}}</p>
</div>
<script>
  const app = new Vue({
    el: '#demo',
    data: {
      items: ['a', 'b', 'c', 'd', 'e'],
    },
    mounted () {
      setTimeout(() => {
        this.items.splice(2, 0, 'f')
      }, 1000)
    }
  });
</script>

// src\core\vdom\patch.js 
function sameVnode (a, b) {
  return (
    a.key === b.key && (
      (
        a.tag === b.tag &&
        a.isComment === b.isComment &&
        isDef(a.data) === isDef(b.data) &&
        sameInputType(a, b)
      ) || (
        isTrue(a.isAsyncPlaceholder) &&
        a.asyncFactory === b.asyncFactory &&
        isUndef(b.asyncFactory.error)
      )
    )
  )
}

// src\core\instance\lifecycle.js
export function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean
): Component {
  // ...

  // we set this to vm._watcher inside the watcher's constructor
  // since the watcher's initial patch may call $forceUpdate (e.g. inside child
  // component's mounted hook), which relies on vm._watcher being already defined
  new Watcher(vm, updateComponent, noop, {
    before () {
      if (vm._isMounted && !vm._isDestroyed) {
        callHook(vm, 'beforeUpdate')
      }
    }
  }, true /* isRenderWatcher */)
  // ...
  return vm
}

// src\core\vdom\patch.js
function patchVnode (
  oldVnode,
  vnode,
  insertedVnodeQueue,
  ownerArray,
  index,
  removeOnly
) {
  // ...
  const oldCh = oldVnode.children
  const ch = vnode.children
  if (isDef(data) && isPatchable(vnode)) {
    for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode)
    if (isDef(i = data.hook) && isDef(i = i.update)) i(oldVnode, vnode)
  }
  if (isUndef(vnode.text)) {
    if (isDef(oldCh) && isDef(ch)) {
      if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
    } else if (isDef(ch)) {
      if (process.env.NODE_ENV !== 'production') {
        checkDuplicateKeys(ch)
      }
      if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
      addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
    } else if (isDef(oldCh)) {
      removeVnodes(oldCh, 0, oldCh.length - 1)
    } else if (isDef(oldVnode.text)) {
      nodeOps.setTextContent(elm, '')
    }
  } else if (oldVnode.text !== vnode.text) {
    nodeOps.setTextContent(elm, vnode.text)
  }
  if (isDef(data)) {
    if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode)
  }
}

// src\core\vdom\patch.js
function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
  let oldStartIdx = 0
  let newStartIdx = 0
  let oldEndIdx = oldCh.length - 1
  let oldStartVnode = oldCh[0]
  let oldEndVnode = oldCh[oldEndIdx]
  let newEndIdx = newCh.length - 1
  let newStartVnode = newCh[0]
  let newEndVnode = newCh[newEndIdx]
  let oldKeyToIdx, idxInOld, vnodeToMove, refElm

  // removeOnly is a special flag used only by <transition-group>
  // to ensure removed elements stay in correct relative positions
  // during leaving transitions
  const canMove = !removeOnly

  if (process.env.NODE_ENV !== 'production') {
    checkDuplicateKeys(newCh)
  }

  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
    if (isUndef(oldStartVnode)) {
      oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
    } else if (isUndef(oldEndVnode)) {
      oldEndVnode = oldCh[--oldEndIdx]
    } else if (sameVnode(oldStartVnode, newStartVnode)) {
      patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
      oldStartVnode = oldCh[++oldStartIdx]
      newStartVnode = newCh[++newStartIdx]
    } else if (sameVnode(oldEndVnode, newEndVnode)) {
      patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
      oldEndVnode = oldCh[--oldEndIdx]
      newEndVnode = newCh[--newEndIdx]
    } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
      patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
      canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))
      oldStartVnode = oldCh[++oldStartIdx]
      newEndVnode = newCh[--newEndIdx]
    } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
      patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
      canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
      oldEndVnode = oldCh[--oldEndIdx]
      newStartVnode = newCh[++newStartIdx]
    } else {
      if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
      idxInOld = isDef(newStartVnode.key)
        ? oldKeyToIdx[newStartVnode.key]
        : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
      if (isUndef(idxInOld)) { // New element
        createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
      } else {
        vnodeToMove = oldCh[idxInOld]
        if (sameVnode(vnodeToMove, newStartVnode)) {
          patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
          oldCh[idxInOld] = undefined
          canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
        } else {
          // same key but different element. treat as new element
          createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
        }
      }
      newStartVnode = newCh[++newStartIdx]
    }
  }
  if (oldStartIdx > oldEndIdx) {
    refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
    addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
  } else if (newStartIdx > newEndIdx) {
    removeVnodes(oldCh, oldStartIdx, oldEndIdx)
  }
}

Vue.component('comp', {
  template: '<div>this is a component</div>'
})
// 具体实现见
// src\core\global-api\assets.js
// src\core\global-api\extend.js

<template>
  <div>this is a component</div>
</template>

// 要劫持的对象
const data = {
  name: '',
};

function say(name) {
  if (name === '古天乐') {
    console.log('给大家推荐一款好玩的游戏');
  } else if (name === '渣渣辉') {
    console.log('戏我养过很多，可游戏我只玩贪玩蓝月');
  } else {
    console.log('系兄弟就来砍我');
  }
}

// 遍历对象，对其属性值进行劫持
Object.keys(data).forEach(function (key) {
  Object.defineProperty(data, key, {
    enumerable: true,
    configurable: true,
    get: function() {
      console.log('get');
    },
    set: function(newVal) {
      console.log(`大家好，唔系${newVal}`);
      say(newVal);
    },
  });
});
data.name = '渣渣辉';
// 大家好，唔系渣渣辉
// 戏我养过很多，可游戏我只玩贪玩蓝月

const router = new VueRouter({
  routes: [
    { path: '/foo', component: () => import('./Foo.vue') }
  ]
})

<template>
  <div id="app">
    <keep-alive>
      <router-view/>
    </keep-alive>
  </div>
</template>

<template>
  <div class="cell">
    <!-- 这种情况使用v-show复用DOM比v-if效果好 -->
    <div v-show="value" class="on">
      <Heavy :n="10000" /><!-- 超级大组件 -->
    </div>
    <section v-show="!value" class="off">
      <Heavy :n="10000" />
    </section>
  </div>
</template>

<template>
  <ul>
    <li
      v-for="user in activeUsers"
      :key="user.id">
      {{user.name}}
    </li>
  </ul>
</template>
<script>
export default {
  computed: {
    activeUsers: function() {
      return this.users.filter(function(user) {
        return user.isActive
      })
    }
  }
}
</script>

export default {
  data: () => ({
    users: []
  }),
  async created() {
    const users = await axios.get('/api/users')
    this.users = Object.freeze(users)
  }
}

<recycle-scroll
  class="items"
  :items="items"
  :item-size="24">
  <template v-slot="{item}">
    <FetchItemView
      :item="item"
      @vote="voteItem(item)"/>
  </template>
</recycle-scroll>

create() {
  this.timer = setInterval(this.refresh, 2000)
},
beforeDestroy() {
  clearInterval(this.timer)
}

<img v-lazy="/static/img/1.png">

import Vue from 'vue'
import { Button, Select } from 'element-ui'

Vue.use(Button)
Vue.use(Select)

<template functional>
  <div class="cell">
    <div v-if="props.value" class="on"></div>
    <section v-else class="off"></section>
  </div>
</template>
<script>
export default {
  props: ['value']
}
</script>

<template>
  <div>
    <ChildComp>
  </div>
</template>
<script>
export default {
  components: {
    ChildComp: {
      methods: {
        heavy() {/* 耗时任务 */}
      },
      render (h) {
        return h('div', this.heavy())
      }
    }
  }
}
</script>

<template>
  <div :style="{opacity: start / 300 }">
    {{result}}
  </div>
</template>
<script>
import { heavy } from '@/utils'
export default {
  props: ['start'],
  computed: {
    base() {
      return 42
    },
    result() {
      const base = this.base // 不要频繁引用this.base
      let result = this.start
      for (let i = 0; i < 1000; i++) {
        result += heavy(base)
      }
      return result
    }
  }
}
</script>

<template>
  <div id="app">
    <p>num: {{num}}</p>
    <button @click="add">add</button>
  </div>
</template>
<script>
var addLog = {
  updated: function() {
    console.log('数据发生变化' + this.num)
  }
}
export default {
  name: 'app',
  data() {
    return {
      num: 1
    }
  },
  methods: {
    add() {
      this.num++
    }
  },
  updated() {
    console.log('原生updated')
  },
  mixins: [addLog] // 混入
}
</script>

// src\main.js
Vue.mixin({
  updated: function() {
    console.log('全局混入')
  }
})

  <template id="hello">
    <div>
      <h1>slot</h1>
      <slot>如果没有原内容就显示该内容</slot><!-- 默认插槽 -->
    </div>
  </template>
  <script>
  var vm = new Vue({
    el: '#app',
    components: {
      'my-hello': {
        template: '#hello'
      }
    }
  })
  </script>

<div id="app">
  <my-hello>
    <ul slot="s1">
      <li>aaa</li>
      <li>bbb</li>
      <li>ccc</li>
    </ul>
    <ol slot="s2">
      <li>111</li>
      <li>222</li>
      <li>333</li>
    </ol>
  </my-hello>
</div>
<template id="hello">
  <div>
    <slot name="s2"></slot>
    <h3>具名插槽</h3>
    <slot name="s1"></slot>
  </div>
</template>
<script>
var vm = new Vue({
  el: '#app',
  components: {
    'my-hello': {
      template: '#hello'
    }
  }
})
</script>

var vm = new Vue({
  el: '#app',
  data: {
    foo: 1
  },
  watch: {
    foo: function(newVal, oldVal) {
      console.log(newVal + '-' +oldVal)
    }
  }
})
vm.foo = 2 // 2 - 1

var vm = new Vue({
  el: '#app',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
  }.
  computed: {
    fullName: function() {
      return this.firstName + ' ' + this.lastName
    }
  }
})
vm.fullName // Foo Bar