说说你对vue的理解？

• vue的核心特性
  • 数据驱动（MVVM）
  • 组件化
  • 指令系统

MVVM: Model：模型层，负责处理业务逻辑以及和服务器端进行交互 View:视图层负责将数据模型转化为UI展示出来，可以简单的理解为HTML页面 ViewModel:视图模型层，用来连接Model和View，是Model和View之间的通信桥梁

v-if 和 v-show 的区别？

• 共同点

  • 都是控制页面显示隐藏元素的

• 区别

  • 控制手段不同
  • 编译过程不同
  • 编译条件不同
  • v-if 由 false 变为 true 的时候，触发组件的触发组件的 beforeCreate、create、beforeMount、mounted钩子，由true变为false的时候触发组件的beforeDestory、destoryed方法
  • v-show 由 false 变为 true 的时候不会触发组件的生命周期

控制手段： v-show 隐藏 责任为该元素添加 css display:none，dom 元素依旧还在。 v-if 显示隐藏是将 dom元素整个添加或删除

编译过程 v-if 切换有一个局部编译/卸载过程，切换过程会销毁和重建内部事件监听和子组件；v-show 只是简单的基于 css 切换

编译条件：v-if 是真正的条件渲染，它会确保在切换过程中条件快内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染

• 使用场景

v-if 与 v-show 都能控制dom元素在页面的显示

v-if 相比 v-show 开销更大的（直接操作dom节点增加与删除）

如果需要非常频繁地切换，则使用 v-show 较好

如果在运行时条件很少改变，则使用 v-if 较好

v-if 和 v-for 的优先级是什么？

• 作用

  • v-if 指令用于条件性的渲染一块内容。
  • v-for 指令基于一个数组来渲染一个列表

• 源码

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)
    // v-for 比 v-if 优先级别高的地方
  } 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
    ...
}

• 注意事项
  • 不要把v-if 和 v-for 同时用在同一个元素上，带来性能方面的浪费（每次渲染都会先循环再进行条件判断）
  • 如何避免出现这种情况，则在外层嵌套 template （页面渲染生成 dom 节点），在这一层进行 v-if 判断，然后在内部进行 v-for 循环

<template v-if="isShow">
    <p v-for="item in items">
</template>

• 如果条件出现在循环内部，可通过计算属性 computed 提前过滤掉那些不需要 显示的项