说说 vue1、vue2 和 vue3 的区别
面试时被问到，那就趁机梳理一下 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>
使用 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。
其他支持
更好的ts支持，vue 3 直接用 ts 重写。
总结
从用 vue 1.x 开始到现在 vue 3.x 登场，中间过去 4 年了吧，不知不觉 vue 都做了如此多的改进，若不是查了下资料我甚至都想不起来 vue 的 vdom 是在 vue 2.x 时引入的。
