废话
本篇大概记录一下，vue3.0 Composition Api 目前的一些方法和使用，新钩子函数的使用，html数据渲染，方法编写，数据监听，计算属性使用，组件使用，利于后面，项目开发理解
首先说下vue3.0 Composition Api 和 vue2.0 Options Api 的对比
Options Api
我们会在一个vue文件中methods，computed，watch，data中等等定义属性和方法，共同处理页面逻辑，（特定的区域写特定的代码，随着业务复杂度提高，会导致后续维护复杂、复用性不高，新接触vue还好，好上手，都中规中矩在自己函数里写着）
向上面这样，数据定义到data里，方法写在methods里，监听写在watch里，计算属性写在computed里，还有组件的props数据，组件钩子函数，路由监听函数，数据filter函数等，然后业务逻辑复杂了，我们就会发现，一个data里定义里小几十个字段，自己写的自己知道还行，万一看到别人写的，还没个注释，直接就疯了，只能看html，知道这个方法干啥的，在找对应方法，数据
Composition API
在vue3 Composition API 中，代码是根据逻辑功能来组织的，一个功能的所有api会放在一起（高内聚，低耦合），即时项目很大，功能很多，直接去setup里的return里一看，我们都能快速的定位到这个功能所用到的所有API
根据逻辑相关性组织代码的，提高可读性和可维护性，基于函数组合的 API 更好的重用逻辑代码（在vue2 Options API中通过Mixins重用逻辑代码，容易发生命名冲突且关系不清）
小结
- 在逻辑组织和逻辑复用方面，Composition API是优于Options API
- 因为Composition API几乎是函数，会有更好的类型推断。
- Composition API对 tree-shaking 友好，代码也更容易压缩
- Composition API中见不到this的使用，减少了this指向不明的情况
- 如果是小型组件，可以继续使用Options API，也是十分友好的
重点
生命周期钩子函数
import { onMounted, onUpdated, onUnmounted } from 'vue'
const MyComponent = {
setup() {
onMounted(() => {
console.log('mounted!')
})
onUpdated(() => {
console.log('updated!')
})
onUnmounted(() => {
console.log('unmounted!')
})
},
}
html，方法，变量声明，钩子函数，监听函数，计算属性使用
附上demo图片（刚接触，多动手敲一下试试，哈哈哈，就不付代码了）
Composition Api
- ref：接受一个参数值并返回一个响应式且可改变的 ref 对象
- reactive：接收一个普通对象然后返回该普通对象的响应式代理
- readonly：返回一个原始对象的只读代理
- watchEffect：响应式追踪其依赖，并在其依赖变更时重新运行该函数
- unref： 如果参数是一个 ref 则返回它的 value，否则返回参数本身，val = isRef(val) ? val.value : val 的语法糖。
- toRef：将响应对象转换为 ref 响应式数据
- toRefs：把一个响应式对象转换成普通对象
- isRef：检查一个值是否为一个 ref 对象
- isProxy：检查一个对象是否是由 reactive 或者 readonly 方法创建的代理
- isReactive：检查一个对象是否是由 reactive 创建的响应式代理。
- isReadonly：检查一个对象是否是由 readonly 创建的只读代理
- customRef：自定义一个 ref（轻松实现带防抖功能）
- markRaw：标记一个对象为“永远不会转为响应式代理”，函数返回这个对象本身
- shallowReactive：浅层的响应式代理
- shallowReadonly：创建浅层的只读响应式代理
- shallowRef：追踪.value 更改操作，但不做响应代理转换
- toRaw：还原方法
下一篇（继第一篇，继续搭建，项目）
推荐文档