摘要
官方解释:setup()
钩子是在组件中使用组合式 API 的入口,通常只在以下情况下使用:
- 需要在非单文件组件中使用组合式 API 时。
- 需要在基于选项式 API 的组件中集成基于组合式 API 的代码时。
一、基本使用
组合式api的使用非常简单,就是在setup()中进行编写就可以了。不过为了做到响应式数据,我们在定义数据时需要用到ref和reactive这两个方法,这样定义的数据才不会失去其响应式。
ref用来定义对象以外的数据类型
使用方式:let str = ref("setup里的数据");
reactive 用来定义对象
使用方式:
const obj = reactive({
name:"setup里的对象",
str1:"setup里的str1"
});
最后将定义的方法和数据使用return的方式暴露出去
<template>
<div class="home">
<div>
composition Api的学习
</div>
<hr>
<br>
<div>
{{title}}
<br>
<button @click="run">普通定义方法</button>
</div>
<hr>
<br>
<div>
{{str}}---{{obj.name}}-----{{obj.str1}}
<br>
<button @click="getObj">获取obj</button>
<br>
<button @click="getStr">获取str</button>
<br>
<button @click="setObj">修改obj</button>
<br>
<button @click="setStr">修改str</button>
</div>
<hr>
<br>
<!-- 测试双向数据绑定-----可用 -->
<div>
<input type="text" v-model="str">
<br>
<input type="text" v-model="obj.name">
</div>
<hr>
<br>
<!-- toRefs解构响应式对象 -->
<div>
{{click}}
<br>
<input type="text" v-model="click">
</div>
</div>
</template>
<script>
import {ref , reactive , toRefs} from 'vue'
export default {
name: 'Home',
setup() {
// v3提供的一个组合式api的方法
// ref用来定义对象以外的数据类型
// reactive 用来定义对象
// 1、定义数据或方法
// 2、使用return暴露出去
let str = ref("setup里的数据");
const obj = reactive({
name:"setup里的对象",
str1:"setup里的str1"
});
// 获取reactive里的数据
const getObj = ()=>{
console.log(obj)
}
// 获取ref里的数据
const getStr = ()=>{
console.log(str.value)
}
// 修改reactive里的数据
const setObj = ()=>{
// console.log(obj)
obj.name = "obj里的name"
}
// 修改ref里的数据
const setStr = ()=>{
// console.log(str.value)
str.value = "新的str"
}
// toRefs解构响应式对象(可以使对象属性像基本类型那样使用)
const obj1 = reactive({
click:121,
aaa:"obj1的aaa"
})
return {
str,
obj,
getObj,
getStr,
setObj,
setStr,
// ...obj1 这种做法会失去响应式
...toRefs(obj1)
}
},
data() {
return {
title:"正常的数据"
}
},
methods: {
run(){
console.log("v2定义方法");
}
},
}
</script>
结果:
二、定义方法
setup()方法里还可以定义方法,定义方式为
const getObj = ()=>{
console.log(obj)
}
只不过同样的需要return暴露出去
代码上述有,结果:
三、 toRefs的功能
toRefs就是为了解构reactive定义的对象
//例如
const obj1 = reactive({
click:121,
aaa:"obj1的aaa"
})
//我们使用时只能{{obj.click}}这样使用
//通过toRefs解构之后,我们就可以直接{{click}}使用并且不会丧失其响应式
结果: