Vue3基础命令解析

本文涉及的产品
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
全局流量管理 GTM,标准版 1个月
简介: Vue3基础命令解析

1、v-if 和v-for

同一元素上使用的v-if和v-for优先级已更改,但不推荐同时使用 v-if 和 v-for。

2、组件事件

组件事件需要在emits选项中声明
3、生命周期

destroyed 生命周期选项被重命名为 unmounted

beforeDestroy 生命周期选项被重命名为 beforeUnmount

4、自定义指令

自定义指令的API已更改为与组件生命周期一致

5、新增组件

新增了三个组件:Fragment 支持多个根节点、Suspense 可以在组件渲染之前的等待时间显示指定内容、Teleport 可以让子组件能够在视觉上跳出父组件(如父组件overflow:hidden)
6、新增指令

新增指令 v-memo,可以缓存 html 模板,比如 v-for 列表不会变化的就缓存,简单说就是用内存换时间。
7、proxy响应式系统

用 Proxy 代替 Object.defineProperty 重构了响应式系统,可以监听到数组下标变化,及对象新增属性,因为监听的不是对象属性,而是对象本身,还可拦截 apply、has 等13种方法

8、重构DOM和diff算法

重构了虚拟 DOM,在编译时会将事件缓存、将 slot 编译为 lazy 函数、保存静态节点直接复用(静态提升)、以及添加静态标记、Diff 算法使用 最长递增子序列 优化了对比流程,使得虚拟 DOM 生成速度提升 200%
9、在CSS绑定JS变量

支持在 <style></style> 里使用 v-bind,给 CSS 绑定 JS 变量(color: v-bind(str))
10、新增 Composition API

新增 Composition API 可以更好的逻辑复用和代码组织,同一功能的代码不至于像以前一样太分散,虽然 Vue2 中可以用 minxin 来实现复用代码,但也存在问题,比如方法或属性名会冲突,代码来源也不清楚等
11、移除set和delete

全局函数 set 和 delete 以及实例方法 $set 和 $delete移除。基于代理的变化检测已经不再需要它们了
12、vue3使用Ts写,不兼容IE11

毕竟 Vue3 是用 TS 写的,所以对 TS 的支持度更好

Vue3 不兼容 IE11

13、移除实例方法

$on,$off 和 $once 实例方法已被移除,组件实例不再实现事件触发接口。

相关文章
|
1月前
|
缓存 JavaScript 前端开发
Vue3与Vue2生命周期对比:新特性解析与差异探讨
Vue3与Vue2生命周期对比:新特性解析与差异探讨
89 2
|
1月前
|
JavaScript 前端开发 开发者
Vue执行流程及渲染解析
【10月更文挑战第2天】
104 58
|
1月前
|
存储 JavaScript 前端开发
Vue3权限控制全攻略:路由与组件层面的用户角色与权限管理方法深度解析
Vue3权限控制全攻略:路由与组件层面的用户角色与权限管理方法深度解析
112 2
|
1月前
|
网络协议 开发工具 C语言
Jetson错误(二):wget命令提示无法解析主机地址的问题解决
对于解决在NVIDIA Jetson平台上使用wget命令时出现的无法解析主机地址的问题,提供了两种解决方法:一种是临时修改DNS服务器为Google的公共DNS,另一种是永久修改DNS设置。
90 5
|
1月前
|
JavaScript 调度
Vue事件总线(EventBus)使用指南:详细解析与实战应用
Vue事件总线(EventBus)使用指南:详细解析与实战应用
58 1
|
1月前
|
JavaScript 前端开发 UED
Vue执行流程及渲染解析
【10月更文挑战第5天】
|
1月前
|
移动开发 JavaScript 前端开发
Javaweb之Vue路由的详细解析
Vue.js是一款备受欢迎的前端框架,以其简洁的API和组件化开发模式著称。Vue Router作为其官方路由管理器,在构建单页面应用(SPA)时发挥关键作用,通过URL变化管理组件切换,实现无刷新过渡。本文将详细介绍Vue Router的基础概念、主要功能及使用步骤,帮助JavaWeb开发者快速掌握其工作原理及实践应用。
15 1
|
1月前
|
JSON JavaScript 前端开发
Javaweb中Vue指令的详细解析与应用
Vue指令提供了一种高效、声明式的编码方式,使得开发者可以更专注于数据和业务逻辑,而不是DOM操作的细节。通过熟练使用Vue指令,可以极大地提高开发效率和项目的可维护性。
20 3
|
1月前
|
JavaScript 前端开发 索引
Vue3 + Vite项目实战:常见问题与解决方案全解析
Vue3 + Vite项目实战:常见问题与解决方案全解析
50 0
|
1月前
|
API
Vue3组件通信全解析:利用props、emit、provide/inject跨层级传递数据,expose与ref实现父子组件方法调用
Vue3组件通信全解析:利用props、emit、provide/inject跨层级传递数据,expose与ref实现父子组件方法调用
416 0

推荐镜像

更多