1. setup中定义数据
1.1 定义普通的数据
点击查看代码
<template>
<div>
<h2>{{ message }}</h2>
</div>
</template>
<script>
export default {
setup(){
const message = "hello world"
return {
message
}
}
}
</script>
<style scoped>
</style>
点击查看代码
<template>
<div>
<h2>{{ message }}</h2>
<button @click="changeMessage">修改Message</button>
</div>
</template>
<script>
export default {
setup(){
let message = "hello world"
function changeMessage(){
message = "你好，世界"
}
return {
message,
changeMessage
}
}
}
</script>
<style scoped>
</style>
1.2 定义响应式数据
第一种方式: Reactive API
Reactive API定义复杂类型的数据
点击查看代码
<template>
<div>
<h2>账号: {{ account.username }}</h2>
<h2>密码: {{ account.passwd }}</h2>
<button @click="change">修改</button>
</div>
</template>
<script>
import { reactive } from 'vue'
export default {
setup(){
const account = reactive({
username: "admin",
passwd: "admin"
})
function change(){
account.username = "kobe"
}
return {
account,
change
}
}
}
</script>
<style scoped>
</style>
第二种方式: Ref API
reactive API对传入的类型是有限制的，它要求必须传入的是一个对象或者数组类型
如果传入一个基本数据类型（String、Number、Boolean）会报一个警告
Vue3提供了另外一个API：ref API（其实它既可以定义简单数据类型，也可以定义复杂类型数据）
点击查看代码
<template>
<div>
<!-- 默认情况下，在template中使用ref时，vue会自动帮我们解包(也就是会自动取value) -->
<h2>当前计数: {{ number }}</h2>
<button @click="add">+1</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup(){
// ref返回的是一个对象
const number = ref(0)
function add(){
number.value++
}
return {
number,
add
}
}
}
</script>
<style scoped>
</style>
2. reactive api 和ref api的使用场景
2.1 reactive api的使用场景
点击查看代码
1. 本地的数据
2. 多个数据之间有关系(例如：提交表单的时候，用户名，密码，邮箱等这类的数据)
2.2 ref api的使用场景
点击查看代码
除了上述的场景，其它场景基本都是ref
3. toRefs
4. setup中使用computed
点击查看代码
<template>
<div>
<h2>{{ fullName }}</h2>
</div>
</template>
<script>
import { reactive, computed } from 'vue';
export default {
setup(){
const names = reactive({
firstName: "kobe",
lastName: "btyant"
})
const fullName = computed(() => {
return names.firstName + " " + names.lastName
})
return {
names,
fullName
}
}
}
</script>
<style scoped>
</style>