vue3 初体验

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返回的值