组合API-reactive函数
定义响应式数据：
reactive是一个函数，它可以定义一个复杂数据类型，成为响应式数据。
演示代码：
<template>
<div class="container">
<div>{
{
obj.name}}</div>
<div>{
{
obj.age}}</div>
<button @click="updateName">修改数据</button>
</div>
</template>
<script>
import {
reactive } from 'vue'
export default {
name: 'App',
setup () {
// 普通数据
// const obj = {
// name: 'ls',
// age: 18
// }
const obj = reactive({
name: 'ls',
age: 18
})
// 修改名字
const updateName = () => {
console.log('updateName')
obj.name = 'zs'
}
return {
obj ,updateName}
}
}
</script>
总结： 通常是用来定义响应式对象数据
组合API-toRef函数
目标：掌握使用toRef函数转换响应式对象中某个属性为单独响应式数据，并且值是关联的。
定义响应式数据：
toRef是函数，转换响应式对象中某个属性为单独响应式数据，并且值是关联的。
演示代码：
<template>
<div class="container">
{
{
name}} <button @click="updateName">修改数据</button>
</div>
</template>
<script>
import {
reactive, toRef } from 'vue'
export default {
name: 'App',
setup () {
// 1. 响应式数据对象
const obj = reactive({
name: 'ls',
age: 10
})
console.log(obj)
// 2. 模板中只需要使用name数据
// 注意：从响应式数据对象中解构出的属性数据，不再是响应式数据
// let { name } = obj 不能直接解构，出来的是一个普通数据
const name = toRef(obj, 'name')
// console.log(name)
const updateName = () => {
console.log('updateName')
// toRef转换响应式数据包装成对象，value存放值的位置
name.value = 'zs'
}
return {
name, updateName}
}
}
</script>
<style scoped lang="less"></style>
使用场景：有一个响应式对象数据，但是模版中只需要使用其中一项数据。
组合API-toRefs函数
目标：掌握使用toRefs函数定义转换响应式中所有属性为响应式数据，通常用于解构|展开reactive定义对象。
定义响应式数据：
toRefs是函数，转换响应式对象中所有属性为单独响应式数据，对象成为普通对象，并且值是关联的
演示代码：
<template>
<div class="container">
<div>{
{
name}}</div>
<div>{
{
age}}</div>
<button @click="updateName">修改数据</button>
</div>
</template>
<script>
import {
reactive, toRef, toRefs } from 'vue'
export default {
name: 'App',
setup () {
// 1. 响应式数据对象
const obj = reactive({
name: 'ls',
age: 10
})
console.log(obj)
// 2. 解构或者展开响应式数据对象
// const {name,age} = obj
// console.log(name,age)
// const obj2 = {...obj}
// console.log(obj2)
// 以上方式导致数据就不是响应式数据了
const obj3 = toRefs(obj)
console.log(obj3)
const updateName = () => {
// obj3.name.value = 'zs'
obj.name = 'zs'
}
return {
...obj3, updateName}
}
}
</script>
<style scoped lang="less"></style>
使用场景：剥离响应式对象（解构|展开），想使用响应式对象中的多个或者所有属性做为响应式数据。
组合API-ref函数
目标：掌握使用ref函数定义响应式数据，一般用于简单类型数据
定义响应式数据：
ref函数，常用于简单数据类型定义为响应式数据
再修改值，获取值的时候，需要.value
在模板中使用ref申明的响应式数据，可以省略.value
演示代码：
<template>
<div class="container">
<div>{
{
name}}</div>
<div>{
{
age}}</div>
<button @click="updateName">修改数据</button>
</div>
</template>
<script>
import {
ref } from 'vue'
export default {
name: 'App',
setup () {
// 1. name数据
const name = ref('ls')
console.log(name)
const updateName = () => {
name.value = 'zs'
}
// 2. age数据
const age = ref(10)
// ref常用定义简单数据类型的响应式数据
// 其实也可以定义复杂数据类型的响应式数据
// 对于数据未之的情况下 ref 是最适用的
// const data = ref(null)
// setTimeout(()=>{
// data.value = res.data
// },1000)
return {
name, age, updateName}
}
}
</script>
使用场景：
当你明确知道需要的是一个响应式数据 对象 那么就使用 reactive 即可
其他情况使用ref