vue 3 快速上手

为什么提出Vue3
提出了哪些改进

1. 使用TS重构
2. 应用了JS的新特性Proxy重写响应式
3. 性能的提升
4. Composition API
5. 如果一定要选出一个最大的区别, 应该是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的作用
解耦
复用

待续