1 vue2直接升级到vue3,
(线上不建议这么做,3.0版本 路由和vuex还是beta版本,还不是特别稳定)
vue add vue-next
2 新特性
- 更好的ts支持
- tree-shaking 按需加载
- fragments 支持多个根节点
- telepoet 传送门 允许使用多个,是添加不是替换
- custom renderer(自定义渲染器)
- composition api 新增概念 与之前并不冲突
3 composition api
3.1 setup 入口
3.2 响应式系统api
ref 可在template中自动展开value
ref -> value
reactive
ref 和reactive 都是创建响应式数据的函数
ref是专门处理值类型的 number string boolean
reactive 处理引用类型的 arry object
readonly 只读不可更改
computed
watch 必须是响应式对象或者返回一个响应式函数
watchEffect 立即执行、只能获取新的值、参数只能接收回调函数
3.3 生命周期钩子
3.4 依赖注入
3.5 refs
4 动机与目的
4.1 更好的代码组织与逻辑复用
- 代码组织基于功能而不是基于选项
- 逻辑复用 本质就是函数,天然的支持复用
- 解决了 2.0版本mixin 混入的命名冲突和来源不清晰
- 扩展 包装器
4.2 更好的类型推导
ts--->function
5 composition api 与 options api的兼容性
- set up内没有this
- 在options api 之前调用
- 调用set up时, 获取不到data内的值
- 要比beforeCreate 和created 调用时间都要早
- 在data内可以获取setup返回的值