vue的选项式和组合式，setup介绍

vue2语法用的是选项式，即所有项都写在一个export defaul的对象里，需要人选择式的把每一项用一个对象或者函数的方式声明，这部分存不存在就取决于你写不写。

<script>
export defalut {
props:{
	x:String,
  },
data(){
	return {a:1,b:2}
	},
computed:{
	c(){...},
	d(){...}
	},
watch:{
	a:'func1',
	b:'func2',
	},
methods:{
func1(){...},
func2(){...}
	}
created(){...},
mounted(){...},
XXX:{...},
YYY(){...},
}
</script>

而为了把同一块逻辑的代码写到同一块区域而不是分散在不同的项目中去反复横跳，于是出现了vue3的组合式，即setup函数：

<script>
export defalut {
setup(){
const a=1,
const b=2,
function afunc(){},
const bfunc=()=>{},
return{a,b,afunc,bfunc}
},
XXX:{...},
YYY(){...},
}
</script>

1.为了能够在template中使用，需要return出去(why*)
2.在setup中是没有this的，打印出来是undefined
3.setup()是在beforeCreated()之前执行的
4.这里面的变量并不是响应式的，为了让他成为响应式数据去自动更新UI，需要用ref或者reactive函数包装。

语法糖:

<script setup>
import {ref} from 'vue'
const a=ref(1),
const b=ref(2),
function afunc(){},
const bfunc=()=>{},
</script>

组合式API包含：

响应式 API ：

例如 ref 和 reactive ，使我们可以直接创建响应式状态、计算属性和侦听器。
ref用于定义基本类型和引用类型，reactive仅用于定义引用类型，reactive的响应式是深层次的，其底层是通过ES6的Proxy来实现数据响应式(所以就不需要vue2的$set)，ref定义对象时，底层会通过reactive转换成具有深层次的响应式对象，所以ref本质上是reactive的再封装。

使用ref定义基本数据类型时，在脚本里使用时，需要加.value后缀，然而在模板里不需要。官方推荐用ref，因为reactive定义在直接赋值时会导致响应式丢失。比如在定义数组时，建议使用ref，从而可避免reactive定义时值修改导致的响应式丢失问题:

const tableData = reactive([]) // 定义
const getTableData = async () => {
	const { data } = await getTableDataApi() // 模拟接口获取表格数据
	tableData = data // 修改，错误示例，这样赋值会使tableData失去响应式
}

用ref定义再通过.value的形式赋值可以避免这个问题，或者tableData =reactive( data )再包一遍。

生命周期钩子 ：

onBeforeMount(): 在组件被挂载之前调用，此时组件已经完成了响应式状态的设置，但还没有创建 DOM 节点。
onMounted(): 在组件被挂载之后调用，此时组件已经创建了 DOM 节点，并插入了父容器中。可以在这个钩子中访问或操作 DOM 元素。
onBeforeUpdate(): 在组件即将因为响应式状态变更而更新其 DOM 树之前调用，可以在这个钩子中访问更新前的 DOM 状态。
onUpdated(): 在组件因为响应式状态变更而更新其 DOM 树之后调用，可以在这个钩子中访问更新后的 DOM 状态。
onBeforeUnmount(): 在组件实例被卸载之前调用，此时组件实例依然还保有全部的功能。
onUnmounted(): 在组件实例被卸载之后调用，此时组件实例已经失去了全部的功能。可以在这个钩子中清理一些副作用，如计时器、事件监听器等。
onErrorCaptured(): 在捕获了后代组件传递的错误时调用，可以在这个钩子中处理错误或阻止错误继续向上传递。
onRenderTracked(): 在组件渲染过程中追踪到响应式依赖时调用，仅在开发模式下可用，用于调试响应式系统。

依赖注入 ：

例如 provide 和 inject ，使我们可以在使用响应式 API 时，利用 Vue 的依赖注入系统。

语法介绍

属性：
const props= defineProps({
msg:String,
name:{
type:String,
default:‘xxxx’
}
})
然后可以在template或者setup函数中直接通过msg调用（readonly）

自定义事件：
defineEmits用于在setup中注册自定义事件，接受一个数组，元素为自定义事件名；返回一个触发器，用于触发事件，第一个参数是具体事件，第二个是传递的值。
const emits = defineEmits([“onOK”])；
…
emits(‘onOK’, param1, param2…)