Vue3 对比 Vue2 的变化

Vue3 对比 Vue2 的变化

1.源码组织方式变化:使用 TS 重写

2.支持 compositionAPI,基于函数的 api,更灵活组织组件逻辑(Vue2 使用 options api)

3.响应式系统提升:Vue3 的响应式数据原理改成了 Proxy,可以监听动态新增删除属性,以及数组变化

4.编译优化:Vue 通过标记静态根节点来优化 Diff,Vue 则标记和提升所有静态根节点,Diff 的时候只需要去对比动态节点的内容

5.打包体积优化:移除了一些不常用的 api(inline-template,filter)

6.生命周期的变化,使用 setup 替代了 beforeCreate 和 created

7.template 支持多个根标签

8.Vuex 状态管理,创建实例的方式,Vue2 使用 new store;Vue3 使用 createStore;

9.Route 获取页面实例以及路由信息,Vue2 使用 this 的方式获取;而 Vue3 采用 getCurrentInstance/userRoute,userRouter 的方式来获取

10.对 props 的使用:Vue2 通过 this 的方式使用;Vue3 则直接通过 props 使用;

11.父子组件传值:Vue3 中当子组件向父组件返回数据时,如果使用的是自定义名称,像 backData,则需要在 emits 定义一下

相关推荐
天若有情6731 分钟前
打破思维定式!C++参数设计新范式:让结构体替代传统参数列表
java·开发语言·c++
不务正业的前端学徒3 分钟前
手写简单的call bind apply
前端
斯特凡今天也很帅4 分钟前
python测试SFTP连通性
开发语言·python·ftp
jump_jump6 分钟前
Ripple:一个现代的响应式 UI 框架
前端·javascript·前端框架
sunywz7 分钟前
【JVM】(4)JVM对象创建与内存分配机制深度剖析
开发语言·jvm·python
亲爱的非洲野猪7 分钟前
从ReentrantLock到AQS:深入解析Java并发锁的实现哲学
java·开发语言
星火开发设计8 分钟前
C++ set 全面解析与实战指南
开发语言·c++·学习·青少年编程·编程·set·知识
用户9047066835714 分钟前
Nuxt css 如何写?
前端
神秘的猪头14 分钟前
🎨 CSS 这种“烂大街”的技术,怎么在 React 和 Vue 里玩出花来?—— 模块化 CSS 深度避坑指南
css·vue.js·react.js
夏天想15 分钟前
element-plus的输入数字组件el-input-number 显示了 加减按钮(+ -) 和 小三角箭头(上下箭头),怎么去掉+,-或者箭头
前端·javascript·vue.js