1.vue2.0和3.0的初始化就存在着⼀定区别,⽐如vue3.0可以在安装脚⼿架同时提前安装好⼀些项⽬开发必备的插件,并且3.0提供了可视 化创建脚⼿架,可以更加⽅便的对插件和依赖进⾏管理和配置,同时两个版本的⽬录结构也是有些许差别的。
2.在开发过程中两个版本的使⽤⽅法虽然在表⾯上没有太⼤的⼀个区别,但是在他的底层⽅⾯去看的话区别还是很⼤的,其中就包括渲染⽅ 式,数据监听,双向绑定,⽣命周期,vue3更精准变更通知,
这⾥着重说⼀下关于双向绑定的更新,
vue2 的双向数据绑定是利⽤ES5 的⼀个 API ,Object.definePropert()对数据进⾏劫持 结合 发布订阅模式的⽅式来实现的。
vue3 中使⽤了 es6 的 ProxyAPI 对数据代理,通过 reactive() 函数给每⼀个对象都包⼀层 Proxy,通过 Proxy 监听属性的变化,从⽽ 实现对数据的监控。
性能的提升
diff方法优化
Vue2 中的虚拟dom是进行全量的杜比
Vue3 新增了静态标记(PatchFlag),只比对带有 PF 的节点,并且通过 Flag 的信息得知
当前节点要比对的具体内容。
静态提升
Vue2中无论元素是否参与更新, 每次都会重新创建, 然后再渲染
Vue3中对于不参与更新的元素, 会做静态提升, 只会被创建一次, 在渲染时直接复用即可
cacheHandlers 事件侦听器缓存
Vue2默认情况下onClick会被视为动态绑定, 所以每次都会去追踪它的变化
Vue3但是因为是同一个函数,所以没有追踪变化, 直接缓存起来复用即可
ssr渲染
Vue2当有大量静态的内容时候,这些内容会被当做纯字符串推进一个buffer里面, 即使存在动态的绑定,会通过模板插值嵌入进去。这样会比通过虚拟dmo来渲染的快上很多很多。
Vue3当静态内容大到一定量级时候,会用_createStaticVNode方法在客户端去生成一个static node,这些静态node,会被直接innerHtml,就不需要创建对象,然后根据对象渲染。
按需编译,体积更小(Tree shaking)
Tree-shaking 使编译更友好,比如,如果你的项目没有用到watch,那编译时就会把tree shaking掉。