1.生命周期
增加了setup(),代表了beforeCreate和 created 两个生命周期钩子. 销毁组件的钩子名字改变,由beforeDestroy变更为onBeforeunmount,destroyed 变更为 onUnmounted.相比于vue2其他钩子名称都加上了on前缀.
2.emits 属性
增加了emits属性,vue2中采用的$emit('事件名',参数)的形式,而vue3可以在setup钩子里面,setup(props,{emit}){ emit('事件名',参数)},且vue3中,对事件命名加了on开头的限制规则.父组件参数接收跟vue2一样.
3.多事件处理\Fragment \Teleport组件\Suspense组件
- 多事件处理及 如 @click="method1(event)" 可同时执行2个函数.
- Fragment 相比于vue2,在组件最上层的模板template的内部第一层只能包含一个标签的限制解除.
- Teleport组件,加to属性 to:body可以直接加到body上,比如写弹窗就可以直接加.而vue2是不能直接加到body上.
- Suspense组件,这个是vue3的一个组件懒加载的组件语法糖.利用具名插槽,封装的一个组件.当有异步任务的组件在加载时,可以自定义加载中的展示.像antd element这些都有做类似封装.
4.移除了自定义组件的.sync 移除filter
- vue2 自定义组件的双向绑定 采用v-bind:value.sync="value" 形式实现. 而vue3 将vue2中 v-model和.sync整合在一起, 形式如 v-model:title="title"
- vue2中filter给我个人感觉不太好用,在实际的工作中,使用filter时,对于类型推导很不友好,用在模板中,在业务应用比较复杂时,找这个filter都得去全局查询. 平常要么直接就用计算属性处理了.
5. Composition API
- reactive 创建对象响应式数据
- ref toRef toRefs 对值设置响应式等.
- readonly 创建只读数据
- watch和 watchEffect
- setup
- 生命周期钩子函数
6.异步组件引入更改
在vue2中引入异步组件,采用的是在 属性components:{'A':()=>@import('./A.vue')} ; vue3中 import{ defineAsyncComponent }from 'vue' components:{'A':defineAsyncComponent ( ()=>import('./A.vue') )} 加了一层函数的引入,去掉@.
