vue3【toRef和toRefs–详】

飞熊 • 2023年7月14日下午4:41 • 前端开发 • 阅读 212

有时候，不是因为你没有能力，也不是因为你缺少勇气，只是因为你付出的努力还太少，所以，成功便不会走向你。而你所需要做的，就是坚定你的梦想，你的目标，你的未来，然后以不达目的誓不罢休的那股劲，去付出你的努力，成功就会慢慢向你靠近。

导读：本篇文章讲解 vue3【toRef和toRefs–详】，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com，来源：原文

通过下面的代码例子分析这两个作用及其用法：

<template>
    <h1>姓名：{
  {person.name}}</h1>
    <h1>年龄：{
  {person.age}}</h1>
    <h1>薪资：{
  {person.job.job1.salary}}w</h1>
    <button @click="person.name+='~'">修改姓名</button>
    <button @click="person.age++">修改年龄</button>
    <button @click="person.job.job1.salary++">涨薪</button>
</template>

<script>
import { reactive } from 'vue'
export default {
    name: 'Demo',
    components: {},
    setup() {
        let person = reactive({
            name: "sh",
            age: 18,
            job: {
                salary: 10,
                job1: {
                    salary: 20,
                }
            }

文章由极客之家整理，本文链接：https://www.bmabk.com/index.php/post/149658.html