为什么提出Vue3
提出了哪些改进
- 使用TS重构
- 应用了JS的新特性Proxy重写响应式
- 性能的提升
- Composition API
- 如果一定要选出一个最大的区别, 应该是Composition API
setup配置项
在Vue3中, 为了向前兼容, 不影响之前的配置项
创造了一个新的配置项setup, 所有的Composition API都可以在setup中使用
setup是一个函数
返回一个对象, 对象中定义的属性, 方法在模板中直接使用
返回渲染函数(不常用)
ref函数、reactive函数
在setup函数中, 如果要实现响应式, 需要借助
- ref函数: 实现普通类型数据的响应式
reactive函数: 实现引用类型数据的响应式
像ref, reactive, computed从Vue对象从导出的函数, 就是composition API
ref函数: 实现值类型数据的响应式
将值类型数据(普通数据 String, Number, Boolean, undefined, null)
ref函数: 接收普通类型的数据作为参数, 返回一个RefImpl对象
对于引用类型数据. 如对象, 数组
使用ref函数比较麻烦, 在访问时, 每次都需要.value赋值
reactive函数 引用类型数据. 如对象, 数组
- 从定义的角度
- ref: 主要用于基本数据类型
- reactive: 主要用于引用数据类型
- 从实现的角度
- ref: 通过Object.defineProperty的get和set来实现响应式
- reactive: 通过Proxy来实现数据劫持, 通过reflect操作内部属性
- 从使用的角度
- ref: 需要通过.value操作数据
- reactive: 不需要.value, 直接操作数据
unref unref()：是 val = isRef(val) ? val.value : val 的语法糖
isref()
检查一个值是否为一个 ref 对象。
toRefs()
把一个响应式对象转换成普通对象，该普通对象的每个 property 都是一个 ref ，和响应式对象 property 一一对应。
并且，当想要从一个组合逻辑函数中返回响应式对象时，用 toRefs 是很有效的，该 API 让消费组件可以 解构 / 扩展（使用 … 操作符）返回的对象，并不会丢失响应性：
hooks函数
hooks本质上还是一种函数, 将多个Composition API封装, 实现某个特定功能
hooks的作用
解耦
复用
待续
