目录
一、Composition API的优势
1. Options API存在的问题
使用传统OptionsAPI中,新增或者修改一个需求,就需要分别在data,methods,computed里修改。
2. Composition API的优势
我们可以更加优雅的组织我们的代码,函数,让相关功能的代码更加有序的组织在一起。
二、 新的组件
1. Fragment
在vue2中:组件必须有一个根标签
在vue3中:组件可以没有根标签,内部会将分多个标签包含在一个Fragment虚拟元素中
好处:减少标签层级,减少内存占用
2. Teleport
- 什么是Teleport ? —— Teleport是一种能够将我们的组件html结构移动到指定位置的技术。
// to可以取值:html、body、#atguigu、.box
<teleport to='移动位置'>
<div v-if='isShow'>
<div>
<h3>我是一个弹窗</h3>
<button @click='isShow = false'>关闭弹窗</button>
</div>
</div>
</teleport>
3. Suspense
等待异步组件时渲染一些额外内容,让应用有更好的用户体验
使用步骤:
异步引入组件
import { defineAsyncComponent } from 'vue'
const Child = defineAsyncComponent(()=>import('./components/Child.vue'))
export default{
components:{Child}
}
使用Suspense包裹组件,并配置好default与fallback
三、其他
1. 全局API的转移
- Vue2有许多全局API和配置
例如:注册全局组件、注册全局指令等
// 注册全局组件
Vue.component('MyButton',{
data:() => ({
count:0
}),
})
// 注册全局指令
Vue.directive('focus',{
inserted: el => el.focus()
})
- Vue3.0中对这些API做出调整:
将全局API,即:Vue.xxx调整到应用实例(app)上
2. 其他改变
data选项应始终被声明为一个函数
过渡类名的更改
移除keyCode作为v-on的修饰符,同时也不再支持config.keyCodes
移除v-on.native修饰符
父组件中绑定事件
子组件中声明自定义事件
- 移除过滤器(filter)
过滤器虽然看起来很方便,但它需要一个自定义语法,打破大括号内表达式是“只是JavaScript”的假设,这不仅有学习成本,而且有实现成本!建议用方法调用或计算属性去替换过滤器