1. setup语法
setup是Vue3中一个新的配置项，值是一个函数，它是 Composition API “表演的舞台”，组件中所用到的：数据、方法、计算属性、监视等，均配置在setup中。
特点如下：
- setup函数返回的对象中的内容，可直接在模板中使用。
- setup中访问this是undefined。
- setup函数会在beforeCreate之前调用，它是“领先”所有钩子执行的。
2. ref语法
作用：定义响应式变量（支持基本类型和对象类型）。
语法：let xxx = ref(初始值)。
使用：JS中操作数据需要xx.value，但模板中不需要.value，直接使用即可。
标签的ref属性：
- 用于注册模板引用。
- 用在普通DOM标签上，获取的是DOM节点。
- 用在组件标签上，获取的是组件实例对象。
3. reactive语法
作用：定义一个响应式对象（基本类型不要用它，要用ref，否则报错）。
语法：let响应式对象= reactive(源对象)。
注意点：reactive定义的响应式数据是“深层次”的。
4. ref和reactive对比
（1）ref用来定义基本类型数据和对象类型数据，reactive定义对象类型数据。
（2）ref创建的变量必须使用.value（可以使用volar插件自动添加.value）。
（3）reactive重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）。
使用原则：
- 若需要一个基本类型的响应式数据，必须使用ref。
- 若需要一个响应式对象，层级不深，ref、reactive都可以。
- 若需要一个响应式对象，且层级较深，推荐使用reactive。
5. toRefs与toRef
作用：将一个响应式对象中的每一个属性，转换为ref对象。toRefs与toRef功能一致，但toRefs可以批量转换。
let {name,gender} = toRefs(person)
6. compute计算属性
作用：根据已有数据计算出新数据，计算属性默认是只读的。用到“可写”的属性，可以通过同时提供 getter 和 setter 来创建：
<script setup>
import { ref, computed } from 'vue'
const firstName = ref('John')
const lastName = ref('Doe')
const fullName = computed({
// getterget() {return firstName.value + '' + lastName.value},// setterset(newValue){// 注意: 我们这里使用的是解构贼值语法[firstName.value,lastName.value] = newValue. split('')}
})
</script>7. watch用法
作用：监视数据的变化
特点：Vue3中的watch只能监视以下四种数据：
- ref定义的数据。
监视ref定义的【基本类型】数据：直接写数据名即可，监视的是其value值的改变。
监视ref定义的【对象类型】数据：直接写数据名，监视的是对象的【地址值】，若想监视对象内部的数据，要手动开启深度监视。
注意：若修改的是ref定义的对象中的属性，newValue 和 oldValue 都是新值，因为它们是同一个对象。若修改整个ref定义的对象，newValue 是新值， oldValue 是旧值，因为不是同一个对象了。
- reactive定义的数据。
监视reactive定义的【对象类型】数据，且默认开启了深度监视。
- 函数返回一个值（getter函数）。
监视ref或reactive定义的【对象类型】数据中的某个属性，注意点如下：
若该属性值不是【对象类型】，需要写成函数形式。
若该属性值是依然是【对象类型】，可直接编，也可写成函数，建议写成函数。
结论：监视的要是对象里的属性，那么最好写函数式，注意点：若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视。
- 一个包含上述内容的数组。
8. watchEffect用法
立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行该函数。
- watch对比watchEffect
都能监听响应式数据的变化，不同的是监听数据变化的方式不同
watch：要明确指出监视的数据
watchEffect：不用明确指出监视的数据（函数中用到哪些属性，那就监视哪些属性）。
9. props用法
9.1 仅接收
const props = defineProps(['list'])9.2 接收+限制类型
defineProps<{list:Persons}>()9.3 接收+限制类型+指定默认值+限制必要性
let props = withDefaults(defineProps<{list?:Persons}>(),{list:()=>[{id:'asdasg01',name:'小猪佩奇',age:18}]})10. hooks用法
10.1 什么是hook？
本质是一个函数，把setup函数中使用的Composition API进行了封装，类似于vue2.x中的mixin。
10.2 自定义hook的优势
复用代码, 让setup中的逻辑更清楚易懂。
10.3 ts中定义
import {ref,onMounted} from 'vue'
export defalut function(){let sum = ref(0)const increment = () => {sum.value++}const decrement = () => {sum.value--}onMounted(() => {increment()})//向外暴露数据return {sum,increment,decrement}
}10.4 组件中具体使用
<template><h2>当前求和为:[{sum}]</h2><button @click="increment">点我+1</button><button @click="decrement">点我-1</button>
</template>
<script lang="ts">
import {defineComponent} from 'vue'
export default defineComponent({
name :' App'
})
</script>
<script setup lang="ts">import useSum from './hooks/useSum'let {sum, increment,decrement} = useSum()
</script>