vue3-toRef和toRefs

toRef把reactive对象下的属性指定到外部 指定出来的属性也是响应式的和原来的reactive进行相互影响,访问toRef加.value

<template> 
  <h4>age:{
    
    {
    
     age }}</h4>
  <h4>person.age:{
    
    {
    
     person.age }}</h4>
  <button @click="ageclick">修改age</button>
</template>
 
<script >
import {
    
     ref, reactive, toRef} from "vue";
export default {
    
    
  setup() {
    
    
    let person = reactive({
    
    
      name: "张三",
      age: 18,
      job: {
    
    
        j1: {
    
    
          salary: 20,
        },
      },
    });
   
    const age = toRef(person, "age");
    let ageclick = () => {
    
    
      age.value += "~~~~";
      console.log(age.value, "age");
    };
    return {
    
     age, person, ageclick };
  },
};
</script>  
 

<!-- let person = reactive({
    
    
  name: "张三",
  age: 18,
  job: {
    
    
    j1: {
    
    
      salary: 20,
    },
  },
});
const x = toRefs(person);
console.log(x.job.value.j1.salary, "x-job");
const age = toRef(person, "age");
const name = toRef(person, "name"); -->

<style lang="scss" scoped>
</style>

toRefs :把整个Reactive对象进行提供给外部 一般配合…展开 return出去的时候界面好访问

<template> 
  <h4>torefs修改name:{
    
    {
    
     name }}</h4>
  <h4>torefs修改job.j1.salary:{
    
    {
    
     job.j1.salary }}</h4>
  <button @click="ageclickrefs">torefs</button>
</template>
 
<script >
import {
    
     ref, reactive, toRef, toRefs } from "vue";
export default {
    
    
  setup() {
    
    
    let person = reactive({
    
    
      name: "张三",
      age: 18,
      job: {
    
    
        j1: {
    
    
          salary: 20,
        },
      },
    }); 
    const x = toRefs(person);
    let ageclickrefs = () => {
    
    
      x.name.value += "qqq"; //修改name
      x.job.value.j1.salary++;
      console.log(x.job.value.j1.salary, "x-job");
    };
    return {
    
       person, ...x, ageclickrefs };
  },
};
</script>   
<style lang="scss" scoped>
</style>

注意 使用setup语法糖的时候使用toRefs访问 template加.value，使用toRef访问 template不加.value

<template>
  
  <h4>torefs修改age:{
    
    {
    
     age }}</h4> 
  <h4>torefs的name:{
    
    {
    
     name }}</h4>
  <h4>torefs的job.j1.salary:{
    
    {
    
     x.job.value.j1.salary }}</h4>
 
</template>
 
<script setup>
import {
    
     ref, reactive, toRef, toRefs } from "vue";
let person = reactive({
    
    
  name: "张三",
  age: 18,
  job: {
    
    
    j1: {
    
    
      salary: 20,
    },
  },
});
const x = toRefs(person);
console.log(x.job.value.j1.salary, "x-job");
const age = toRef(person, "age");
const name = toRef(person, "name");
 
</script>  
 



<style lang="scss" scoped>
</style>