当前位置:网站首页>Composition API 前提
Composition API 前提
2022-07-07 03:12:00 【要成为光的女人】
一、setup的用途
1.为了开始使用Coposition API,我们需要有一个可以实际使用它(编写代码的地方);
2.在Vue组件中,这个位置就是setup函数;
二、setup的认识理解
setup其实就是组件的另外一个选项:
只不过这个选项强大到我们可以用它来代替之前所缩写的大部分其他选项;
比如methods、computed、watch、data、生命周期等等。
三、setup 函数的使用(注意在setup里面是没有绑定this的)
- 首先我们得明白setup函数又哪些参数?
A:它主要有两个参数:
第一个参数:props (父组件传递过来的属性)
第二个参数:context:它里面包含了三个属性
attrs:所有的非props的attribute;
slots:父组件传递过来的插槽(这个在以渲染函数返回时会有作用)
emit:当我们组件内部需要发出事件时会用到emit(因为我们不能访问this,所以不可以通过this.$emit发出事件)
export default {
props:{
message:{
type:String,
required:true
}
},
// 参数1:props,父组件传递过来的属性
// 参数2:
// 方式1:
// setup(props,context){
// console.log(props.message); //参数1
// console.log(context.attrs.id)
// }
//
// 方式2:对context做一个解构
setup(props,{attrs,slots,emit}){
console.log(props.message); //参数1
console.log(attrs.id);
console.log(slots);
console.log(emit);
}
2.setup函数有什么样的返回值
setup返回值可以在模版template中被使用;
也就是说我们可以通过setup的返回值来代替data选项;
setup(){
let counter=100;
//1.在setup 里面在定义一个局部函数
const increat=()=>{
counter++
console.log(counter);
}
return{
counter,
increat //2.在将这个函数返回出去
}
}
四、setup 不可以使用this
- 表达的含义是this并没有指向当前组件实例;
- 并且在setup被调用之前,data、computed、methods等都没有被解析
- 所以无法在setup中获取this;
五、如何阅读源码:
六、如何在setup里面让数据变成响应式的
(1)reactive API 帮助数据实现响应式
<template>
<div id="app">
<!-- 数据展示 -->
<span>当前计数:{
{state.counter}}</span>
<button @click="increat"></button>
</div>
</template>
<script>
// 1.vue3 提供的reactive API 做响应式的
import {reactive} from 'vue'
export default {
props:{
message:{
type:String,
required:true
}
},
setup(){
//2.现在把响应式的数据用reactive 做一个包裹
const state=reactive({
counter:100;
})
//3.在setup 里面在定义一个局部函数
const increat = ()=>{
state.counter++;
console.log(state.counter);
}
// 返回的数据
return {
state,
increat //2.在将这个函数返回出去
}
}
}
</script>
(2)ref API
reative API 对传入的类型是有限制的,它要求我们传入必须是一个对象或者数组类型;
如果我们传入一个基本数据类型(String、Number、Boolean)会报一个警告;
这个时候Vue3给我们提供了另一个API:ref API
- ref 会返回一个可变的响应式对象,该对象作为一个响应式引用维护它内部的值,这就是ref名称的来源
- 它内部的值是在ref的value属性中被维护的;
这里有两个注意事项:
在模版引入ref的值时, Vue会自动帮助我们进行解包操作,所以我们并不需要在模版中通过ref.value的方式来使用
<template> <div id="app"> <!-- 当我们在template 模版中使用ref对象,他会自动进行解包的操作, --> <span>当前计数:{ {counter}}</span> <button @click="increat"></button> </div> </template> <script> // 1.vue3 提供的reactive API 做响应式的 import {ref} from 'vue' export default { props:{ message:{ type:String, required:true } }, setup(){ //counter 变成一个ref的可响应式的引用 let counter=ref(100); //3.在setup 里面在定义一个局部函数 const increat = ()=>{ counter.value++; console.log(counter); } // 返回的数据 return { counter, increat //2.在将这个函数返回出去 } } } </script>
边栏推荐
- Networkx绘图和常用库函数坐标绘图
- .net 5 FluentFTP连接FTP失败问题:This operation is only allowed using a successfully authenticated context
- Stack and queue-p79-10 [2014 unified examination real question]
- 数据资产管理与数据安全国内外最新趋势
- 网络基础 —— 报头、封装和解包
- 关于数据库数据转移的问题,求各位解答下
- How can gyms improve their competitiveness?
- Config分布式配置中心
- 品牌电商如何逆势增长?在这里预见未来!
- [noi simulation] regional division (conclusion, structure)
猜你喜欢
JDBC database connection pool usage problem
Abnova循环肿瘤DNA丨全血分离,基因组DNA萃取分析
How DHCP router works
[GNN] graphic gnn:a gender Introduction (including video)
Jmeter 5.5版本发布说明
Bus message bus
MOS管参数μCox得到的一种方法
Comment les entreprises gèrent - elles les données? Partager les leçons tirées des quatre aspects de la gouvernance des données
华为机试题素数伴侣
反射(二)
随机推荐
SolidWorks的GB库(钢型材库,包括铝型材、铝管等结构)安装及使用教程(生成铝型材为例)
The startup of MySQL installed in RPM mode of Linux system failed
Abnova循环肿瘤DNA丨全血分离,基因组DNA萃取分析
请教一下,监听pgsql ,怎样可以监听多个schema和table
Navicat importing 15g data reports an error [2013 - lost connection to MySQL server during query] [1153: got a packet bigger]
DHCP路由器工作原理
MYSQL----导入导出&视图&索引&执行计划
Complete process of MySQL SQL
Sqlserver multithreaded query problem
Jmeter 5.5版本发布说明
场馆怎么做体育培训?
Please ask a question, flick Oracle CDC, read a table without update operation, and repeatedly read the full amount of data every ten seconds
Problems and precautions about using data pumps (expdp, impdp) to export and import large capacity tables in Oracle migration
Leetcode T1165: 日志分析
from .onnxruntime_pybind11_state import * # noqa ddddocr运行报错
DB2获取表信息异常:Caused by: com.ibm.db2.jcc.am.SqlException: [jcc][t4][1065][12306][4.25.13]
SolidWorks GB Library (steel profile library, including aluminum profile, aluminum tube and other structures) installation and use tutorial (generating aluminum profile as an example)
MySQL view bin log and recover data
2022/07/04学习记录
Unity3d learning notes