Verwendung von toRef und toRefs in Vue3

toRef handelt es sich, wie der Name schon sagt, nicht um ref-responsive Daten

Das könnte möglich sein. Ich denke, es ist etwas problematisch, wenn ich zurückkomme.

 <template>
  <h4>姓名：{{ person.name }}</h4>
  <h4>年龄：{{ person.age }}</h4>
  <h4>薪资：{{ person.job.j1.salary }}</h4>
  <button @click="person.name += &#39;!&#39;">修改姓名</button>
  <button @click="person.age++">增长年龄</button>
  <button @click="person.job.j1.salary++">涨薪</button>
</template>
 
<script>
import { reactive } from "vue";
export default {
  setup() {
    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        j1: {
          salary: 20,
        },
      },
    });
    return {
      person,
    };
  },
};
</script>
 
<style>
</style>

Wenn Sie dies jedoch tun, werden Sie feststellen, dass die Seite nicht reagiert und sich die Datenänderungsseite nicht ändert, wie folgt:

Schauen wir uns als Nächstes die Verwendung von toRef an: Es ist offensichtlich, den Effekt zu implementieren

Das obige ist der detaillierte Inhalt vonVerwendung von toRef und toRefs in Vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!