助你上手Vue3全家桶之Vue3教程

目录

• 前言
• 1，setup
• • 1.1，返回值
  • 1.2，注意点
  • 1.3，语法
  • 1.4，setup的参数
• 2，ref 创建响应式数据
• 3，reactive 创建响应式数据
• 4，computed 计算属性
• 5，watch 监听
• 6，watchEffect 监听回调
• 7，生命周期
• • 7.1，改变
  • 7.2，语法
• 8，toRef 创建ref
• 9，toRefs 响应式转换
• 10，shallowReactive 响应式外层转换
• 11，shallowRef 基本数据响应式
• 12，readonly 响应式变只读
• 13，shallowReadonly 响应式变只读
• 14，toRaw 响应式变非响应式
• 15，markRaw 标记永远不响应式
• 16，customRef 依赖更新控制
• 17，provide & inject 通信
• 18，响应式数据的判断
• • 18.1，isRef
  • 18.2，isReactive
  • 18.3，isReadonly
  • 18.4，isProxy
• 19，teleport 移动dom组件
• 20，Suspense 异步渲染组件
• 21，全局API调整
• 22，移除api
• 23，Ref 获取DOM
• • 23.1，单个ref
  • 23.2，循环中的ref
• 24，emits 自定义事件
• 25，$nextTick 异步更新
• 26，hook 生命周期事件

前言

这些内容是博主在学习过程中记录下来的，有一些不重要的点就跳过了，需要时自行查询文档。其实V2到V3的学习成本不高，熟悉V2的话，看完这篇文章就可以上手V3。

Vue3官网

在线源码编译地址

1，setup

---

setup是所有Composition API的容器，值为一个函数。组件中所用到的数据、方法等等，均要配置在setup中，它会在beforeCreate之前执行一次，注意：V3里this不再是指向Vue实例，访问this会是undefined

1.1，返回值

---

• 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。
• 若返回一个渲染函数：则可以自定义渲染内容。

1.2，注意点

---

尽量不要与V2配置混用

V2配置（data、methos、computed…）中可以访问到setup中的属性、方法。
但在setup中不能访问到V2配置（data、methods、computed…）。
如果有重名, setup优先。

setup不能是一个async函数

因为返回值不再return的