说说 vue1、vue2 和 vue3 的区别

面试时被问到，那就趁机梳理一下 vue 的演进吧

vue2 比 vue1 的改进

详见从Vue 1.x 迁移

生命周期

比如说 beforeCompile 移除，使用 created 替代，compiled 移除，使用 mounted 替换等

语法

新数组语法 (value, index) in arr，并丢弃 $index 和 $key

过滤器废弃，不再这样写 <p v-for="item in items | limitBy 10">{{ item }}</p>，改而在方法里自己做好分割

围绕 DOM 的实例方法移除，比如说 vm.$appendTo 移除

单向数据流思想引入

v-model 变为语法糖，本质上变成了 emit 了一个 input 事件，并且在本组件内触发它的更新。

$dispatch 和 $broadcast 废弃

引入 vdom 虚拟节点

解偶 HTML 依赖，从此可以渲染到 DOM 意外的平台上，比如说 SSR。

vue3 比 vue2 的改进

vue 3 源码：https://github.com/vuejs/vue-next

使用了 proxy 替代 Object.defineProperty

目前，Vue 的反应系统是使用 Object.defineProperty 的 getter 和 setter。但是，Vue 3 将使用 ES2015 Proxy 作为其观察者机制。这消除了以前存在的警告，使速度加倍，并节省了一半的内存开销。

为了继续支持 IE11，Vue 3 将发布一个支持旧观察者机制和新 Proxy 版本的构建

而为什么使用 Proxy 替代 Object.defineProperty？Proxy 可以劫持整个对象，并返回一个新的对象。Proxy 不仅可以代理对象，还可以代理数组，还可以代理动态增加的属性。节省内存，速度加倍。关于 Proxy API 参见 MDN

新增 hook api

注意 setup

<template>
  <div>
    <span>count is {{ count }}</span>
    <span>plusOne is {{ plusOne }}</span>
    <button @click="increment">count++</button>
  </div>
</template>

<script>
import { value, computed, watch, onMounted } from 'vue'

export default {
  setup() {
    // reactive state
    const count = value(0)
    // computed state
    const plusOne = computed(() => count.value + 1)
    // method
    const increment = () => { count.value++ }
    // watch
    watch(() => count.value * 2, val => {
      console.log(`count * 2 is ${val}`)
    })
    // lifecycle
    onMounted(() => {
      console.log(`mounted`)
    })
    // expose bindings on render context
    return {
      count,
      plusOne,
      increment
    }
  }
}
</script>

使用 setup 的好处都有啥？详细参见尤雨溪 - 聊聊 Vue.js 3.0 Beta 官方直播完整版 2020-04-21，摘录几点

便于 tree shaking。像是 transition 这样的代码，如果你没有使用到，它就会被 tree shaking，函数式的引入便于计算它究竟有没有被用到，而导出整个对象就没办法特意去掉某个不会使用的属性。新的 vue 核心运行时压缩后大概 10kb
便于混淆压缩使 vue 更小。因为 setup 是函数式引入的，引入进来的变量可以随意命名混淆成 a，b，c 这样的简短字符，而对象的属性不能被混淆。
代码组织更加清晰，不用再惧怕不知道哪里注入进来的 mixins 的属性和方法，若是 react 也不用担心不知道从哪里注入的 props 属性。

让 vue 更快的优化

像是重写虚拟DOM，优化插槽生成，静态树提升，静态属性提升。详见尤雨溪 - 聊聊 Vue.js 3.0 Beta 官方直播完整版 2020-04-21，本人也整理了一篇 vue 3.0 beta 编译优化研究。简言之，vue 3 已经能做到 diff 时，只对有变量的区域遍历，静态的节点直接复用对象不需要 diff。