面试时被问到，那就趁机梳理一下 vue 的演进吧
vue2 比 vue1 的改进
生命周期
比如说 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>
让vue更快的优化
像是重写虚拟DOM，优化插槽生成，静态树提升，静态属性提升，详见 Vue.js 3.0 新特性预览
让vue更小
tree shaking做的更好。新的 vue 核心运行时压缩后大概 10kb
其他支持
更好的ts支持等。
总结
从用 vue 1.x 开始到现在 vue 3.x 登场，中间过去 4 年了吧，不知不觉 vue 都做了如此多的改进，若不是查了下资料我甚至都想不起来 vue 的 vdom 是在 vue 2.x 时引入的。