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.0的步伐越来越近了,是时候了解起来了,虽然嘴上还喊学不动了,但是,身体还得诚实起来,接着学。。。通...
    Mstian阅读 13,330评论 1 9
  • vue3.0入门到精通 附B站讲解视频 vue3+typescript入门到精通[https://www.bili...
    王大合阅读 12,741评论 1 4
  • vue3.0快发布了,也带来了很多新的特性,如新的监测设计,PWA,TS支持等,本节一起了解下新的监测原理。 旧的...
    老鼠AI大米_Java全栈阅读 11,634评论 0 2
  • 久违的晴天,家长会。 家长大会开好到教室时,离放学已经没多少时间了。班主任说已经安排了三个家长分享经验。 放学铃声...
    飘雪儿5阅读 12,189评论 16 22
  • 今天感恩节哎,感谢一直在我身边的亲朋好友。感恩相遇!感恩不离不弃。 中午开了第一次的党会,身份的转变要...
    余生动听阅读 13,585评论 0 11