重点：组合式API
what——组合式 API
▣组合式 API 是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件。它是一个概括性的术语，涵盖了以下方面的 API：
▣响应性 API：例如ref()和reactive()，使我们可以直接创建响应式状态、计算属性和侦听器。
生命周期钩子：例如onMounted()和onUnmounted()，使我们可以在组件各个生命周期阶段添加逻辑。
▣依赖注入：例如provide()和inject()，使我们可以在使用响应性 API 时，利用 Vue 的依赖注入系统。
why——组合式 API
1、组合式 API 最基本的优势是它使我们能够通过组合函数来实现更加简洁高效的逻辑复用。它解决了所有mixins的缺陷，那是选项式 API 中一种逻辑复用机制。
2、更灵活的代码组织
选项式 API 在单个组件的逻辑复杂到一定程度时，也面临了一些限制，主要体现在需要处理多个逻辑关注点的组件中，同一个逻辑关注点相关的代码没有被归为了一组，程序员为了一个逻辑关注点在不同的选项块间来回滚动切换，如果是大项目，后期维护非常困难。
3、生产包体积更小
搭配<script setup>使用组合式 API 比等价情况下的选项式 API 更高效，对代码压缩也更友好。这是由于<script setup>;形式书写的组件模板被编译为了一个内连函数，和<script setup>中的代码位于同一作用域。不像选项式 API 需要依赖this上下文对象访问属性，被编译的模板可以直接访问<script setup>中定义的变量，无需一个代码实例从中代理。这对代码压缩更友好，因为变量的名字可以变得更短，但对象的属性名则不能。
All in all ：组合式 API 主要适用于非常大型的项目，而对于中小型项目来说选项式 API 仍然是一个不错的选择。也可以同时使用两种 API ，在一个选项式 API 组件中使用
setup()选项。
how——组合式API
为了开始使用组合式API，我们首先需要一个可以实际使用它的地方。在Vue组件中，我们将此位置称为setup。
setup组件选项
新的setup组件选项在创建组件之前（即beforeCreate和created前）执行，一旦props被解析，并充当合成API的入口点。
setup 选项应该是一个接受 props 和 context 的函数，我们将在稍后讨论。此外，我们从 setup 返回的所有内容都将暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。就是说以上东西都是 setup 返回。
在 Vue 3.0 中，我们可以通过 ref 或reactive 代替data，（reactive 一般用来声明对象、数组类型书），起到剪辑式打包的作用
1、ref 简单数据
2、reactive 对象数据
代替了methods
-
<template>
-
<div>
-
<p>{{message}}
</p>
-
<ul>
-
<li v-for="(item,index) in names.list" key="index">{{item}}
</li>
-
</ul>
-
<button @click="clickHandle">点击事件
</button>
-
</div>
-
</template>
-
<script>
-
import { ref ,reactive }
from
"vue"
-
export
default {
-
name:
'v3_special',
-
setup(
){
-
const message =
ref(
"新特性")
-
const names =
reactive({
-
list:[
"irene",
"ime",
"frank"]
-
})
-
function
clickHandle(
){
-
alert(
"点击事件")
-
}
-
return{
-
message,names,clickHandle
-
}
-
}
-
}
-
</script>
-
-
<style>
-
-
</style>
修改变量值
-
变量名.
value =
"改变的新特新"
-
eg：message.
value =
"改变的新特新"
setup（）中使用props和context
因为setup组件选项在创建组件之前（即beforeCreate和created前）执行，所以无法像2.x 中一样使用this获取当前组件，修改data变量，所以3.x是通过接收setup（props，ctx）的方法，获取到当前组件的实例ctx（context）和props。===》setup方法中没有this关键字
将数据从 父组件 传递到 子组件
在子组件显示
子组件：
-
<template>
-
<div>
-
<p>{{message}}
</p>
-
<ul>
-
<li v-for="(item,index) in names.list" key="index">{{item}}
</li>
-
</ul>
-
<button @click="clickHandle">点击事件
</button>
-
<h3>{{msg}}
</h3>
-
</div>
-
</template>
-
<script>
-
import { ref ,reactive }
from
"vue"
-
export
default {
-
name:
'v3_special',
-
props:{
-
msg:
String
-
},
-
setup(
props){
-
console.
log(props.
msg)
-
const msg = props.
msg
-
const message =
ref(
"新特性")
-
const names =
reactive({
-
list:[
"irene",
"ime",
"frank"]
-
})
-
function
clickHandle(
){
-
message.
value =
"改变的新特新"
-
alert(message.
value)
-
}
-
return{
-
message,names,clickHandle,msg
-
}
-
}
-
}
-
</script>
-
-
<style>
-
-
</style>
父组件：
-
<template>
-
<v3_special msg="数据">
</v3_special>
-
<!-- 路由的显示入口 -->
-
<!-- <router-view> -->
-
<router-link to="/">首页
</router-link>
-
<router-link to="/about">关于
</router-link>
-
<!-- </router-view> -->
-
<router-view>
</router-view>
-
</template>
-
-
<script>
-
-
import v3_special
from
"./views/Vue3_Special.vue"
-
export
default {
-
name:
'App',
-
components: {
-
v3_special
-
}
-
}
-
}
-
</script>
-
-
<style scoped>
-
-
</style>
转载：https://blog.csdn.net/qq_45947664/article/details/127810473