数据的双向绑定
作者：互联网
在setup中设置 响应式数据（data中双向绑定的数据）
Ⅰ、ref（包装字符串或者数字）， Ⅱ、reactive（包装对象和或数组） Ⅲ、toRefs（直接在html模板中使用对象的属性名当变量，不需要用.访问）
Ⅰ、ref（包装字符串或者数字）
<template>
<div>
<h1 @click="changeCount">计数:{{count}}</h1>
</div>
</template>
<script>
import {ref,reactive,toRefs} from 'vue'
export default {
name: "App",
setup(){
const count=ref(0);
function changeCount() {
count.value++
}
return{count,changeCount
}
}
</script>
<style scoped>
</style>
Ⅱ、reactive（包装对象和或数组）
<template>
<div>
<p >{{user.name}}--{{user.age}}</p> // 这一行是重点 用user.age访问
</div>
</template>
<script>
import {ref,reactive,toRefs} from 'vue'
export default {
name: "App",
setup(){
const user=reactive({
name:'张三',
age:18
}）
return{user}
}
}
</script>
<style scoped>
</style>
Ⅲ、toRefs直接使用对象的属性名当变量（解构）
app。vue
<template>
<div>
<p>{{name}}--{{age}}</p> // 这一行是重点 ， 在解构之后直接用独享的属性名当变量就能直接访问
</div>
</template>
<script>
import {toRefs} from 'vue'
export default {
name: "app",
setup(){
const count=ref(0);
const user=reactive({
name:'张三',
age:18
})
return{...toRefs(user)}
}
}
</script>
<style scoped>
</style>
标签：toRefs,name,ref,age,绑定,reactive,user,双向,数据 来源： https://www.cnblogs.com/ran777/p/16260608.html