vue3使用setup语法糖

< script setup>中无需return 声明的变量、函数以及import引入的内容，即可在 < template/>使用

• script setup>语法糖

​
//在template中直接使用声明的变量、函数以及import引入的内容

• 标准组件< script> 需要写setup函数并繁琐retrun

总结：< script setup>语法糖里面的代码会被编译成组件 setup() 函数的内容，不需要通过return暴露 声明的变量、函数以及import引入的内容，即可在< template/>使用，并且不需要写export default{}
< script setup>语法糖里面的代码会被编译成组件 setup() 函数的内容。这意味着与普通的 < script> 只在组件被首次引入的时候执行一次不同，< script setup> 中的代码会在每次组件实例被创建的时候执行

（script-setup标签最终都会编译成setup() 函数的内容，每次实例化组件，就是实例化一次setup函数。script标签里面的setup函数也是一样每次实例化组件，就是实例化一次setup函数，但是script标签setup是需要写在export default{}内的，外的只是首次引入的时候执行一次）

< script setup>引入组件将自动注册

不需要在引入组件后，通过 components:{}注册组件，可直接使用

​

组件通信:在< script setup>中必须使用 defineProps 和 defineEmits API 来替代 props 和 emits

• defineProps 代替props，接收父组件传递的数据（父组件向子组件传参）

父组件：

​

子组件：

​

• defineEmit 代替emit，子组件向父组件传递数据（子组件向外暴露数据）
  子组件代码:

​

父组件代码:

​

< script setup>需主动向父组件暴露子组件属性 ：defineExpose

使用 < script setup> 的组件，父组件是无法通过ref 或者 $parent 获取到子组件的ref等响应数据，需要通过defineExpose 主动暴露

子组件代码：

父组件代码:

​

在setup访问路由

• 访问路由实例组件信息：route和router

setup 里不能访问 this，不能再直接访问 this. r o u t e r 或 t h i s . router 或 this. router或this.route。（getCurrentInstance可以替代this但不推荐）
推荐：使用useRoute 函数和useRouter函数替代this. r o u t e 和 t h i s . route 和 this. route和this.router