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

你可能感兴趣的:(vue3 初体验)