toRef和toRefs

toRef

App.vue

<template>
  <button @click="toggle=!toggle">切換顯示/隱藏</button>
  <Demo v-if="toggle"></Demo>
</template>

<script>
import {ref} from 'vue'
import Demo from "@/components/Demo";
export default {
  name: 'App',
  components: {Demo},
  setup(){
    const toggle=ref(true)
    return{toggle}
  },
}
</script>

Demo.vue

<template>
  <h2>個(gè)人信息</h2>
  <h2>姓名：{{name}}</h2>
  <h2>年齡：{{age}}</h2>
  <h2>薪資：{{salary}}K</h2>
  <button @click="name+='~'">修改姓名</button>
  <button @click="age++">增加年齡</button>
  <button @click="salary++">漲薪</button>
</template>

<script>
import {reactive,toRef} from 'vue'
export default {
  name: "Demo",
  setup(){
    //數(shù)據(jù)
    let person=reactive({
      name:'張三',
      age:18,
      job:{
        j1:{
          salary:20
        }
      }
    })

    const name1=person.name
    console.log("person.name",name1)  //輸出只是字符串
    const name2=toRef(person,'name')
    console.log("toRef(person,'name')",name2)    //輸出指向是person的name屬性的ref對(duì)象

    //返回一個(gè)對(duì)象（常用）
    return{
      name:toRef(person,'name'),
      age:toRef(person,'age'),
      salary:toRef(person.job.j1,'salary')
    }
  },
}
</script>

<style scoped>

</style>

原理：

toRefs

App.vue

<template>
  <button @click="toggle=!toggle">切換顯示/隱藏</button>
  <Demo v-if="toggle"></Demo>
  <hr>
  <DemoTwo></DemoTwo>
</template>

<script>
import {ref} from 'vue'
import Demo from "@/components/Demo";
import DemoTwo from "@/components/DemoTwo";

export default {
  name: 'App',
  components: {DemoTwo, Demo},
  setup(){
    const toggle=ref(true)
    return{toggle}
  },
}
</script>

DemoTwo.vue

<template>
  <h2>個(gè)人信息</h2>
  <h2>姓名：{{name}}</h2>
  <h2>年齡：{{age}}</h2>
  <h2>薪資：{{job.j1.salary}}K</h2>
  <button @click="name+='~'">修改姓名</button>
  <button @click="age++">增加年齡</button>
  <button @click="job.j1.salary++">漲薪</button>
</template>

<script>
import {reactive,toRefs} from 'vue'
export default {
  name: "Demo",
  setup(){
    //數(shù)據(jù)
    let person=reactive({
      name:'張三',
      age:18,
      job:{
        j1:{
          salary:20
        }
      }
    })


    console.log("-------------------------------------")
    const x=toRefs(person)
    console.log("toRefs(person)",x)

    //返回一個(gè)對(duì)象（常用）
    return{
      //toRefs返回的是一個(gè)對(duì)象，所以不能直接對(duì)象包對(duì)象，應(yīng)該將兩個(gè)對(duì)象合并
      ...toRefs(person)
    }
  },
}
</script>

<style scoped>

</style>

總結(jié)

1. 作用：創(chuàng)建一個(gè)ref對(duì)象，其value值指向另一個(gè)對(duì)象中的某個(gè)屬性
2. 語(yǔ)法：const name=toRef(person,‘name’)
3. 應(yīng)用：要將響應(yīng)式對(duì)象中的某個(gè)屬性單獨(dú)提供給外部使用時(shí)
4. 擴(kuò)展：toRefs與toRef功能一致，但可以批量創(chuàng)建多個(gè)ref 對(duì)象，語(yǔ)法：toRefs(person)

shallowReactive與shallowRef

shallowReactive

App.vue

<template>
  <button @click="toggle=!toggle">切換顯示/隱藏</button>
  <Demo v-if="toggle"></Demo>
</template>

<script>
import {ref} from 'vue'
import Demo from "@/components/Demo";

export default {
  name: 'App',
  components: {Demo},
  setup(){
    const toggle=ref(true)
    return{toggle}
  },
}
</script>

Demo.vue

<template>
  <h2>個(gè)人信息</h2>
  <h2>姓名：{{name}}</h2>
  <h2>年齡：{{age}}</h2>
  <h2>薪資：{{job.j1.salary}}K</h2>
  <button @click="name+='~'">修改姓名</button>
  <button @click="age++">增加年齡</button>
  <button @click="job.j1.salary++">漲薪</button>
</template>

<script>
import {reactive,toRefs,shallowReactive} from 'vue'
export default {
  name: "Demo",
  setup(){
    //數(shù)據(jù)
    /*let person=reactive({
      name:'張三',
      age:18,
      job:{
        j1:{
          salary:20
        }
      }
    })*/

	//只考慮第一層數(shù)據(jù)的響應(yīng)式
    let person=shallowReactive({
      name:'張三',
      age:18,
      job:{
        j1:{
          salary:20
        }
      }
    })

    //返回一個(gè)對(duì)象（常用）
    return{
      ...toRefs(person)
    }
  },
}
</script>

<style scoped>

</style>

shallowRef

Demo.vue

<template>
  <h2>當(dāng)前的x值是：{{x}}</h2>
  <button @click="x++">給x++</button>
  <h2>當(dāng)前的a.b的值是：{{a.b}}</h2>
  <button @click="a.b++">給a.b的值++</button>
  <hr>
  <h2>個(gè)人信息</h2>
  <h2>姓名：{{name}}</h2>
  <h2>年齡：{{age}}</h2>
  <h2>薪資：{{job.j1.salary}}K</h2>
  <button @click="name+='~'">修改姓名</button>
  <button @click="age++">增加年齡</button>
  <button @click="job.j1.salary++">漲薪</button>
</template>

<script>
import {reactive,toRefs,shallowReactive,shallowRef} from 'vue'
export default {
  name: "Demo",
  setup(){
    //數(shù)據(jù)
    /*let person=reactive({
      name:'張三',
      age:18,
      job:{
        j1:{
          salary:20
        }
      }
    })*/

    //只考慮第一層數(shù)據(jù)的響應(yīng)式
    let person=shallowReactive({
      name:'張三',
      age:18,
      job:{
        j1:{
          salary:20
        }
      }
    })

    const x=shallowRef(0)
    const a=shallowRef({
      b:0
    })
    console.log("x",x)
    console.log("a",a)


    //返回一個(gè)對(duì)象（常用）
    return{
      x,
      a,
      ...toRefs(person)
    }
  },
}
</script>

<style scoped>

</style>

總結(jié)

1. shallowReactive：只處理對(duì)象最外層屬性的響應(yīng)式（淺響應(yīng)式）
2. shallowRef：只處理基本數(shù)據(jù)類型的響應(yīng)式，不進(jìn)行對(duì)象的響應(yīng)式處理
3. 什么時(shí)候使用？
   （1）如果有一個(gè)對(duì)象數(shù)據(jù)，結(jié)構(gòu)比較深，但變化時(shí)只是外層屬性變化 ===> shallowReactive
   （2）如果有一個(gè)對(duì)象數(shù)據(jù)，后續(xù)功能不會(huì)修改該對(duì)象中的屬性，而是生新的對(duì)象來替換 ===>shallowRef

readonly與shallowReadonly

App.vue

<template>
  <button @click="toggle=!toggle">切換顯示/隱藏</button>
  <Demo v-if="toggle"></Demo>
  <hr>
  <br>
  <br>
  <DemoTwo></DemoTwo>
</template>

<script>
import {ref} from 'vue'
import Demo from "@/components/Demo";
import DemoTwo from "@/components/DemoTwo";

export default {
  name: 'App',
  components: {Demo,DemoTwo},
  setup(){
    const toggle=ref(true)
    return{toggle}
  },
}
</script>

Demo.vue

<template>
  <h2>當(dāng)前求和為：{{sum}}</h2>
  <button @click="sum++">點(diǎn)我和++</button>
  <hr>
  <h2>個(gè)人信息</h2>
  <h2>姓名：{{name}}</h2>
  <h2>年齡：{{age}}</h2>
  <h2>薪資：{{job.j1.salary}}K</h2>
  <button @click="name+='~'">修改姓名</button>
  <button @click="age++">增加年齡</button>
  <button @click="job.j1.salary++">漲薪</button>
</template>

<script>
import {reactive, toRefs,ref,readonly} from 'vue'
export default {
  name: "Demo",
  setup(){
    //數(shù)據(jù)
    let sum=ref(0)
    let person=reactive({
      name:'張三',
      age:18,
      job:{
        j1:{
          salary:20
        }
      }
    })

    person=readonly(person)
    sum=readonly(sum)


    //返回一個(gè)對(duì)象（常用）
    return{
      sum,
      ...toRefs(person)
    }
  },
}
</script>

<style scoped>

</style>

DemoTwo.vue

<template>
  <h2>當(dāng)前求和為：{{sum}}</h2>
  <button @click="sum++">點(diǎn)我和++</button>
  <hr>
  <h2>個(gè)人信息</h2>
  <h2>姓名：{{name}}</h2>
  <h2>年齡：{{age}}</h2>
  <h2>薪資：{{job.j1.salary}}K</h2>
  <button @click="name+='~'">修改姓名</button>
  <button @click="age++">增加年齡</button>
  <button @click="job.j1.salary++">漲薪</button>
</template>

<script>
import {reactive, toRefs,ref,shallowReadonly} from 'vue'
export default {
  name: "Demo",
  setup(){
    //數(shù)據(jù)
    let sum=ref(0)
    let person=reactive({
      name:'張三',
      age:18,
      job:{
        j1:{
          salary:20
        }
      }
    })

    person=shallowReadonly(person)


    //返回一個(gè)對(duì)象（常用）
    return{
      sum,
      ...toRefs(person)
    }
  },
}
</script>

<style scoped>

</style>

文章來源地址http://www.zghlxwxcb.cn/news/detail-423780.html

總結(jié)

1. readonly：讓一個(gè)響應(yīng)式數(shù)據(jù)變?yōu)橹蛔x的（深只讀）
2. shallowReadonly：讓一個(gè)響應(yīng)式數(shù)據(jù)變?yōu)橹蛔x的（淺只讀）
3. 應(yīng)用場(chǎng)景：不希望數(shù)據(jù)被修改時(shí)

到了這里，關(guān)于Vue3技術(shù)6之toRef和toRefs、shallowReactive與shallowRef、readonly與shallowReadonly的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！