共计 750 个字符，预计需要花费 2 分钟才能阅读完成。
为什么提出 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, 间接操作数据
hooks 函数
hooks 实质上还是一种函数, 将多个 Composition API 封装, 实现某个特定性能
hooks 的作用
解耦
复用
待续
正文完
