vue3之compisition API

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、更多的灵活性来自更多的自我克制