一. Vue3概述认识Vue3
1.Vue3基本信息:
-
Vue3支持Vue2的大多数特性
-
更好的支持TypeScript
-
Vue3支持框架
(1). element-ui 基于Vue3.0的桌面端组件库
(2). vant vant3.0版本 有赞团队开源
(3) ant-design-vue 蚂蚁开发
2.性能提升:
-
打包大小减少41%
-
初次渲染快55% , 更新渲染快133%
-
内存减少54%
-
使用proxy 代替 defineProperty 实现数据响应式
-
重写虚拟DOM 的实现 和 Tree-shaking
二.Vue3的新增特性
1.Composition Api
Option Api: Vue2创建组件时 会把数据放在 data,计算属性放到Computed ,事件处理放到 methods 监听改变放到 watch 从而处理页面逻辑
-
组件功能越来越多 逻辑功能点分散 不易阅读 (新增或修改一个需求 就需要分别在data methods等 进行修改 .... 功能多时 滚动条来回滚动查找很麻烦)
-
可以通过 mixins 重用逻辑代码 但是数据来源还会有 mixins 命名冲突问题
Composition Api: 将零散的 data methods 代码重新组合 一个功能的代码放在一起 并且可以单出拆分出函数
-
兼容 option Api 还可以继续使用
-
利用代码重用 没有对 this 的使用 , 减少了 this指向不明的情况
-
几乎是函数 编辑器可以帮助进行类型检查和建议
2.setup
语法:
<script>
export default {
setup() {
const msg = 'hello World'
return {
msg
}
}
}
</script>
介绍:
-
steup 函数是一个新的 option 在初始化时执行一次 可以理解为使用 composition APi的入口点
-
这个函数的返回是一个对象 对象里的属性和方法 可以直接在模板中使用
注意:
-
steup在 beforeCreate之前创建 因此这个函数内没有this 因此不能访问 data methods 等 但是 methods 内可以访问 steup提供的属性和方法
-
rethrn 中返回的属性跟data合并 返回的方法跟 methods 里面的方法合并 如有重名 steup优先
-
steup 不能是一个 async 函数 使用 async后返回值不是 return 的对象 而是 promise
-
steup接收两个参数 steup(props,context) || steup(sttrs,slots,emit) 不能解构 props 否则会失去响应式