vue2.x与vue3.x区别(......)

1.安装命令

vue2.x

npm uninstall -g vue-cli

vue3.x

npm install -g @vue/cli

2.项目初始化

vue2.x 项目初始化命令：vue init <模板名称（webpack比较常用）> [项目名称]

vue init webpack project-name

vue3.x 项目初始化命令：vue create [项目名称]

vue create project-name

vue3.x提供了可视化创建脚手架，可以更加方便的对插件和依赖进行管理和配置。

3.比较与区别

1）根节点不同

vue2.x 中必须要有且有一个根节点元素

vue3.x 可以没有根标签，会默认将多个根标签包裹在一个fragement虚拟标签中，有利于减少内存

2）vue3.x新特性总结

• 虚拟DOM重写，速度更快
• 常驻代码大小控制在10kb gzipped上下
• 基于 Proxy 观察者机制以满足全语言覆盖以及更好的性能
• 添加TypeScript支持，使外部贡献者更有信心做改动
• 放弃 Object.defineProperty ，使用更快的原生 Proxy
• template下支持多个根节点
• 组合式API

在开发过程中两个版本的使用方法表面上没有很大的区别，但是底层方法变化较大，其中就包括渲染方式，数据监听，双向绑定，生命周期，vue3.x更精准，体积更小。

双向绑定在vue2.x中实现是利用ES5中的Object.defineProperty()对数据进行劫持、结合、发布订阅来实现的。

vue3.x中使用ES6中的Proxy 对数据进行代理，通过 reactive() 函数给每一个对象都包一层 Proxy，通过 Proxy 监听属性的变化，从而实现对数据的监控。

优势：

1.defineProperty只能监听某个属性，不能对全对象监听
可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）
2.可以监听数组，不用再去单独的对数组做特异性操作,通过Proxy可以直接拦截所有对象类型数据的操作，完美支持对数组的监听

例如vue2.x当数据包裹过多时，数据已更新，但是页面数据未更新，经常用到$set，在vue3.x中就不需要

3）生命周期比较

 图示方法的变化

eforeCreate -> use setup()

created -> use setup()

beforeMount -> onBeforeMount

mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeUnmount -> onBeforeUnmount

unmounted -> onUnmounted

errorCaptured -> onErrorCaptured

renderTracked -> onRenderTracked

renderTriggered -> onRenderTriggered

activated -> onActivated

deactivated -> onDeactivated

1、去掉了vue2.0中的 beforeCreate 和 created 两个阶段，同样的新增了一个 setup

2、beforeMount 挂载之前    改名  onBeforeMount

3、mounted 挂载之后    改名  onMounted

4、beforeUpdate 数据更新之前    改名  onBeforeUpdate

5、updated 数据更新之后    改名  onUpdated

6、beforeDestroy 销毁前    改名  onBeforeUnmount

7、destoryed 销毁后    改名  onUnmounted

8、errorCaptured 报错    改名  onErrorCaptured

setup 是围绕 beforeCreate 和 created 生命周期钩子运行的。

4）v-if和v-for的优先级

vue2.x 中v-for的优先级高于v-if，可以放在一起使用，虽不建议这么做，但是可以，会带来性能上的浪费

vue3.x中 v-if 优先级高于v-for  并且不能一起在一个元素上使用，若使用会报错 ，可以通过在外部添加一个标签，将v-for移到外层 

5）样式穿透

vue2.x

/deep/ .类名{}
::v-deep .类名{}

vue3.x

:deep (.类名{})
::v-deep(.类名{})

6)插槽方式不同

匿名插槽一致，但具名插槽有区别：

• 具名插槽使用方式不同：vue2.x 使用 slot='插槽name' ；vue3.x 使用 v-slot:'插槽name'
• 作用域插槽使用方式不同： vue2.x 中 在父组件中 用 slot-sope='data' 从子组件中获取数据；vue3.x 则是父组件中 #data or #default='{data}'