标签：toRefs name ref age 绑定 reactive user 双向 数据

在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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。