当前位置: 首页 > Web前端 > vue.js

一文了解Vue3的新变化

时间:2023-03-31 23:43:16 vue.js

自2020年9月18日Vue-next发布vue3.0版本以来,主流组件库基本都发布了支持vue3.0的版本,其他生态也在持续中在完善的过程中,随着近两年Vue3的不断发展,已经成为国内最流行的前端框架之一。与之前的其他版本相比,Vue3有哪些新变化,增加了哪些新功能?这里简单总结一下,当然还有一些文档的传送门。Vue3有哪些显着的新特性?Vue3中一些值得关注的新特性包括:一是CompositionAPICombinationAPI,中文叫组合API。二、SFCCompositionAPI语法糖。第三,传送。四、碎片。第五,EmitsComponentOption。第六,使用@vue/runtime-core的createRendererAPI创建自定义渲染器。第七,SFC现在可以包含全局规则或特定于插槽内容的规则。第八,悬念,仍处于试验阶段。其中,第一、二、五、六在Vue2.7中也全部或部分支持。Vue3有哪些新的框架级推荐?Vue3的支持库已得到重大更新。例如:新版本的Router、Devtools和测试工具,支持Vue3构建工具链:从VueCLI升级到Vite状态管理:从Vuex升级到PiniaIDE支持:从Vetur升级到Volar新的命令行TypeScript支持:vue-tscSSG:UpgradefromVuePresstoVitePressJSX:Upgradefrom@vue/babel-preset-jsxto@vue/babel-plugin-jsxVue3的全局API有哪些颠覆性变化?与Vue2相比,Vue3有很多颠覆性的变化。升级时一定要注意。就全局API而言,有:全局VueAPI已更改为使用应用程序实例。全局和内部API已重新组织为树形结构Vue3模板指令有哪些颠覆性变化?Vue3在模板指令上有很多颠覆性的变化,升级时要注意,例如:重新设计了组件上的v-model用法,替换v-bind.sync改变了v-if和v-在同一个元素上的使用v-bind="object"的优先级更改为顺序敏感v-on:event.native修饰符已删除Vue3组件有哪些重大变化?Vue3在组件上有很多颠覆性的变化,升级的时候要注意,例如:函数式组件只能使用普通函数来创建声明Vue3渲染函数有什么颠覆性?Vue3在渲染函数上有很多颠覆性的变化,升级的时候要注意,比如:渲染函数的API变了,删除了$scopedSlots属性,所有slots通过$slots暴露为函数$listeners已经被移除合并到$attrs中$attrs现在包含class和style属性Vue3自定义元素有哪些颠覆性变化?Vue3在自定义元素上有很多颠覆性的变化。升级时注意,如:自定义元素检查,现在is属性在模板编译时执行,只在组件上使用。Vue3有哪些颠覆性的小变化?Vue3还是有很多颠覆性的小改动,升级的时候要注意,比如:destroyedlifecycle选项改名了unmountedbeforeDestroylifecycle选项改名了beforeUnmount默认工厂函数的props属性不再可以访问this上下文自定义指令API已被修改以与组件生命周期和binding.expression数据保持一致应始终将其声明为函数mixins的数据选项现在是Shallow合并了一些属性的强制取值策略更改了一些过渡类重命名现在默认不显示包装元素观察数组时,只有在替换数组时才会触发回调如果需要在变异时触发,则必须指定deep选项没有用于特殊指令的