1、创建项目
- npm init vite-app hello-vue3 耗时仅为2.366秒
- 目录结构
2、vue3设计目标
3、compisition API简介
- 是什么
compisition API是一组低侵入式的、函数式的 API,使得我们能够更灵活地「组合」组件的逻辑。
- 为什么
更好的逻辑复用与代码组织。
更好的类型推导。
- 语法
1、组合式API入口setup,参数prop,context
1、setup 组件选项在创建组件之前执行
2、setup 函数中的 props 是响应式的,当传入新的 prop 时,它将被更新。
3、因为 props 是响应式的,你不能使用 ES6 解构,因为它会消除 prop 的响应性。
2、创建响应式变量
1、ref创建响应式变量,获取或修改时需要.value
2、reactive创建基本变量不是响应性,复杂变量是响应性比如object
3、建议ref创建基本变量,reactive创建复杂变量
4、使用reactive要在组合函数返回响应式对象时使用 toRefs,以便引用组件时时能解构赋值
3、组合式 API 上的生命周期钩子
例如 onMounted, 使用语法
onMounted(() => {
);
4、watchEffect、watch 响应式更改
watchEffect:
Vue 的响应式系统会缓存副作用函数,并异步地刷新它们,这样可以避免同一个 tick 中多个状态改变导致的不必要的重复调用。
在核心的具体实现中, 组件的更新函数也是一个被侦听的副作用。当一个用户定义的副作用函数进入队列时, 会在所有的组件更新后执行
(理解:引用到的响应式变更后会触发watchEffect,多个变更会等最后全部更新完触发watchEffect)
5、computed属性
4、弊端
1、引入 Ref 的心智负担
区别「响应式值引用」与普通的基本类型值与对象
读写 ref 的操作比普通值的更冗余,因为需要访问 .value
2、Ref vs Reactive
3、返回语句冗长
4、更多的灵活性来自更多的自我克制