vue3 toref函数 torefs函数 简化模板写法

一、作用

简化模板{{xx}}，xx的长度

二、toRef

1、语法

toRef(对象,属性)

2、案例

<template><h2>姓名：{{ name }}</h2><h2>年龄：{{ age }}</h2><h2>工资:{{ salary }}</h2><button @click="name += `~`">姓名</button><button @click="age += 1">年龄</button><button @click="salary-=10">工资</button>
</template><script>import {reactive, toRef} from 'vue';export default {name:'Demon',setup(){let person = reactive({name: 'duck',age: 8,job:{mode:'996',salary: 2800}})console.log(person)return{name: toRef(person, 'name'),age: toRef(person, 'age'),salary: toRef(person.job, 'salary')}}}
</script>

三、toRefs

1、语法

注意：toRefs只能简化一层对象，不能简化深层

toRefs(对象)